Publish and Be... | |
...Tabular! |
Tables don't have to stick to a symmetrical row-and-column layout - instead you can make individual cells span multiple columns (across the page) and multiple rows (down the page). The result is a panel containing cells of different sizes and shapes.
The table below contains (in theory, at least) two columns across the page and five rows down it. However the first cell in the first row (containing "St.Michael's Mount...") spans two columns. Similarly, the first cell in the second row (containing the image) spans four rows.
St. Michael's Mount, Cornwall | |
---|---|
To make a cell span columns, you put a COLSPAN= attribute in its <TD> tag. To make a cell span multiple rows, use use a ROWSPAN= attribute. When you've made a cell span multiple columns and/or rows, you omit the <TD> definitions for the extra cell positions to the right/below which have been occupied by the multi-spanned cell.
Here's the HTML for the table above:
<table BORDER="4">
<!-- The first row contains just one cell, spanning
two columns (COLSPAN=2). The column width of 461 pixels effectively sets the overall table
width. Note the use of a <TH> (Table Header) tag instead of a <TD> (Table
Data)- <TH> behaves like a <TD>, except that its text contents are
automatically displayed in bold type-->
<tr>
<th COLSPAN="2" WIDTH="461">St.
Michael's Mount, Cornwall</th>
</tr>
<!-- The second row begins with a cell which spans
four rows down the page. It also contains a second cell,
which goes in the right-hand column of the table.
-->
<tr>
<td ROWSPAN="4" WIDTH="320">
<img
SRC="StMich.jpg" WIDTH="320" HEIGHT="240"
ALIGN="bottom"></td>
<td><p align="center">
<a
HREF="Page1.htm"><b>Read more about it</b></a> </td>
</tr>
<!-- The remaining three rows look as if they've only
got one column each. However the left-hand column of each of these rows has already been
filled by the ROWSPAN=4 cell in the row above. So the single <TD> tag in each of
these three rows in fact defines the right-hand cell of the row. -->
<tr>
<td ><p align="center">
<a
HREF="Page2.htm"><b>See a VR Tour</b></a></td>
</tr>
<tr>
<td ><p align="center">
<a
HREF="Page3..htm"><b>Buy the Guide Book</b></a></td>
</tr>
<tr>
<td ><p align="center">
<a
HREF="Page4.htm"><b>Book a holiday there</b></a>
</td>
</tr>
</table>
Irregular tables can be a bit mind-boggling, so here's a diagram of how the HTML code relates to the visible cells in this table:
For another irregular table layout, see my CornwallCam page.