I. e., I'm suggesting that you do a "View-> Page Source" with your browser to look at the HTML, and relate that to what you see on the screen.
| (b) table cell 1 within row 1 | (c) table cell 2 within row 1 |
| (e) table cell 1 within row 2 | (f) table cell 2 within row 2 |
Let's do the same table, but forget the wandering text, and add a table header, a caption, and default border.
| This is the table header. | |
|---|---|
| table cell 1 within row 1 | table cell 2 within row 1 |
| table cell 1 within row 2 | table cell 2 within row 2 |
The table header ends up bold by default.
It's odd - the table header only occupies the first column, leaving an
empty header cell. I think it would be more useful for the header
to cross all rows. Oh, I see, that's what COLSPAN is for.
Do an COLSPAN=4 on the table header, and have a different number of
cells within each row: 4, 3, 2, 1, plus a final
<TD></TD> so it has a null row.
Oh, and center the whole thing, so it's more aesthetic.
| This is the table header, he said boldly. | |||
|---|---|---|---|
| row 1, cell 1 | row 1, cell 2 | row 1, cell 3 | row 1, cell 4 |
| row 2, cell 1 | row 2, cell 2 | row 2, cell 3 | |
| row 3, cell 1 | row 3, cell 2 | ||
| row 4, cell 1 | |||
That was neat.
Let's fiddle a bit more. Make a 3x3 table, with one cell containing far more text than the others. Also declare BORDER=20, and use a bottom caption.
| Headers are bold and centered | ||
|---|---|---|
| row 1, cell 1 | row 1, cell 2 | row 1, cell 3 |
| row 2, cell 1 | row 2, cell 2 goes on excessively. Will the text wrap into a box, or will it just extend off the screen? | row 2, cell 3 |
| row 3, cell 1 | row 3, cell 2 | row 3, cell 3 |
Interesting. It does wrap, but first, the browser creates a table which fills the screen. And I've seen this kind of thick border used like a picture frame, probably a table with one entry, containing a graphic. I wonder if the size must be stated exactly, or if the browser figures it out?
There are more header variations to try ROWSPAN, ALIGN, VALIGN. As well as cells spanning rows and columns. Ooo - we got background color, too. BGCOLOR="#$$$$$$"
| header 1 | |||
|---|---|---|---|
| r1, c1 | r1, c2 | r1, c3 | r1, c4 |
| r2, c1 | r2, c2 | r2, c3 | r2, c4 |
| r3, c1 | r3, c2 | r3, c3 | r3, c4 |
| r4, c1 | r4, c2 | r4, c3 | r4, c4 |
| r1, col 1..3 | r1, c4 | ||
| r2, c1 | r2, c2 | ||
| r3, c1 | r3, c2 | r3, c3 | r3, c4 |
| r4, c1 | r4, col 2..4 | ||
| r1, col 1..3 | r1..3, c4 | ||
| r2..4, c1 | r2..3, col 2..3 | ||
| r4, col 2..4 | |||
| this shows cell spacing = 20 | |||
|---|---|---|---|
| r1, c1 | r1, c2 | r1, c3 | r1, c4 |
| r2, c1 | r2, c2 | r2, c3 | r2, c4 |
| r3, c1 | r3, c2 | r3, c3 | r3, c4 |
| r4, c1 | r4, c2 | r4, c3 | r4, c4 |
| this shows cell padding = 20 | |||
|---|---|---|---|
| r1, c1 | r1, c2 | r1, c3 | r1, c4 |
| r2, c1 | r2, c2 | r2, c3 | r2, c4 |
| r3, c1 | r3, c2 | r3, c3 | r3, c4 |
| r4, c1 | r4, c2 | r4, c3 | r4, c4 |