Publish and Be...
	...Tabular!

Using tables to line things up...

The most basic use of HTML tables is simply making things line up neatly on the page - something that's surprisingly difficult to do in raw HTML, which allows the browser to flow things freely between the display window margins.

Lining Up Links

Here's a simple example of four hyperlinks entered consecutively across a page:

Links Information Guestbook Contacts

Not particularly neat, are they? (incidentally, these links are dummies, and don't actually work!).

Now here are the same hyperlinks in a basic auto-sizing table:

Try re-sizing your browser window. The table automatically adjusts its width to remain at 100% of the available screen space, re-aligning the hyperlink text in the middle of each cell.

Here's the HTML for this table:

<TABLE BORDER=1 WIDTH="100%">
  <TR>
     <TD><CENTER><A HREF="Page1.htm"><B>Links</B></A></CENTER></TD>
     <TD><CENTER><A HREF="Page2.htm"><B>Information</B></A></CENTER></TD>
     <TD align=center><A HREF="Page3.htm"><B>Guestbook</B></A></TD>
     <TD><CENTER><A HREF="Page4.htm"><B>Contacts</B></A></CENTER></TD>
  </TR>
</TABLE>

First comes the <TABLE> tag, which starts the table definition block. This sets the border width to one pixel (a value of zero means no borders at all), and tells the browser to make the table occupy 100% of the browser's display window width - whatever that may be.

The table has just one row, so contains a single <TR> (row) tag. Following that come the four <TD>...</TD> tag pairs which define the individual cells (or columns) in the row (note that, strictly speaking, the </TD> terminators are optional, but it's safest to put them in). Finally there's a </TR> row terminator, and a </TABLE> terminator for the whole HTML code block.

The material between each <TD>...</TD> pair is standard HTML, in this case hyperlink definitions consisting of an <A HREF=... tag, the clickable text to be displayed, then an </A> terminator.

In the first two cells, I've also included <CENTER> and </CENTER> tags. These are the standard HTML tags for centering page content, and normally centre-align content between the screen margins. However, when they're used inside a container (in this case a table cell), they align the content within the container instead.

I've used a different technique to centre the content in the third cell. Here I've added an ALIGN=CENTER attribute to the <TD> tag, causing everything inside the cell to be centered. You can use either method, although due to differences in the way Netscape and Microsoft browsers handle tables, the <CENTER> method is probably more reliable.

Images and captions

Tables are a great way to add a caption to an image - and if you've got more than one image to display, you can lay them out neatly and evenly-spaced across the page. Here I've used a three-column, two-row table. Here's the HTML for it:

<table border="0" width="100%">
  <tr>
    <td width=33%><p align="center"><img src="Royalc.jpg" width="150" height="112"></td>
    <td width=33%><p align="center"><img src="StMich.jpg" width="150"height="112"></td>
    <td width=33%><p align="center"><img src="Newlogo.gif" width="150" height="112"></td>
  </tr>
  <tr>
     <td ><p align="center">The Royal Crescent</td>
     <td ><p align="center">St.Michael's Mount</td>
     <td ><p align="center">That Strange Bloke...</td>
  </tr>
</table>

This table has two rows, so there are two <TR> tags, each followed by four <TD> tags, giving four columns (cells) per row. Like the first table its width is set to 100% of the browser window width, and the cells will automatically adjust in size if you resize the browser window. By setting the <TABLE> tag's BORDER attribute to zero, I've removed the gridlines altogether.

The HTML for this table was generated by Microsoft's FrontPage 98, which seems to have an obsession with paragraph (<P>) tags. As a result, it's preceded the contents of each table cell with <P align="center"> - an alternative to the <CENTER> and <TD ALIGN=CENTER> techniques  used to center cell content in the first table. That's fair enough, but it's also omitted the terminating </P> tags - naughty!

The <TD> tags for the first (top) row each have a WIDTH=33% attribute. This forces the browser to make all three cells equal width (note that "33%" means "33% of the overall table width", so if the table was fixed at 600 pixels wide, each cell would be 200 pixels). Doing this effectively sets the column widths for the whole table, because cells in later rows (further down the table) will be made the same width as the corresponding ones in the first row (note that setting widths for cells in later rows. If these cells hadn't been given specified widths, then the  table would have looked like this:

In this version the right-hand column is wider, because the cell in row 2 contains a long text string, and the browser has allocated as much space to it as possible. In the first version of this table the browser is forced to word-wrap the text earlier, because the the column width has been fixed.

Back to menu