Photoshop Question posted in
The official user guide can be found here.

HTML & CSS: Can't center my tables – Photoshop

I’m struggling to get my 3 tables to be centered in the page.

Here’s a picture of what it looks like currently:

http://s2.postimg.org/5qbkb264p/tables.png

Basically (from look at the image), I want the second/middle table (“Work” table) to be the only table in center, and the other 2 tables (“About” and “Collaborate” tables; left and right from the middle, respectively) to have spread out a bit (using margin, I would assume).

Here’s my HTML:

.fixedWidth2 {
  margin: 0 auto;
  width: 1000px;
  height: 350px;
  background-color: green;
  border: 2px solid yellow;
}

.tableProp1 {
  width: 200px;
  float: left;
  margin-left: ;
}

.tableProp1 tr td {
  height: 200px;
  color: red;
}

.tableProp2 {
  margin-left: 40px;
  width: 200px;
  float: left;
}

.tableProp2 tr td {
  height: 200px;
  color: pink;
}

.tableProp3 {
  margin-left: 40px;
  width: 200px;
  float: left;
}

.tableProp3 tr td {
  height: 200px;
  color: blue;
}
<div id="mainContent">
  <div class="fixedWidth2">
    <table class="tableProp1" border="1">
      <tr>
        <th>About</th>
      </tr>
      <tr>
        <td>Learn more about me and my accomplishments.</td>
    </table>
    <table class="tableProp2" border="1">
      <tr>
        <th>Work</th>
      </tr>
      <tr>
        <td>I tend to get involved with a lot of different projects. Ranging from a simple photoshop gig to having a small role in a television/pilot</td>
      </tr>
    </table>
    <table class="tableProp3" border="1">
      <tr>
        <th>Collaborate</th>
      </tr>
      <tr>
        <td>Have a brand new or idea of a project? Whatever help you may need, I may be of some assistance to</td>
      </tr>
    </table>
  </div>
  <!-- Fixed Width 2 DIV for Main Content DIV -->
</div>
<!-- mainContent DIV -->
Tags:

3

Answers


  1. 0

    Since you are using fixed widths for your tables and you’re floating them, I would wrap them in a container, set the width on that to match all three tables+margin and set margin: auto on the container

    .table-wrapper{
  width: 680px;
  margin: auto;
}

    JSFIDDLE

    Alternatively you can just use display: inline-block instead of float:left and add text-align: center to .fixedWidth2

    ALT FIDDLE

    Login or Signup to reply.
  2. 0

    I would not use <table> at all… table are good for tabular content, not for templating….
    I would use DIV or even HTML5’s <article> and <section>.
    Think also about SEO, <h2> is a better mirror to your website semantic toward search engines than table’s TH …

    To center three elements you can simply set them display: inline-block; with some vertical-align, than just setting the <div class="centered"> to text-align: center; will center-align your inner elements. You can also use float:left; but I’ve not covered that example.

    http://jsbin.com/roruqo/1/

    <div id="container">

  <div id="slider"></div>

  <div id="mainContent">

    <div class="centered">
      <div class="fixedWidth2">
        <h2>About</h2>
        <p>Learn more about me and my accomplishm...</p>
      </div>
      <div class="fixedWidth2">
        <h2>Work</h2>
        <p>I tend to get involved with a lot of d...</p>
      </div>
      <div class="fixedWidth2">
        <h2>Collaborate</h2>
        <p>Have a brand new or idea of a project?...</p>
      </div>
    </div>

  </div><!-- mainContent DIV -->


</div>


    h2, p{
  padding:15px;
  margin:0;
}

#container{
  width:960px;
  margin:0 auto;
  background:#eee;
}
#slider{
  background:blue;
  height:400px;
}
.centered{
  text-align:center;
}
.centered > div{
  text-align:left;
}
.fixedWidth2{
  min-height:170px;
  background:#ddd;
  display:inline-block;
  vertical-align:top;
  width: 250px;
  margin: 15px;
}
.fixedWidth2 h2{
  text-align:center;
  background:#aaa;
}

    Login or Signup to reply.
  3. 0 
            <div id="mainContent">
          <div class="fixedWidth2">
            <div class="row">
            <table class="tableProp1" border="1">
              <tr>
                <th>About</th>
              </tr>
              <tr>
                <td>Learn more about me and my accomplishments.</td>
            </table>
            <table class="tableProp2" border="1">
              <tr>
                <th>Work</th>
              </tr>
              <tr>
                <td>I tend to get involved with a lot of different projects. Ranging from a simple photoshop gig to having a small role in a television/pilot</td>
              </tr>
            </table>
            <table class="tableProp3" border="1">
              <tr>
                <th>Collaborate</th>
              </tr>
              <tr>
                <td>Have a brand new or idea of a project? Whatever help you may need, I may be of some assistance to</td>
              </tr>
            </table>
        </div>
          </div>

        </div>


    add this style in style sheet

    .row {
        margin: 0 auto;
        width: 680px;
    }


add  "row " division and apply this style then check  it's working properly.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search