170
Creating Cool Web Sites with HTML, XHTML, and CSS
Table 8-3: Values for the <table rules= Attribute> Value
Result
none
Removes all interior table borders
groups
Displays horizontal borders between all table groups. Groups are specified by thead, tbody, tfoot, and colgroup elements.
rows
Displays horizontal borders between all table rows
cols
Displays vertical borders between all table columns
all
Displays a border on all rows and columns
The frame and rule attributes combine to give you a remarkable amount of control over the borders and edges in a Web table, but they’re pretty complex. I offer you one example and encourage you to tweak the source yourself to see how these attributes work in different combinations: <table border=”10” frame=”vsides” cellspacing=”0” rules=”rows” width=”50%”>
<tr align=”center”>
<td> January </td>
<td> $25,404,384.08 </td>
</tr> <tr align=”center”> <td> February </td> <td> $28,498,294.38 </td>
</tr>
<tr align=”center”>
<td> March </td> <td> $31,978,193.55 </td>
</tr>
<tr align=”center”>
<td> April </td> <td> $18,559,205.00 </td>
</tr>
</table>
Read through this code example closely (and remember that all the important work is being done in the table tag) and compare it to Figure 8-10 to see if this makes sense to you. Try opening the same example in Netscape or an older version of Internet Explorer—which doesn’t yet support these HTML 4.0 additions—and consider how different the table looks.
tip
Try taking out the cellspacing=”0” in the previous example, and notice the rule lines are broken with a very small invisible grid line or 3D bar (depends on which browser you’re using). Specify that there should be no spacing, and the problem goes away. This nuance of layout spacing is also true when you work with back ground colors in your data cells.