Search code examples
htmlcssalignmentcentercss-tables

Center align one table cell under two others

This is what I am trying to accomplish:

|---------| |----------|
| TableC1 | | TableC2  |
|---------| |----------|
     |------------|
     | TableC3    |
     |------------|

THis above which you can see is what I am trying to accomplish. TableCell1 and TableCell2 nicely align in the center of the table, but since I want to have only a single table-cell underneath them, the TableCell3 just goes to one of the sides, left or right doesn't matter.

This is a snippet of how I've written it:

HTML:

<table id = "some-boxes">

<tr>
<td id = "first-box">
SOME TEXT101
</td>

<td id = "second-box">
SOME TEXT202
</td>
</tr>

<td id = "third-box">
SOME TEXT303
</td>
</table

CSS:

#first-box{
   width: 100px;
}
#second-box{
   width: 100px;
}
#third-box{
   width: 200px;
   text-align: center;
   margin-left: 50%;
   margin-left: 50%;
}

Hope someone has an answer to this mystery of mine. Thanks in regards :)

Solution

  • Use colspan to specify how many columns you want the <td> tag to take up.

    <td id = "third-box" colspan="2">
SOME TEXT303
</td>

    Here is a visual example. I just enabled borders to demonstrate: http://codepen.io/AlienHoboken/pen/uFlIC

    Also, you can get rid of the margin rules.