# 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;
}

1
2
3

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;
}

1
2
3

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;
}