HTML and CSS Reference
In-Depth Information
Table Borders
Effective use of borders can help make tables more comprehensible. Borders around a table
or individual cells can make a large impact when a user is trying to interpret data and
quickly scan for information. When styling table borders with CSS there are two properties
that will quickly come in handy:
border-collapse
and
border-spacing
.
Border Collapse Property
Tables consist of a parent
<table>
element as well as nested
<th>
or
<td>
elements.
When we apply borders around these elements those borders will begin to stack up, with
the border of one element sitting next to that of another element. For example, if we put
a
2
-pixel border around an entire table and then an additional
2
-pixel border around each
table cell, there would be a
4
-pixel border around every cell in the table.
The
border-collapse
property determines a table's border model. There are three val-
ues for the
border-collapse
property:
collapse
,
separate
, and
inherit
. By
default, the
border-collapse
property value is
separate
, meaning that all of the
different borders will stack up next to one another, as described above. The
collapse
property, on the other hand, condenses the borders into one, choosing the table cell as the
primary border (see
Figure 11.6
).
1.
table {
2.
border-collapse: collapse;
3.
}
4.
th,
5.
td {
6.
border: 1px solid #c6c7cc;
7.
padding: 10px 15px;
8.
}
Search WWH ::
Custom Search