Eric's HTML Table Design Page

Updated: November 23, 1999


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:

1 2
3 4
5

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)
1 2 2
1 3 4
5 5 4


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>)

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