Easy Web Site Design

Tables were originally added to the HTML specification to enable the display of tabular data. However, Web designers quickly realized their usefulness for page layout. There are probably few sites other than the very simplest that do not use tables in some way for distributing content on the page.

Here's the HTML for a simple table (in lower case, for a change):

<table width="400" border="1" cellspacing="6" cellpadding="3" align="center">
<tr>
<td rowspan="2" align="center" valign="top" bgcolor="#FFFF00">
cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 3</td>
</tr>
<tr>
<td colspan="2">cell 4</td>
</tr>
</table>

And here is the table produced by the above code:

cell 1	cell 2
	cell 3
cell 4

Tables are defined by the <table> </table> tags.

The <table> tag can take a number of mainly self-explanatory attributes.

width determines the width of the table, here it is 400 pixels. Widths can also be expressed as percentages. If we said width="75%" the table would occupy a width of 75% of the element which contains it.

Tables can also take a height attribute which defines the height of the table. If the width or height are not specified the browser will determine the appropriate sizing based on the table's content. If the specified values are too small the browser will automatically enlarge the table.

border refers to the width of the border surrounding the table and its cells (the boxes contained within the table). Often when tables are being used for layout the border attribute is set to zero. The border colour may be set with the bordercolor attribute.

cellspacing refers to the amount of space between table cells. cellpadding refers to the amount of space between the cell border and the content within. Here there are 6 pixels between cells, and 3 pixels from the cell border to the content.

align tells the browser where the table should be aligned within the element that contains it, here it is in the centre of the containing cell. Remember to use the American spelling for center.

Tables are divided into rows, each of which is contained within <tr> </tr> tags.

Table rows are divided into cells, each of which is contained within <td> </td> tags (td stands for table data).

The rowspan and colspan attributes are used to merge cells to create larger cells. In the example the top left cell has its rowspan attribute set to 2, this causes it to span two rows. The bottom cell has its colspan attribute set to 2, this causes it to span two columns. Table with a lot of merged cells can be tricky to create by hand (unless carefully mapped out on paper beforehand). A graphical editor such as Dreamweaver allows you to highlight cells to be merged and automatically takes care of rowspan and colspan attributes.

<td> tags can take align and valign attributes. These indicate horizontal and vertical alignment for content within the cell. In the example the "cell 1" text is centred horizontally and displayed at the top of the cell.

bgcolor defines the background colour of the cell. Colours in HTML are defined using three hexadecimal values (from 00 to FF) for the three primary colours red, green and blue, and are preceded by the # sign. Here the colour is set to #FFFF00. This means maximum red, maximum green and no blue. Mixing red and green light gives yellow. If that's confusing, don't worry - a graphical editor such as Dreamweaver provides a colour picker that lets you choose the colour you want visually and automatically creates the hex code. An online ColorPicker is available at pagetutor.com.

If you use tables, be sure to check the display of your pages in different browsers as certain features of tables are handled differently in different browser types.

Want to learn more? See

W3Schools HTML Tutorial

W3C - Dave Raggett's Introduction to HTML

NCSA - A Beginner's Guide to HTML

HTML 4.01 Specification

USENET newsgroups:
alt.html
comp.infosystems.www.authoring.site-design
comp.infosystems.www.authoring.html
alt.macromedia.dreamweaver
macromedia.dreamweaver