Centering Table TR's

Question

I'm creating a website that displays some content in a table and I want it to always be centered. Its centered if there is 3 TD's it is centered, but I want it too center a TR in the middle of the 3 TD's when it only has 2 TD's.

Current

I want the Test5 and Test6 to center in the middle of the other TR but I can't seem to figure out how.

My Current code:

<html>

<style>
  #Center {
    text-align: center;
  }
  #CenterTable {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
  }
</style>

<div id="Center">

  <p>Testing Centered Table</p>

  <table id="CenterTable">

    <tr>

      <td>
        Test1
      </td>

      <td>
        Test2
      </td>

      <td>
        Test3
      </td>

    </tr>

    <tr>

      <td>
        Test4
      </td>

      <td>
        Test5
      </td>

    </tr>

  </table>

</div>

</html>

example is too vague, you can use colspan attribute to even it out, but not sure where to apply it because you have no headers, real data, etc. — albert, Aug 09 '16 at 00:35
Do you really need to be using a table? You can do this using DIVs but for a table you cannot display TDs in the way you want. — Daniel Williams, Aug 09 '16 at 01:02
http://stackoverflow.com/questions/36686154/what-is-the-best-html-layout-technique-divs-vs-tables — mlegg, Aug 09 '16 at 01:06

score 0 · Accepted Answer · answered Aug 09 '16 at 01:28

Tables are not used hardly at all anymore. You can accomplish this using div boxes and the flexbox design.

Heres a code snippet of what i think you're trying to accomplish but i made it with divs and the flexbox design.

.box-wrap {
  background: #a00;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.test {
  background: #0a0;
  width: 33.33%;
  height: 5em;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="box-wrap">
  <div class="test">
    test1
  </div>
  <div class="test">
    test2
  </div>
  <div class="test">
    test3
  </div>
  <div class="test">
    test4
  </div>
  <div class="test">
    test5
  </div>
</div>

Centering Table TR's

1 Answers1