Layout in Tables

Back

Row one cell oneRow one cell two
Row two cell oneRow two cell two
Row three cell oneRow three cell two
Row four cell oneRow four cell two
Fig. 1) Simple table
The first table here starts <table border=2 align=right>. It's also enclosed in the paragraph (<p>..</p>) tags surrounding this text. This puts this text to its left.

You can use <td>...</td> and <th>...<th> to differentiate between data and headings. The headings are, by default, centred and in bold font.

Subsequent paragraphs normally flow around the table and eventually underneath. There's a potential layout problem here: were the table taller, then the next image or table in the page might overlap with it - you have to specify that you want things to be laid out otherwise (which I don't here). A horizontal rule will be laid out relative to the amount of space left of the table, unless a specific width has been specified.


The attributes colspan and rowspan let the
<td rowspan=2>...</td> <td colspan=2>...</td>
[Ordinary cell] [Ordinary cell]
Fig.2 (another table with text flowing round)
cells (table data) occupy a greater number of columns or rows respectively, as this second example shows. I've also used <table align=left> to make this text flow around and to the right of the table. The exact number of words above the table will vary according to browser and window size, but the word before it in the HTML is guaranteed to appear above. Both the Netscape and Internet Explorer layout managers put necessary whitespace beneath the table, rather than putting some above it as well.


This table uses width="100%" and demonstrates alignment of the cells:
<th> aligns to middle ...and <td> to left explicit <td align=left>
Bar blah blah ...align=middle
Baz blah blah ...align=right
Fig.3 (<table border=1 width="100%">) -to demonstrate cell alignment


Top