Eric's HTML Table Design Page

This page explains and demonstrates how complex table layouts are designed. I have not seen this part of the table creation process explained elsewhere. This is my interpretation of the process as explained to me by Guillermo P. Jimenez. I wrote this page to practice table design and to allow others to see the simple design process I used. This will show you how to design a table's basic layout, but does not attempt to show all the details and options of table creation: There are plenty of places to get that information.

Here's the table design I wanted to create:

Here's how I created the table design:

I scetched the design on paper, then drew a 3x3 grid over top (see grid below).
I started at the upper left corner of the grid, following each row from left to right,
and crossing off each box in the grid as it is accounted for.

• The first row (<tr>) has two cells (<td>)
    - The first cell (1) is two rows high (rowspan=2)
    - The second cell (2) is two columns wide (colspan=2)
• The second row has two cells
    - The first cell (3) is plain
    - The second cell (4) is two rows high (rowspan=2)
• The third row has one cell
    - The cell (5) is two columns wide (colspan=2)

Hints:

• View this document's source to see the actual html table codes
  (Please note that the entire page is enclosed in a table)
• Tables can be placed within tables for maximum versatility
• Table cells don't display correctly if they are empty, so use a
  non-breaking space (&nbsp;) to fill an empty cell
• Don't forget to close all your tables (</table>), rows (</tr>), and cells (</td>)

• Return to Eric's Home Page
• E-mail Eric

All contents of this web site and all pages contained within are copyright 1996-2000 by Eric L. Carlson.