Changing the Border

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.

Figure 56.6 shows a table with these properties. The border around the outside of the table appears at a thickness of 5 pixels. The interior borders or rules retain their normal thickness but borrow the table border's color.

Figure 56.6. This table has a five-pixel, black (#000000) border.

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.

Figure 56.7. Set the rules attribute of the table tag to determine how the browser draws rules. Here, the value of the rules attribute is cols.

Table 56.2. 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

TIP

Table 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.

Figure 56.8. Use CSS to change the style of the border.

Table 56.3. Common CSS 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 Figure 56.9:

[View full width]
 <table border="5" bordercolor="#000000" rules="groups" style="border-top-style: dashed;  border-bottom-style: dotted; border-left-style: double; border-right-style: none;"> 

Figure 56.9. With CSS, the top, right, bottom, and left borders may all have different styles.

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.

Table 56.4. Common CSS Border Attributes^[*]

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;
border-top-color	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.