Hardly anyone uses table borders in layout tables, but just about everyone uses table borders in data tables. The table's border attribute controls the thickness of the border, and the bordercolor attribute determines the color:
<table border="5" bordercolor="#000000">
GEEKSPEAK
Rules are the interior borders of a table. They retain their standard thickness, no matter the value in the border attribute, but they appear in the table border's color. |
rules retain their normal thickness but borrow the table border's color.
You can change the way the browser draws rules in the table by setting the table's rules attribute, like this:
<table border="5" bordercolor="#000000" rules="cols">
By setting the rules attribute to cols, the browser draws rules around the columns only, as you can see in Figure 56.7. Table 56.2 summarizes the possible values of the rules attribute.
VALUE | DRAWS RULES AROUND |
|---|---|
all | All table cells |
cols | Columns only |
rows | Rows only |
groups | Groups only: col, colgroup, thead, tfoot, and tbody |
none | Nothing; no rules drawn |
TIPTable borders in Netscape appear with a 3D shading effect. In IE, table borders are solid. |
With CSS, you can change the style of the border:
<table border="5" bordercolor="#000000" rules="groups" style="border-style: dotted;">
Figure 56.8 shows how the dotted border style looks in a browser. See Table 56.3 for more border styles.
STYLE | APPEARANCE |
|---|---|
solid | An unbroken, solid border |
dashed | Dashed lines |
dotted | Dotted lines |
double | A pair of solid borders |
none | No border |
[*] CSS defines many other border styles, but not all browsers support them.
You can set the borders of different sides of the table to different values, as in [View full width]
<table border="5" bordercolor="#000000" rules="groups" style="border-top-style: dashed;
In fact, with CSS, you can set the border thickness and border color independently for all four sides. Table 56.4 runs down the list of common CSS border attributes at your disposal.
ATTRIBUTE | CONTROLS | EXAMPLE |
|---|---|---|
border-color | The color of all four sides of the border | border-color: #FF0000; |
border-style | The style of all four sides of the border | border-style: dotted; |
border-width | The weight or thickness of all four sides of the border | border-width: 10px; |
border-bottom-color | The color of the bottom border | border-bottom-color: #00FF00; |
border-bottom-style | The style of the bottom border | border-bottom-style: none; |
border-bottom-width | The weight or thickness of the bottom border | border-bottom-width: 8px; |
border-left-color | The color of the left border | border-left-color: #0000FF; |
border-left-style | The style of the left border | border-left-style: solid; |
border-left-width | The weight or thickness of the left border | border-left-width: 5px; |
border-right-color | The color of the right border | border-right-color: #FFFF00; |
border-right-style | The style of the right border | border-right-style: dashed; |
border-right-width | The weight or thickness of the right border | border-right-width: 4px; |
The color of the top border | border-top-color: #FFFFFF; | |
border-top-style | The style of the top border | border-top-style: double; |
border-top-width | The weight or thickness of the top border | border-top-width: 6px; |
[*] CSS defines other border attributes, but not all browsers support them.