Question

Essentially what I want is a table, with one row, 5 cells… The first / left cell should be left justfied, the last / right cell should be right justified, and the middle 3 cells need to be centered with equal amounts of spacing between each cell. The table itself is “100% width, so that is where the spacing between cells would come from.

How would I write this (using html / css)? “table” tags or “divs” etc are both valid, I don’t really mind which approach is taken as long as the end result looks correct.

Edit:
The problem is the spacing; the table itself isn’t an issue, but simply setting the alignment on the cells will not work correctly; the free space between the cells is not 100% divided equally between the cells.

I also don’t want to specify cell width as the content is dynamic and there is no way to know before hand how much width is needed.

Answer 1

HTML only version

<table>
<tr>
   <td width="20%"></td>
   <td width="20%" align="center"></td>
   <td width="20%" align="center"></td>
   <td width="20%" align="center"></td>
   <td width="20%" align="right"></td>
</tr>
</table>

CSS Version

<table>
<tr>
   <td style="width:20%;"></td>
   <td style="width:20%; text-align:center"></td>
   <td style="width:20%; text-align:center"></td>
   <td style="width:20%; text-align:center"></td>
   <td style="width:20%; text-align:right"></td>
</tr>
</table>