COM2 INTERNET STUDIES & WEB DESIGN
SEPTEMBER 2006
Tables
<table><tr><td>
Tables begin with a <table> tag.
Tables are built up row by row. Each
row is marked by <tr> tags. Each
row comprises a number of cells that
contain the content to be displayed
in the table. These cells are marked
by <td> tags. It is vital that all
<table> <tr> and <td> tags be closed
and nested correctly.
<table>
The initial <table> tag may
include a number or properties. The
border property controls the
thickness of the border. If it is zero
the border is invisible. The space
between cells can be modified by
changing the cellspacing. celpadding
is the space between cell contents
and the cell wall.
<td>07</td>
Cells that contain headings may
use the <th> tag in place of the <td>
tag. This usually results in the text
contained in the cells being
displayed. However the details of
this are left to the browser to decide.
<td>Steve</td>
A caption for the table may also
be provided by using a <caption>
tag before the first row of the table.
Again, the appearance of this will be
determined by the browser.
Column Width
<tr>
<th>Runner</th>
<th>Number</th>
</tr>
<tr>
<td>Mike</td>
</tr>
<tr>
<td>Dan</td>
<td>11</td>
</tr>
<tr>
<td>12</td>
</tr>
</table>
Runner
Number
Mike
07
Dan
11
Steve
12
COLSPAN & ROWSPAN
The colspan and rowspan properties of the
<td> tag enable the contents of the table cell to
spread across into several columns or rows. This
allows for irregular tables.
If the relative widths of
the columns are unspecified
then the browser decides.
Most browsers assign the
widths of the column in
proportion to the length of
the longest line of text that
appears in the column. This
means that by inserting line
breaks <br /> carefully the
relative widths of the
columns can be modified.
HTML authors may also
specify the width of a
specific column. This value
can be a number of pixels or
a percentage of the table
width. Percentages are
often better because they
allow the table size to to
change to fit with width of
the browser window.
<tr><td>11</td>
</table>
Mike
<table>
<tr><td colspan="2">Mike></td></tr>
<tr><td rowspan="2">Steve</td>
Steve
07
11
<td>07</td></tr>
PAGE 1