HTML and CSS Reference
In-Depth Information
<table style=”border: 1px solid red”>
<!— Table rows and cells go here. —>
</table>
To draw borders around all the cells in a table (the way the
border
attribute does), the
easiest way is to use a style sheet like this:
<style type=”text/css”>
table { border: 1px solid black; }
td, th { border: 1px solid black; }
</style>
If I applied that style sheet to the color table used in the previous example, it would
appear as it does in Figure 10.8.
FIGURE 10.8
A table with cell
borders applied
using CSS.
As you can see, there are gaps between the borders on each cell for this table. To fix this,
we need to use the CSS
border-collapse
property on the
table
element. It has two pos-
sible values,
separate
and
collapse
. The default is
separate
, it produces the result you
see in Figure 10.8. The style sheet that follows shows how to apply it:
<style type=”text/css”>
table {
border: 1px solid black;
border-collapse: collapse;
}
td, th {
border: 1px solid black;
}
</style>
Figure 10.9 shows the results.
