Re: Alignment in table cells

In article <bd094ff852.harriet@blueyonder.co.uk>,
Harriet Bazley <lists@orange.wingsandbeaks.org.uk> wrote:

> I'm trying to ensure that the width of the entire table is consistent -
> but presumably I could do that by using TABLE WIDTH="100%" on two
> separate tables?

Yes.

> What exactly does the cell WIDTH apply to, if it doesn't apply to the
> percentage of the total width of this row?

It sets the column width of the column to which the cell belongs. (Or if
the cell spans multiple columns it adds a constraint on the width of the
set of columns. Individual columns in that set may be given specific
widths by cells on different rows, if those cells only span one column.)

Browsers have to resolve whatever they're given, and if the markup defines
something impossible (like the left most column being set to 20% on the
first row and 50% on the second row in your original example), then the
browser has to break some of those conflicting demands. Something has to
give.

Doing it with one table, you could have a six column table, with three
cells on the first row all spanning two columns, and two cells on the
second row both spanning three columns. That way you can give each cell
the width you want without putting conflicting demands on any columns.

Unlike the separate tables route, that adds one restriction though; the
boundary between the cells on the 2nd row will always fall inside the span
of the middle cell on the first row.

> > Or better, use a CSS based layout.
> >
> How would/should I use CSS to achieve the layout above? I find
> http://www.w3.org/TR/CSS21/tables.html

<div class="example row">
<div class="example head-left">head left</div>
<div class="example head-centre">head centre</div>
<div class="example head-right">head right</div>
</div>
<div class="example row">
<div class="example body-left">body left</div>
<div class="example body-right">body right</div>
</div>


With table layout:

.example {
border: 1px inset #aaa; }

.row {
display: table;
border-spacing: 0;
border: none;
width: 100%; }
.head-left {
display: table-cell;
width: 20%; }
.head-centre {
display: table-cell;
text-align: center; }
.head-right {
display: table-cell;
width: 20%;
text-align: right; }
.body-left {
display: table-cell;
width: 50%; }
.body-right {
display: table-cell;
text-align: right; }


Or for float layout:

.example {
border: 1px inset #aaa; }

.row {
overflow: hidden;
border-spacing: 0;
border: none;
width: 100%; }
.head-left {
float: left;
width: 20%; }
.head-centre {
float: left;
text-align: center;
width: 58%; }
.head-right {
float: left;
width: 20%;
text-align: right; }
.body-left {
float: left;
width: 49%; }
.body-right {
float: left;
width: 49%;
text-align: right; }

--

Michael Drake (tlsa) http://www.netsurf-browser.org/