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 ).
Click here to view code image
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