Tables

• The border-collapse and caption-side properties are specific to the layout of tables

property	example	description
border-collapse	border-collapse: collapse;	specifies that table borders should collapse or not
caption-side	caption-side: bottom;	specifies the placement of the table caption

border-collapse

• Just like any other element, you can also supply a table (and its th or td cells) with a border (see the section on Borders)
• The border-collapse property specifies whether these table borders should collapse into a single border or not
  • Possible values: collapse, separate (= default, with white space between the borders)

table {
    border-collapse: collapse;
}

EMMET instruction	result
bdcl + TAB	border-collapse: ;
bdcl:c + TAB	border-collapse: collapse;

caption-side

• The caption-side property specifies the placement of the caption of a table
  • Possible values: bottom, top (= default)

caption {
    caption-side: bottom;
}

EMMET instruction	result
cps + TAB	caption-side: ;
cps:b + TAB	caption-side: bottom;

Advanced selectors for table layouts

• To layout a table, you could define some style rules for specific identifiers/classes and attach these identifiers/classes to
  • td/th elements (for individual styling at cell level)
  • tr elements (for horizontal, row-based styling)
  • col elements (for vertical, column-based styling)
• By using the :first-child, :nth-child() and :last-child pseudo-class selectors, we can easily attain similar horizontal/vertical styling without having to define additional identifiers/classes. As it turns out, we don't even need the col elements anymore.

  selector	selects ...
  tr:nth-child(2)	the second child (tr) of its parent (table) Note that the index of the first child equals 1!
  tr:nth-child(odd)	all odd childs (tr) of its parent (table)
  tr:first-child	the first child (tr) of its parent (table)
  td:nth-child(even)	all even childs (td) of its parent (tr) ~ all even columns of the table
  td:last-child	the last child (td) of its parent (tr) ~ the last column of the table

All-in-one example

         <h1>CSS3 - Tables: example</h1> <h2>Table with horizontal styling</h2> <table id="horizontal"> <caption>Outgoing travellers</caption> <tr> <th>Country</th> <th>Destination</th> <th>June</th> <th>July</th> <th>August</th> </tr> <tr> <th>France</th> <td>Paris</td> <td>150</td> <td>323</td> <td>401</td> </tr> <tr> <th>Great Britain</th> <td>London</td> <td>33</td> <td>167</td> <td>239</td> </tr> <tr> <th>Germany</th> <td>Berlin</td> <td>352</td> <td>1044</td> <td>541</td> </tr> <tr> <th>Europe</th> <td>Total</td> <td>686</td> <td>2110</td> <td>2059</td> </tr> </table>
 <h2>Table with vertical styling</h2> <table id="vertical"> <caption>Outgoing travellers</caption> <tr> <th>Country</th> <th>Destination</th> <th>June</th> <th>July</th> <th>August</th> </tr> <tr> <th>France</th> <td>Paris</td> <td>150</td> <td>323</td> <td>401</td> </tr> <tr> <th>Great Britain</th> <td>London</td> <td>33</td> <td>167</td> <td>239</td> </tr> <tr> <th>Germany</th> <td>Berlin</td> <td>352</td> <td>1044</td> <td>541</td> </tr> <tr> <th>Europe</th> <td>Total</td> <td>686</td> <td>2110</td> <td>2059</td> </tr> </table> 
    

         table { border-collapse: collapse; }
 caption{ caption-side: bottom; }
 table, td, th { border: 1px solid #00283C; }
 #horizontal tr:nth-child(odd) { background-color: #eee; color: #00283C; }
 /*overrule previous style rule for first row*/ #horizontal tr:first-child { background-color: #00283C; color: #fff; }
 #vertical td:nth-child(odd), #vertical th:nth-child(odd) { background-color: #eee; color: #00283C; }
 /*overrule previous style rule for first column*/ #vertical th:first-child { background-color: #00283C; color: #fff; }