HTML and CSS Reference
In-Depth Information
Setting the border attribute to 1 puts a 1px border around the whole table and each individual cell,
producing the effect of a raised double border around each cell. Because there's no width , cellspacing ,
or cellpadding , the table collapses around the content, as shown in Figure 14-1 .
Figure 14-1. A basic table with border
This minimalist layout not only looks ugly; it's difficult to read if there are more than a handful of data cells.
However, CSS gives you greater control over horizontal and vertical spacing than cellpadding and cellspacing .
It also offers better options for controlling the borders of table elements, so it's usually advisable to omit the
border attribute from the opening <table> tag.
First, though, let's continue exploring how tables are structured and laid out.
Header Cells
In addition to <td> tags, you can use <th> tags to indicate that a cell is a row or column header. The table in
header_cells.html contains <th> tags in the first row and in the first cell of each subsequent row. By default,
browsers center the text in <th> tags and display it in a bold font, as shown in Figure 14-2 .
Figure 14-2. Text in header cells is normally bold and centered
Table Captions
The <caption> tag displays a caption for the table. The tag must come immediately after the opening <table> tag
like this (the code is in caption.html):
<caption>Regional Sales Results</caption>
By default, browsers display the caption above the table, as in Figure 14-3 , but you can use the CSS
caption-side property to move it under the table, as described later in this chapter.
Search WWH ::

Custom Search