Tables
tables are used on websites for two major purposes:
BASIC TABLES:
Tables are defined using the <table>-tag. To insert a table on your
page you simply add these tags where you want the table to occur:
<table>
</table>
The above table would be of no use since it has no rows and no columns.
To add a line to your table you will use the <tr> and </tr>-tags:
| This is row one |
| This is row two |
<table>
<tr>This is row one</tr>
<tr>This is row two</tr>
</table>
Furthermore you can divide rows using the <td> and </td>-tags:
| This is row one, left side |
This is row one, right side |
| This is row two, left side |
This is row two, right side |
<table>
<tr> <td>This
is row one, left side</td> <td>This is row one, right side</td> </tr>
<tr> <td>This
is row two, left side</td> <td>This is row two, right side</td> </tr>
</table>
PROPERTIES FOR THE TABLE:
The following properties can be added to the <table>-tag:
Note: Table-properties are set for the entire table. If certain properties are set
for single cells, they will have higher priority than the settings for the table as a
whole.
| Property |
Description |
Example |
align=
left
right |
aligns the table to the left
aligns the table to the right |
<table align=left>
<table align=right> |
| background=filename |
image inserted behind the table |
<table background="rainbow.gif"> |
| bgcolor=#rrggbb |
backgroundcolor for the table |
<table bgcolor=#FF0000> |
| border=n |
pixel-thickness of the border |
<table border=5> |
| bordercolor=#rrggbb |
color of the border |
<table bordercolor=#FF0000> |
| bordercolordark=#rrggbb |
color of the bordershadow |
<table bordercolordark=#FF00AC> |
| cellpadding=n |
distance in pixels between cells |
<table cellpadding=8> |
| cellspacing=n |
distance between cell and content |
<table cellspacing=6> |
| nowrap |
protects agains linebreaks, even though the content
of a table might be wider than the browserwindow. |
<table nowrap> |
frame=
void,
above,
lhs,
rhs,
below,
hsides,
vsides,
box |
removes all outer borders
shows border on top of table
shows border on bottom of table
shows border on left side of table
shows border on right side of table
shows border on both horizontal sides
shows border on both vertical sides
shows border on all sides of table |
<table frame=void>
<table frame=above>
<table frame=lhs>
<table frame=rhs>
<table frame=below>
<table frame=hsides>
<table frame=vsides>
<table frame=box> |
valign=
top
bottom |
aligns content to top of cells
aligns content to bottom of cells |
<table valign=top>
<table valign=bottom> |
Width=
n,n
n,n% |
minimum width of table in pixels
minimum width in percentage of window-size |
<table width=170,40>
<table width=90%, 50%> |
PROPERTIES FOR CELLS:
The following settings can be added to both <tr>- and <td>-tags.
Note: Settings for cells has higher priority than settings for the table as a
whole(<table>-tag).
Settings for columns(<td>-tag)
has higher priorities than settings for rows (<tr>-tag).
For simplicity in the examples settings
are made for either the <tr> or <td>-tag - not both.
| property |
description |
example |
align=
left
right
center |
aligns content to the left of cells
aligns content to the right of cells
aligns content to the center of the cells |
<tr align=left>
<tr align=right>
<tr align=center> |
| background=filename |
sets a backgroundimage for the cells |
<tr background="rainbow.gif"> |
| bgcolor=#rrggbb |
sets a backgroundcolor for the cells |
<tr bgcolor=#FF0000> |
| bordercolor=#rrggbb |
sets color for the border of cells |
<tr bordercolor=#FF00AC> |
| bordercolordark=#rrggbb |
sets color for the bordershadow of cells |
<tr bordercolordark=#00AC19> |
valign=
top
middle
bottom |
aligns to the top of cells
aligns to the middle of the cells
aligns to the bottom of cells |
<tr valign=top>
<tr valign=middle>
<tr valign=bottom> |
width=
n
n% |
specify a minimum width for the cells in pixels
specify a minimum width in percent of the table-width |
<td width=60>
<td width=33%> |
height=
n
n% |
minimum height of cells in pixels
minimum-height of cells in percentage of table-height |
<td height=15>
<td height=20%> |
| NOTE: The following settings are only available for columns
(<td>-tags) |
| colspan=n |
number of columns a cell should span |
<td rowspan=6> |
| nowrap |
protects agains linebreaks, even though the content
of a cell might be wider than the browserwindow. |
<td nowrap> |
| rowspan=n |
number of rows a cell should span |
<td rowspan=12> |
AN EXAMPLE: BUILDING A COMPLEX TABLE:
Coming soon. |
|
