Tables

Tables can be used in web pages to display information like donations received.

More importantly they can be used to control the layout of web pages.

Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

<table border="1">

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr>

</table>

How it looks in a browser:

Tables and the Border Attribute

If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show.

To display a table with borders, you will have to use the border attribute:

<table border="1">

<tr>

<td>Row 1, cell 1</td>

<td>Row 1, cell 2</td>

</tr>

</table>

Headings in a Table

Headings in a table are defined with the <th> tag.

<table border="1">

<tr>

<th>Heading</th>

<th>Another Heading</th>

</tr>

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr>

</table>

How it looks in a browser:

Empty Cells in a Table

Table cells with no content are not displayed very well in most browsers.

<table border="1">

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td></td>

</tr>

</table>

How it looks in a browser:

Note that the borders around the empty table cell are missing (NB! Mozilla Firefox displays the border).

To avoid this, add a non-breaking space (&nbsp;) to empty data cells, to make the borders visible: 

<table border="1">

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>&nbsp;</td>

</tr>

</table>

How it looks in a browser:

Tables are useful for displaying data such as donations received, etc.

In the past tables were used to control the layout of web pages. NowadaysCSS is used for layouts but it is a good exercise to learn how to use table layouts and you need to know it to work on old fashioned web sites.

So we'll try to do 2 page layouts with tables.

The first layout uses a table to create a header cell at the top, a navigation menu cell on the right and a content cell:

Try to create a similar layout yourself.

Here are some tips:

• To centre the table use <table align="centre" ....
• Give each cell a different background colour.

Table 2

This layout uses the "repeating background trick". You have to create a background strip which is then repeated all the way down the page giving a background for the navigation sidebar.

This background image only needs to be a few pixels high, make it 10 to 15 pixels high so you can see it in Photoshop; make it 2000 pixels wide to allow for wide screens.

Coding the table layout is a bit tricky. We will give you help if you're completely stumped but thhis is the kind of problem you need to be able to solve if you are going to be a web designer!!