CODEWITHSUNDEEP
htmlhtml-table
user85116
user85116

Reputation: 4492

html table with centered cells

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.

Upvotes: 0

Views: 272

Answers (4)

MRM
MRM

Reputation: 435

td
{
    text-align:center;

}
td:first-child
{
    text-align:left;   
}

td:last-child
{
    text-align:right;
}

Upvotes: 1

FluffyKitten
FluffyKitten

Reputation: 14312

If you are using a table, assign unique ids to each cell and then use css to justify as required, e.g.

HTML:

<td id="firstcell">...</td>
<td id="secondcell">...</td>
<td id="thirdcell">...</td>
<td id="fourthcell">...</td>
<td id="fifthcell">...</td>

CSS:

table {table-layout:fixed;}  /* ensure the widths are absolutely fixed at the specified width*/
td{ width: 20%;}  /* allocate space evenly between all 5 cells */
td#firstcell {text-align:left;}
td#secondcell, td#thirdcell, td#fourthcell {text-align:center;}
td#fifthcell {text-align:right;}

Upvotes: 1

potNPan
potNPan

Reputation: 747

<style type="text/css">
.five_columns {
    width: 100%;
}
.five_columns > div {
    width: 20%;
    float: left;
    text-align: center;
    overflow: auto;
}
.five_columns > div:first-child {
    text-align: left;
}
.five_columns > div:last-child {
    text-align: right;
}
</style>
<div class="five_columns">
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
</div>

overflow: auto is set because if you strictly want the width to be the same there really isn't much you can do (as far as I know) other than force scrollbars on anything that's too long.

Upvotes: 0

Jivago
Jivago

Reputation: 826

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>

Upvotes: 2

Related Questions