By default, table borders look like this:
| Note that no |
cellspacing or cellpadding |
has been applied. |
| cellspacing |
controls |
the gaps a bit |
but the border has |
a beveled |
appearance |
by default |
You can fake a coloured border
| You |
can |
fake a |
coloured |
border |
by adding |
it as a |
background |
to the |
table |
| Then making the cells inside the table white with a bgcolor attribute |
This is, by far, the most compatable method of adding coloured borders to a table. |
| cellpadding |
give the text |
some space |
to breath |
| And, of course, |
you can make your table |
a garish |
nightmare |
| by recolouring |
each cell |
a different |
colour. |
A hr element can be used to divide up the page. It doesn't seem to take colours from font tags:
However, this was not the intended method of adding coloured borders to tables. Instead, the frame and rules attributes can be used to add a variety of coloured borders to tables.
Unfortunately, support for these techniques is patchy at best. Some browsers ignore the bordercolor attribute, but render the borders correctly, other browsers respect the bordercolor attribute, but ignore the frame and rules attributes. If you absolutely had to use this technique, define the colour of the border twice, one with a font tag wrapped around the whole table and a second time with a bordercolor attribute directly on the table itself.
no frame or rules attributes
| Table head |
Table header |
Nunc tincidunt gravida |
Ut finibus id |
| Table body table header |
0.25 |
0.66 |
1.25 |
| Donec ac blandit dui |
0.01 |
0.22 |
1.11 |
| Quisque varius |
0.58 |
2.88 |
5.78 |
| Table foot table header |
0.84 |
3.76 |
8.14 |
The frame attribute has the following values:
void (none - default)
above
below
hsides
vsides
lhs
rhs
box
border
Frame void
| Table head |
Table header |
Nunc tincidunt gravida |
Ut finibus id |
| Table body table header |
0.25 |
0.66 |
1.25 |
| Donec ac blandit dui |
0.01 |
0.22 |
1.11 |
| Quisque varius |
0.58 |
2.88 |
5.78 |
| Table foot table header |
0.84 |
3.76 |
8.14 |
Frame above
| Table head |
Table header |
Nunc tincidunt gravida |
Ut finibus id |
| Table body table header |
0.25 |
0.66 |
1.25 |
| Donec ac blandit dui |
0.01 |
0.22 |
1.11 |
| Quisque varius |
0.58 |
2.88 |
5.78 |
| Table foot table header |
0.84 |
3.76 |
8.14 |
Frame below
| Table head |
Table header |
Nunc tincidunt gravida |
Ut finibus id |
| Table body table header |
0.25 |
0.66 |
1.25 |
| Donec ac blandit dui |
0.01 |
0.22 |
1.11 |
| Quisque varius |
0.58 |
2.88 |
5.78 |
| Table foot table header |
0.84 |
3.76 |
8.14 |
Frame hsides
| Table head |
Table header |
Nunc tincidunt gravida |
Ut finibus id |
| Table body table header |
0.25 |
0.66 |
1.25 |
| Donec ac blandit dui |
0.01 |
0.22 |
1.11 |
| Quisque varius |
0.58 |
2.88 |
5.78 |
| Table foot table header |
0.84 |
3.76 |
8.14 |
Frame vsides
| Table head |
Table header |
Nunc tincidunt gravida |
Ut finibus id |
| Table body table header |
0.25 |
0.66 |
1.25 |
| Donec ac blandit dui |
0.01 |
0.22 |
1.11 |
| Quisque varius |
0.58 |
2.88 |
5.78 |
| Table foot table header |
0.84 |
3.76 |
8.14 |
Frame lhs
| Table head |
Table header |
Nunc tincidunt gravida |
Ut finibus id |
| Table body table header |
0.25 |
0.66 |
1.25 |
| Donec ac blandit dui |
0.01 |
0.22 |
1.11 |
| Quisque varius |
0.58 |
2.88 |
5.78 |
| Table foot table header |
0.84 |
3.76 |
8.14 |
Frame rhs
| Table head |
Table header |
Nunc tincidunt gravida |
Ut finibus id |
| Table body table header |
0.25 |
0.66 |
1.25 |
| Donec ac blandit dui |
0.01 |
0.22 |
1.11 |
| Quisque varius |
0.58 |
2.88 |
5.78 |
| Table foot table header |
0.84 |
3.76 |
8.14 |
Frame box
| Table head |
Table header |
Nunc tincidunt gravida |
Ut finibus id |
| Table body table header |
0.25 |
0.66 |
1.25 |
| Donec ac blandit dui |
0.01 |
0.22 |
1.11 |
| Quisque varius |
0.58 |
2.88 |
5.78 |
| Table foot table header |
0.84 |
3.76 |
8.14 |
Frame border
| Table head |
Table header |
Nunc tincidunt gravida |
Ut finibus id |
| Table body table header |
0.25 |
0.66 |
1.25 |
| Donec ac blandit dui |
0.01 |
0.22 |
1.11 |
| Quisque varius |
0.58 |
2.88 |
5.78 |
| Table foot table header |
0.84 |
3.76 |
8.14 |
The rules attribute has the following values:
none (default)
groups (for example thead or tbody)
rows
cols
all
Rules none
| Table head |
Table header |
Nunc tincidunt gravida |
Ut finibus id |
| Table body table header |
0.25 |
0.66 |
1.25 |
| Donec ac blandit dui |
0.01 |
0.22 |
1.11 |
| Quisque varius |
0.58 |
2.88 |
5.78 |
| Table foot table header |
0.84 |
3.76 |
8.14 |
Rules groups
| Table head |
Table header |
Nunc tincidunt gravida |
Ut finibus id |
| Table body table header |
0.25 |
0.66 |
1.25 |
| Donec ac blandit dui |
0.01 |
0.22 |
1.11 |
| Quisque varius |
0.58 |
2.88 |
5.78 |
| Table foot table header |
0.84 |
3.76 |
8.14 |
Rules rows
| Table head |
Table header |
Nunc tincidunt gravida |
Ut finibus id |
| Table body table header |
0.25 |
0.66 |
1.25 |
| Donec ac blandit dui |
0.01 |
0.22 |
1.11 |
| Quisque varius |
0.58 |
2.88 |
5.78 |
| Table foot table header |
0.84 |
3.76 |
8.14 |
Rules cols
| Table head |
Table header |
Nunc tincidunt gravida |
Ut finibus id |
| Table body table header |
0.25 |
0.66 |
1.25 |
| Donec ac blandit dui |
0.01 |
0.22 |
1.11 |
| Quisque varius |
0.58 |
2.88 |
5.78 |
| Table foot table header |
0.84 |
3.76 |
8.14 |
Rules all
| Table head |
Table header |
Nunc tincidunt gravida |
Ut finibus id |
| Table body table header |
0.25 |
0.66 |
1.25 |
| Donec ac blandit dui |
0.01 |
0.22 |
1.11 |
| Quisque varius |
0.58 |
2.88 |
5.78 |
| Table foot table header |
0.84 |
3.76 |
8.14 |