| 
|
Tables |
Tables can be used
in HTML for two main purposes. They can be used to create a visible
table grid or table in which to display information in an ordered pattern.
For example:
| Surname |
Forename |
| Smith |
John |
| Stevens |
Jane |
They can also be
used to control the spacing and positioning of items on a web page by
placing the items in table cells, but setting the border width to zero.
This means that the items position is controlled by the table, but the
table itself is hidden. For example the table:
 |
LOGO
WORLD |
could be used to
present a logo image and company title. If the border width is set to
zero the layout is retained but without the distracting border. The
result is:
|
LOGO
WORLD |
In HTML a table
is defined as cells within rows. The table is first defined, then each
row within the table, then the cells within each row. There are three
main tags with associated parameters:
|
|
<table> |
The start and finish
of the table is marked by the table tag
<table><!--
HTML elements --></table>
The table tag can
have a range of parameters which determine the appearance of the table
as a whole:
Align
align="left" {or right, center}
For example:
<table align="center"><!--
HTML elements --></table>
This determines the alignment of the table as a whole on the page, and
not the content within the table.
Width
width="200" or width="50%"
The width of the table can be expressed in pixels or as a percentage
of the container - eg window or other table cell.
Height
height="200" or height="50%"
The height of the table can be expressed in pixels or as a percentage
of the container - eg window or other table cell.
Background Color
bgcolor="red" or bgcolor="#ff0000"
The background color of the table can be expressed as text or as a hexadecimal
number.
Background Image
background="images/bullet.gif"
A background image can be provided for the table. Where the table is
bigger than the image, the image will tile vertically and horizontally
across the table. Where the table is smaller than the image, the image
will be truncated.
Border
border="2"
The thickness of the table border can be expressed in pixels.
Border Color
bordercolor="red" or bordercolor="#ff0000"
The border color can be expressed as text or as a hexadecimal number.
Cell Padding
cellpadding="2"
Determines the shortest distance (in pixels) between the content of
a cell and the cell border.
Cell Spacing
cellspacing="2"
Determines the shortest distance between the cells in a table.
|
|
<tr> |
The start and finish
of a table is marked by the table row tag
<tr><!--
HTML elements --></tr>
The table row tag
can normally be used without parameters, the table appearance being
determined by the table and cell tags. The table row tag simply defines
a row of cells within a table.
|
|
<td> |
The start and finish
of a table cell is marked by the table data tag
<td><!--
HTML elements --></td>
The table data tag
can have a range of parameters which determine the appearance of the
cell:
Align
align="left" {or right, center}
For example:
<td align="center"><!--
HTML elements --></td>
This determines the horizontal alignment of the cell content within
the cell.
Vertical Align
valign="top" {or middle, bottom}
For example:
<td valign="top"><!--
HTML elements --></td>
This determines the vertical alignment of the cell content within the
cell.
Width
width="200" or width="50%"
The width of the cell can be expressed in pixels or as a percentage
of the table.Note that the width of a cell cannot normally conflict
with the width of a cell below it in a column. The results will be unpredictable
across different browsers.
Height
height="200" or height="50%"
The height of the table cell can be expressed in pixels or as a percentage
of the table.
Background Color
bgcolor="red" or bgcolor="#ff0000"
The background color of the table cell can be expressed as text or as
a hexadecimal number.
Background Image
background="images/logosample.gif"
A background image can be provided for the table cell. This will overwrite
a general table background image.
Border Color
bordercolor="red" or bordercolor="#ff0000"
The border color of a cell can be expressed as text or as a hexadecimal
number.
|
|
Sample
Table |
The following sample
shows a range of code elements used to create a table.
<table align="center"
width="400" height="100" bgcolor="green"
background="htmlimages/bullet.gif" border="2" bordercolor="red"
cellpadding="3" cellspacing="2">
<tr>
<td align="left" width="50" height="60">Cell
1</td>
<td align="center" width="150" height="60">Cell
2 </td>
<td align="right" width="100" height="60">Cell
3 </td>
<tr>
<tr>
<td align="left" width="50" height="40"
background="htmlImages/logosample.gif" >Cell 4</td>
<td align="center" width="150" height="40"
bgcolor="#999900" >Cell 5</td>
<td align="right" width="100" height="40"
bordercolor="0000cc">Cell 6</td>
<tr>
</table>
creates the following
table...
| Cell 1 |
Cell 2 |
Cell 3 |
| Cell
4 |
Cell
5 |
Cell
6 |
|
|
Points
to Note |
