Tables
Use utility classes to punch up your tables.
Default
A table without classes.
Front-end web developer course 2021
Person |
Most interest in |
Age |
Chris |
HTML tables |
22 |
Dennis |
Web accessibility |
45 |
Sarah |
JavaScript frameworks |
29 |
Karen |
Web performance |
36 |
Average age |
33 |
Front-end web developer course 2021
Person |
Most interest in |
Age |
Chris |
HTML tables |
22 |
Dennis |
Web accessibility |
45 |
Sarah |
JavaScript frameworks |
29 |
Karen |
Web performance |
36 |
Average age |
33 |
<table>
<caption>
Front-end web developer course 2021
</caption>
<thead>
<tr>
<th scope="col">Person</th>
<th scope="col">Most interest in</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Chris</th>
<td>HTML tables</td>
<td>22</td>
</tr>
<tr>
<th scope="row">Dennis</th>
<td>Web accessibility</td>
<td>45</td>
</tr>
<tr>
<th scope="row">Sarah</th>
<td>JavaScript frameworks</td>
<td>29</td>
</tr>
<tr>
<th scope="row">Karen</th>
<td>Web performance</td>
<td>36</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row" colspan="2">Average age</th>
<td>33</td>
</tr>
</tfoot>
</table>
With inner-border
Add the ca-inner-border
class to add borders between rows.
Front-end web developer course 2021
Person |
Most interest in |
Age |
Chris |
HTML tables |
22 |
Dennis |
Web accessibility |
45 |
Sarah |
JavaScript frameworks |
29 |
Karen |
Web performance |
36 |
Average age |
33 |
Front-end web developer course 2021
Person |
Most interest in |
Age |
Chris |
HTML tables |
22 |
Dennis |
Web accessibility |
45 |
Sarah |
JavaScript frameworks |
29 |
Karen |
Web performance |
36 |
Average age |
33 |
<table class="ca-width-small ca-inner-border">
<caption>
Front-end web developer course 2021
</caption>
<thead>
<tr>
<th scope="col">Person</th>
<th scope="col">Most interest in</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Chris</th>
<td>HTML tables</td>
<td>22</td>
</tr>
<tr>
<th scope="row">Dennis</th>
<td>Web accessibility</td>
<td>45</td>
</tr>
<tr>
<th scope="row">Sarah</th>
<td>JavaScript frameworks</td>
<td>29</td>
</tr>
<tr>
<th scope="row">Karen</th>
<td>Web performance</td>
<td>36</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row" colspan="2">Average age</th>
<td>33</td>
</tr>
</tfoot>
</table>
With outer-border
Add the ca-outer-border
class to add an outside border to the table.
Front-end web developer course 2021
Person |
Most interest in |
Age |
Chris |
HTML tables |
22 |
Dennis |
Web accessibility |
45 |
Sarah |
JavaScript frameworks |
29 |
Karen |
Web performance |
36 |
Average age |
33 |
Front-end web developer course 2021
Person |
Most interest in |
Age |
Chris |
HTML tables |
22 |
Dennis |
Web accessibility |
45 |
Sarah |
JavaScript frameworks |
29 |
Karen |
Web performance |
36 |
Average age |
33 |
<table class="ca-width-small ca-outer-border ca-inner-border">
<caption>
Front-end web developer course 2021
</caption>
<thead>
<tr>
<th scope="col">Person</th>
<th scope="col">Most interest in</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Chris</th>
<td>HTML tables</td>
<td>22</td>
</tr>
<tr>
<th scope="row">Dennis</th>
<td>Web accessibility</td>
<td>45</td>
</tr>
<tr>
<th scope="row">Sarah</th>
<td>JavaScript frameworks</td>
<td>29</td>
</tr>
<tr>
<th scope="row">Karen</th>
<td>Web performance</td>
<td>36</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row" colspan="2">Average age</th>
<td>33</td>
</tr>
</tfoot>
</table>
With hover-rows
Add the ca-hover-rows
class to add highlight rows.
Front-end web developer course 2021
Person |
Most interest in |
Age |
Chris |
HTML tables |
22 |
Dennis |
Web accessibility |
45 |
Sarah |
JavaScript frameworks |
29 |
Karen |
Web performance |
36 |
Average age |
33 |
Front-end web developer course 2021
Person |
Most interest in |
Age |
Chris |
HTML tables |
22 |
Dennis |
Web accessibility |
45 |
Sarah |
JavaScript frameworks |
29 |
Karen |
Web performance |
36 |
Average age |
33 |
<table class="ca-width-small ca-outer-border ca-inner-border ca-hover-rows">
<caption>
Front-end web developer course 2021
</caption>
<thead>
<tr>
<th scope="col">Person</th>
<th scope="col">Most interest in</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Chris</th>
<td>HTML tables</td>
<td>22</td>
</tr>
<tr>
<th scope="row">Dennis</th>
<td>Web accessibility</td>
<td>45</td>
</tr>
<tr>
<th scope="row">Sarah</th>
<td>JavaScript frameworks</td>
<td>29</td>
</tr>
<tr>
<th scope="row">Karen</th>
<td>Web performance</td>
<td>36</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row" colspan="2">Average age</th>
<td>33</td>
</tr>
</tfoot>
</table>
With stripes
Add the ca-stripes
class to differentiate rows.
Front-end web developer course 2021
Person |
Most interest in |
Age |
Chris |
HTML tables |
22 |
Dennis |
Web accessibility |
45 |
Sarah |
JavaScript frameworks |
29 |
Karen |
Web performance |
36 |
Average age |
33 |
Front-end web developer course 2021
Person |
Most interest in |
Age |
Chris |
HTML tables |
22 |
Dennis |
Web accessibility |
45 |
Sarah |
JavaScript frameworks |
29 |
Karen |
Web performance |
36 |
Average age |
33 |
<table
class="ca-width-small ca-stripes ca-outer-border ca-inner-border ca-hover-rows"
>
<caption>
Front-end web developer course 2021
</caption>
<thead>
<tr>
<th scope="col">Person</th>
<th scope="col">Most interest in</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Chris</th>
<td>HTML tables</td>
<td>22</td>
</tr>
<tr>
<th scope="row">Dennis</th>
<td>Web accessibility</td>
<td>45</td>
</tr>
<tr>
<th scope="row">Sarah</th>
<td>JavaScript frameworks</td>
<td>29</td>
</tr>
<tr>
<th scope="row">Karen</th>
<td>Web performance</td>
<td>36</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row" colspan="2">Average age</th>
<td>33</td>
</tr>
</tfoot>
</table>