Tables

The correct use of tables is for the laying out of information in columns and rows. However, web designers quickly started using table as the grid on which their web pages were laid out. In other words, tables were used for positioning of objects on the page. This was not the strict intention, but there was no other way to do it.

The tags

<table>        - indicates the start of the table section
<tr>           - indicates the start of a row
<td>           - indicates the start of a cell

The attributes

<table>

width          - in pixels or in percent (of the window)
height         - ditto
align          - horizontal alignment of the table on the page 
                 left, center or right ("left" is default)
border         - the thickness in pixels ("0" = none is default)
cellspacing    - the distance between adjacent cells ("1" is default)
cellpadding    - the internal margin of a cell
bgcolor        - sets the background color for the entire table
background     - sets a background image that will be tiled 
                 through the background of the table
hspace         - space in pixels to the left and right of the table
vspace         - space in pixels above and below the table
summary        - provides description for screen reading equipment

<tr>

height         - in pixels

<td>

width          - in pixels or in percent
                 All the column widths will add up to the 
                 total table width
align          - the horizontal alignment of text in the 
                 cell - left, center or right ("left" is default)
valign         - the vertical alignment of text in the 
                 cell - top, middle or bottom ("middle" is deafult)
bgcolor        - sets the background color for the cell
background     - sets a background image that will be tiled 
                 through the background of the cell
colspan        - the number of columns the cell is to span
                 the setting is equivalent to the 'merge cells' 
                 feature in a word processor.
rowspan        - the number of rows the cell is to span

Examples

These examples are written using basic HTML. They open in a new window. To see the HTML source - right click and select "View source" from the pop-up menu.

example 1 | example 2 | example 3

Tips

• If column widths are not specified then they will adjusted for "best fit".
• Cell widths and heights expand to contain their contents.
• Specify the column widths only in the first row. Then you will know where to find the values if you need to change them.
• Specify the cell widths with percentages rather than absolute sizes because you cannot be sure what size screen or what size font the user will have.
• Set the cellspacing and the cellpadding to zero to get more control over positioning - the mathematics will be easier.