Home » Technology » HTML Lessons » An Introduction to Tables

An Introduction to Tables

© Oisin Prendiville

This month I will discuss tables. Tables are helpful in html not only for representing tabular data but also for laying out web pages. I will not be using the band metaphor because this is a fairly technical as opposed to practical section to teach.

To indicate the start of a table you use the <table> tag and to indicate the end of a table you use the </table> tag. If you want your table to have borders you would write <table border=1> or <table border=2> or more generally <table border=[thickness of border] >. By default your table will not have borders on most browsers but to be absolutely certain it has no borders you should write <table border=0>.

Data in tables is displayed in rows and columns. Rows go across columns go up and down. In html you write in data for a table row by row. Top row first and working down to the bottom row. To indicate the start of a row you use the <tr> tag and to indicate the end of the row you use the </tr> tag.

For now we will assume that each row has to have the same number of cells, which form columns.

To indicate the start of a cell you use the <td> tag and to indicate the end of a cell you use the </td> tag. All this talk of tags may be confusing so I will write some example code to make it easier to understand.

The following code creates a table with two rows, each with three cells (and therefore the table has three columns), the table has a border which is 2 pixels wide:

<table border=2>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

That table is empty and therefore useless. Now I will put in some information:

<table border=2>
<tr>
<td>This is the first cell of the first row.</td>
<td>This is the second cell of the first row.</td>
<td>This is the third cell of the first row.</td>
</tr>
<tr>
<td>This is the first cell of the second row.</td>
<td>This is the second cell of the second </td>
<td>This is the third cell of the second </td>
</tr>
</table>
This code creates this table in Internet Explorer. There are several attributes of the <table> tag, the <tr> tag and the <td> tag.

These are the attributes of the <table> tag.
BORDER: as discussed earlier. Default:0
CELLSPACING: sets the number of pixels between each cell. Default:2-4
CELLPADDING: sets the number of pixels of padding inside each cell. Default:2-4
BACKGROUND: sets a background image. Default: none
BGCOLOR: sets a background colour as discussed in a previous article. Default: #FFFFFF (white)

The copyright of the article An Introduction to Tables in HTML Lessons is owned by . Permission to republish An Introduction to Tables in print or online must be granted by the author in writing.