Adding a Border

A border helps distinguish your table from the rest of the page. However, if you're laying out your page with tables, you may not want to call so much attention to the border.

Tips

The CSS border property is discussed in detail (and there are a lot of details) on page 184. This page focuses on how the border property interacts with the (nondeprecated) (X)HTML border attribute.
The border attribute applies to both the table and the cells it contains. The CSS border property, in contrast, is not inherited. So, if you omit the (X)HTML border attribute but apply a CSS border to the table, the cells will have no borders. Conversely, if you use the border attribute but use table {border: none}, the cells will have borders, but the table won't.
If you use the (X)HTML border attribute with no value (border alone, or border='border' to be XHTML compliant) and no CSS border, you get a black 1 pixel outset border, by default.
The default CSS border style is none. So border: 2px red actually means border: 2px none red and will result in no border at all! The CSS border property overrides the (X)HTML's border attribute (except in IE, see below).

Figure 16.10. This page is the result of the (X)HTML shown in Figure 16.7 and the CSS in Figure 16.9. Because we've applied the CSS border property only to the table element, the borders around cells are not affected at all.
The default CSS border width is medium, which Firefox and Opera interpret as 3 pixels, and IE interprets as 4 pixels. So border:red groove also implies a width of medium. The CSS border property overrides the (X)HTML border attribute (except in IE, see below).

Figure 16.11. This page uses the same CSS as the previous illustration (Figure 16.10), but no border attribute in the (X)HTML. Notice that there are no borders around the cells.
IE (up to and including 7) gets a number of things wrong about borders in tables. First, it cannot display very dark two-tone border styles, like groove, ridge, inset, and outset and displays them solidly. Second, it does not let the default values for the shortcut border property override the (X)HTML border attribute, as it should. So, if you use the (X)HTML border and CSS border:red, IE gives you a 1 pixel border instead of a medium one, which is implied with border:red. If you set the border-style or border-width properties explicitly: border-width:2px, then Internet Explorer properly lets the value override the (X)HTML border attribute.

Figure 16.12. Here is the CSS that we'll use with respect to borders in the rest of our example. So there!
A border's default color is the color of the element itself (as specified with the CSS color property). Only IE for Mac and Firefox get that right.
Tables naturally expand to the edge of the elements they contain or to the edge of the browser window, whichever comes first. That's sometimes hard to see unless you view the border.
You can create a border while you're constructing your table and then banish it once you have everything in place.

Adding a Border

Figure 16.7. In this example, we set a 10 pixel wide border for the outside of the table. When you set the `border` attribute, regardless of its value, the cell borders are always 1 pixel wide.

Figure 16.9. You can specify the width, color, and style with the single shortcut `border` property.

Figure 16.10. This page is the result of the (X)HTML shown in Figure 16.7 and the CSS in Figure 16.9. Because we've applied the CSS `border` property only to the `table` element, the borders around cells are not affected at all.

Figure 16.11. This page uses the same CSS as the previous illustration (Figure 16.10), but no `border` attribute in the (X)HTML. Notice that there are no borders around the cells.

Figure 16.12. Here is the CSS that we'll use with respect to borders in the rest of our example. So there!

Adding a Border

Figure 16.7. In this example, we set a 10 pixel wide border for the outside of the table. When you set the border attribute, regardless of its value, the cell borders are always 1 pixel wide.

Figure 16.9. You can specify the width, color, and style with the single shortcut border property.

Figure 16.10. This page is the result of the (X)HTML shown in Figure 16.7 and the CSS in Figure 16.9. Because we've applied the CSS border property only to the table element, the borders around cells are not affected at all.

Figure 16.11. This page uses the same CSS as the previous illustration (Figure 16.10), but no border attribute in the (X)HTML. Notice that there are no borders around the cells.

Figure 16.12. Here is the CSS that we'll use with respect to borders in the rest of our example. So there!

Figure 16.7. In this example, we set a 10 pixel wide border for the outside of the table. When you set the `border` attribute, regardless of its value, the cell borders are always 1 pixel wide.

Figure 16.9. You can specify the width, color, and style with the single shortcut `border` property.

Figure 16.10. This page is the result of the (X)HTML shown in Figure 16.7 and the CSS in Figure 16.9. Because we've applied the CSS `border` property only to the `table` element, the borders around cells are not affected at all.

Figure 16.11. This page uses the same CSS as the previous illustration (Figure 16.10), but no `border` attribute in the (X)HTML. Notice that there are no borders around the cells.