|
TIP - when you're
using side-by-side table cells containing different amounts of text (like these three
columns), add a VALIGN=TOP attribute to each row-defining <TR> tag. This forces the browser to align the row's
cell's contents at the top margin.
Without VALIGN=TOP,
the browser will place the shorter text blocks some way down their cells, in an attempt to
vetically align them with the middle if the longest text block. |
Tables make your
columns narrower!
Today's hottest web sites, from www.microsoft.com
to our own www.pcplus.co.uk, all sport the
multi-column look - and with good reason. Narrower columns are easier to read than full
page-width ones, and the extra space around them can be used for menu panels, stop-press
news items, and even adverts if you're lucky enough to have advertisers.
Look at the HTML source from a leading-edge multi-column site such as C/NET (www.news.com) and you're likely to find not Java applets,
Dynamic HTML or even frames, but instead the humble table. That's because tables make it
really easy to divide your pages into vertical columns, add very little download overhead
to your pages and are compatible with virtually all recent browsers.
The main section of this page is a three-column, single-row table. In the left-hand
cell is another, nested table which forms a menu panel (they're dummy links, by the way).
The middle cell contains this text. The right-hand cell acts as a 'sidebar' for other
content.
You can put as much content (text, images, hyperlinks etc) as you like inside a table
cell. The browser will adjust the cell's height (vertical size) to cope with the content,
and will word-wrap text to fit whatever cell width you've specified. It's this ability to
hold large amounts of content that makes tables so useful as page layout tools.
Here's the HTML for this table:
<table CELLPADDING="5"
cellspacing="0" WIDTH="740px">
<tr>
<!-- Left-hand main column -->
<td VALIGN="top" bordercolor="#0000FF"
bgcolor="#DCFAFE">
<!-- Embedded table in
left-hand main column -->
<table BORDER="0"
CELLSPACING="5"
WIDTH="100" align="left">
.......embedded table definition
</table> <!-- end of embedded
table -->
</td>
<!-- Central column of main table -->
<td width="75%" VALIGN="top" bgcolor="#FEC9D8">
<h2><font color="#0000FF">
Tables make your
columns narrower!......
etc etc (main
page text/content)
</td>
<!-- Right-hand sidebar column -->
<td VALIGN="top" bgcolor="#DCFAFE">
<strong>Using gridlines
and backgrounds in tables....
etc etc (right-hand column
content)
</td>
</tr>
</table>
|
This page uses
shaded table cell backgrounds to distinguish between the columns.
Click here to see how
to give tables and cells colour and graphic backgrounds.
Click here to see how to
change the border design and colours. |
