Search code examples
htmlcsshtml-tablecenteroffset

Even number of td elements in table with odd number of columns


I feel like this is one of those well covered questions, but I was having a hard time finding a straight answer or solution.

According to the W3 spec on tables:

The number of columns is equal to the number of columns required by the row with the most columns, including cells that span multiple columns. For any row that has fewer than this number of columns, the end of that row should be padded with empty cells.

This is certainly apparent and makes sense, but I don't think it's unreasonable to want to center a particular row's contents if it does not reach the row width.

In my case I have a table of icons 3 columns wide, but there are 11 icons leaving the last row off center. I've been struggling to come up with a way around this, but all I can think of is to do something hacky or make a new table with two columns just for those icons.

Some sample code to illustrate the problem:

<table>
    <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>       
    </tr>
    <tr>
        <td>Content</td>
        <td>Content</td>
    </tr>
</table>

What I want

000 000 000
  000 000

What I get

000 000 000
000 000

Any ideas?


Solution

  • without css nested tables

    <table border="1">
         <tr>
            <td> 
              <table border="1">
                <tr>
                 <td>Content</td>
                 <td>Content</td>
                 <td>Content</td>       
               </tr>    
             </table>
          </td>              
        </tr>
        <tr>
            <td>
                <table width="100%" border="1">
                   <tr>
                     <td align="center">Content</td>
                     <td align="center">Content</td>              
                  </tr>   
                </table>
            </td>       
        </tr>
    </table>