HTML and CSS Reference
In-Depth Information
Table Striping
In the effort to make tables more legible, one common design practice is to “stripe” table
rows with alternating background colors. This makes the rows clearer and provides a visual
cue for scanning information. One way to do this is to place a class on every other <tr>
element and set a background color to that class. Another, easier way is to use the :nth-
child pseudo-class selector with an even or odd argument to select every other <tr>
Here, our table of books uses the :nth-child pseudo-class selector with an even argu-
ment to select all even table rows within the table and apply a gray background . Conse-
quently, every other row within the table body is gray (see Figure 11.9 ).
Click here to view code image
1. table {
2. border-collapse: separate;
3. border-spacing: 0;
4. }
5. th,
6. td {
7. padding: 10px 15px;
8. }
9. thead {
10. background: #395870;
11. color: #fff;
12. }
13. tbody tr:nth-child(even) {
14. background: #f0f0f2;
15. }
16. td {
17. border-bottom: 1px solid #c6c7cc;
18. border-right: 1px solid #c6c7cc;
19. }
20. td:first-child {
21. border-left: 1px solid #c6c7cc;
22. }
Search WWH ::

Custom Search