A Simple Table

Go Back

But I don't need tables unless I have tabular data to display? You do need tables- almost all webpages use them. Most pages need tables although you don't see them as they have no borders. Unlike word-processing we don't have columns or text boxes in HTML (yet). So, most layout other than a boring text page requires tables for page layout. They can get quite complicated with tables inside the cells of other tables, for complex layout. You can see the single cell tables in the page below. Click here to see the tables which are used to layout this page.

<table>

<table>

<table> Opens the table

<tr> </tr> contain the cells for each row. So we have two rows in the example.

<td> </td> define the cells in each row. So we have three cells (columns) in each row on the left. Your cell contents go between the <td> and </td> tags. Here there are no contents, but if I place empty cells in a table they will collapse to almost nothing. So, I place a space into each cell. You already learned that spaces are ignored except one between each word, so we need a special method. We insert an escape character for the space  . It is common practice to fill all empty cells in a table in this way.

You will notice how the code is laid out. Each row is indented and each cell further indented. This will make it easier to locate rows because we can see the matched pair of tags more readily.

COMMON TABLE ATTRIBUTES

Bgcolor/background - Used as in the <body> tag; if you do not use a background image or colour the table will be transparent showing the main page background.

Align - This defines the horizontal position of the table Left and Right are also allowed

Width - you may specify the absolute size in pixels but this may make the table too small or to wrap, depending on the resolution of the users screen. Better to define it as a percentage of the width of the window. Note the table can be greater than 100%.

Border - n refers to the number of pixels to define the width of the border-use zero for no borders.

Cellpadding - This is equivalent to the internal margins of each cell - again specified in pixels.

Cellspacing - This defines a space in pixels between each cell.

<table>

<table>

Controlling The Look of Each Cell

Each cell can have its own background or background image in the same way as we have seen before. This demonstrated in the first row.

In the second row we have used the align attribute. Here it works in a different way as it aligns the contents of the cell. Left, right and center a valid as before.

Valign aligns the contents of the cell vertically so top, middle and bottom are valid.

You cannot control the border, cellpadding or cellspacing of individual cells.

Writing the Code

Writing the code for tables is considered to be fairly straight forward but time consuming. In fact with the right approach it is not as time consuming as it appears. The technique is to define the overall table attributes, then define the first row and copy it as many times as needed to create the following rows.

Columns and Merging Cells

The column widths must be the same size across all rows, but it is possible to achieve the equivalent of merging cells. The cell height is not usually defined. The browser will simply adjust the height of any row so that it is high enough to accommodate the contents of the cell containing the greatest amount of data.

A Simple Table

COMMON TABLE ATTRIBUTES

Writing the Code

Columns and Merging Cells

Next lesson looks at merging cells.