HTML Tables - Introduction
Description
HTML Tables are used for a couple of reasons:
a) to organise and layout sections of pages or whole pages.
b) to display tabular lists.
Note: it is now considered a bit old hat to use tables for layout purposes instead look to css and div tags.
Examples
A table has three main tags,
- <table> - this element marks the start and end of the table
- <tr> - this element marks the start and end of a table row and always appears within a table element
- <td> - this element marks the start and end of a table column and always appears within a table row element
An example table:
<table border="1">
<tr>
<td>row 1 column 1</td>
<td>row 1 colum 2</td>
</tr>
<tr>
<td>row 2 column 1</td>
<td>row 2 colum 2</td>
</tr>
</table>Give it a go!
This code displays like this:
| row 1 column 1 | row 1 column 2 |
| row 2 column 1 | row 2 column 2 |
Attributes of <table>
| align |
left|center|right |
align the table within the page or flow of text. The default is left. The flow of text will flow right of the table if this value is left |
| valign |
top|middle|bottom|baseline |
specifies the vertical alignment of the cells content within the row. |
| height |
number
% e.g. 50% |
Specifies the height of the table. |
| width |
number
% e.g. 50% |
Specifies the width of the table. |
| background |
url |
A url of an image to use as the background. The image is tiled if it is smaller than the table. |
| bgcolor |
#rrggbb or color name |
specifies the background color of the table. This value can be overridden by the bgcolor of the table row <tr> element. |
| border |
number |
size in pixels of the border. If this value is set to 0 then the border will not appear. The default is 1 |
| bordercolor |
#rrggbb or color name |
specifies the background color of the border. This overrides the bgcolor of the table element. |
| cellpadding |
number |
size in pixels of the space between the content and the cell border. Default is 1 |
| cellspacing |
number |
size in pixels of the space between cells. Default is 2 |
| frame |
void
above
below
hsides
lhs
rhs
vsides
box
border |
Specifies which table borders to draw the border. Void is default |
| rules |
none
groups
rows
cols
all |
Specifies where to draw rules. None is the default value unless border is set to 1 or greater then the default is all. |
| hspace |
number |
the size in pixels of the space between the table and any page element to the left or right of the table. |
| vspace |
number |
the size in pixels of the space between the table and any page element to the top or bottom of the table. |