Re: Alignment in table cells

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

> > Doing it with one table, you could have a six column table

> Mmmm... that is a bit of a nasty hack :-(

Quite. But tables are what they are, and your requirements don't exactly
match the concept of a table.

> > <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; }

> As I read it, this is, in fact, defining two separate tables; one with
> two cells in a single row and one with three?

Yes, kind of. There are no HTML tables. It has one block for each row.
In that example they're styled to have a table type layout. You can
achieve the same layout effect with the same markup and a different CSS
arrangement, as I showed with the alternate float-based example CSS.
There are loads of ways to style the same markup to get the desired layout.

--

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