Tables
We use different types of tables to display complex information in a format that can be easily scanned by a site visitor.
Variable column table
The variable column table allows for anywhere from two to four columns of information that break down as stacked responsive content.
Example & Code
Lorem | Ipsum | Dolor | Consectetur |
---|---|---|---|
amet |
elit |
risus |
nunc |
ligula |
sodales |
quis |
urna |
vitae |
varius |
gravida |
orci |
ac |
sit |
eu |
ac |
<div>
<table class="content-table">
<caption class="table-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</caption>
<thead>
<tr>
<th scope="col">Lorem</th>
<th scope="col">Ipsum</th>
<th scope="col">Dolor</th>
<th scope="col">Consectetur</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="Lorem">
<p>amet</p>
</td>
<td data-th="Ipsum">
<p>elit</p>
</td>
<td data-th="Dolor">
<p>risus</p>
</td>
<td data-th="Consectetur">
<p>nunc</p>
</td>
</tr>
<tr>
<td data-th="Lorem">
<p>ligula</p>
</td>
<td data-th="Ipsum">
<p>sodales</p>
</td>
<td data-th="Dolor">
<p>quis</p>
</td>
<td data-th="Consectetur">
<p>urna</p>
</td>
</tr>
<tr>
<td data-th="Lorem">
<p>vitae</p>
</td>
<td data-th="Ipsum">
<p>varius</p>
</td>
<td data-th="Dolor">
<p>gravida</p>
</td>
<td data-th="Consectetur">
<p>orci</p>
</td>
</tr>
<tr>
<td data-th="Lorem">
<p>ac</p>
</td>
<td data-th="Ipsum">
<p>sit</p>
</td>
<td data-th="Dolor">
<p>eu</p>
</td>
<td data-th="Consectetur">
<p>ac</p>
</td>
</tr>
</tbody>
</table>
</div>