Alexander Spiteri 's Home

HTML
Tables

Tricks

One of the best things about using HTML tables is the possibility of creating great looking pages, with strange designs, that you could never dream doing with plain HTML.
If you were curious enough to check the document source of those sites you like most, you would probably see that most of them rely on tables to make those strange designs.

We'll introduce here to some little table tricks that you'll need to know of. Then, the only distance between you and the best Web designer will be imagination.

Trick #1 - Borderless Tables

Borderless tables are quite simple.
You'll only need to set the BORDER attribute of the TABLE tag to 0.

If you're planning to use tables in order to control page layout, check these two other attributes:

CELLPADDING = n
Sets the space, in pixels, between the sides of a cell and its contents.
CELLSPACING = n
Sets the space, in pixels, between the exterior of the table and its cells.

Here's a very compact borderless table, using these 3 attributes:

Trick #2 - Color Enhanced Tables

If you know HTML then you have working with background colors.
Remember BGCOLOR? That's all you'll need to know.

Since Microsoft came up with IE 2.0 that you can set the background color of any table element (each cell, row or the table itself). Here's an example:

White White

Green Yellow

Gray Gray

<table border=0>
  <tr bgcolor="#ffffff">
    <td>White</td>
    <td>White</td>
  </tr>
  <tr>
    <td bgcolor="#00ff00">Green</td>
    <td bgcolor="#ffcc00">Yellow</td>
  </tr>
  <tr bgcolor="#ffffff">
    <td>Gray</td>
    <td>Gray</td>
  </tr>
</table>

Trick #3 - The Hidden Table

When Netscape first introduced Frames everybody thought that using tables to control page layout was about to end. We were all wrong. Even as we speak they still are the best way to produce good page design.

In fact, there is nothing like a good hidden table to control the position of every element in a page. Here's an example:

Index:

     Chapter 1
     Chapter 2
     Chapter 3
     Chapter 4

This is a simple example of what you can do with an hidden table.
A table like this could control the layout of a complete document, such as an online book.
The left column would contain links to each chapter of the book. This cell would display the text for each chapter and the cell on the bottom could contain copyright information or something like that.

Hello!

Here's the HTML code:

<table border=1 cellpadding=5 cellspacing=0>
  <tr>
    <td bgcolor="#ffffe7" width="25%" rowspan=2 valign="top">
    <font face="Arial" size=2>
    <b>Index:</b><br>
    <img src="point.gif" width=1 height=1 border=0 width=100%>
    <p>
      <img src="bullet.gif"> Chapter 1<br>
      <img src="bullet.gif"> Chapter 2<br>
      <img src="bullet.gif"> Chapter 3<br>
      <img src="bullet.gif"> Chapter 4<br>
    </font>
    </td>
    <td valign="top">
    <font face="Arial" size=2>
    ... text here ...
    </font>
    </td>
  </tr>
  <tr>
    <td valign="top" align="center">
    <font face="Arial" size=2>
    © Hello!
    </font>
    </td>
  </tr>
</table>

You should notice that an hidden must not have a border. Our table border was only set to 1 to show the table cells.
This example introduces also some new attributes:

<TD ROWSPAN = n ...>
Indicates the number of table rows the cell spans.
<TD WIDTH = n ...>
Sets the width of the table cell in pixels or as a percentage of the table width.
<TD VALIGN = align-type ...>
Specifies the vertical alignment of text in the cell.
<TD ALIGN = align-type ...>
Specifies the horizontal alignment of text in a cell.

In a word, you can do almost anything with table, in terms of page design and layout. If you would like to start using tables in your pages, our advise is to check the source of your favorite sites. You'll probably learn a lot about using tables for this purpose. To start right now, check this site.

Related Topics

TABLE element - TR element - TD element

Index

Introduction
Table Sintax
Tricks
Examples

Back to Alexander Spiteri's Home