Publish and Be...
	...Tabular!

Irregular shaped tables...

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
	Read more about it
	See a VR Tour
	Buy the Guide Book
	Book a holiday there

How to create irregular-shaped tables.

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.

Back to menu