Tables are used to show data in columns and rows. They are only to be used for tabular data, but never for layout.
Add the .stack
class to stack tables on small screens.
<table role="grid" class="responsive">
<caption>If this table needs context, use this area.</caption>
<thead>
<tr>
<th scope="col">Star Trek series</th>
<th scope="col">Abbreviation</th>
<th scope="col">Years aired</th>
</tr>
</thead>
<tbody>
<tr>
<td>The Original Series</td>
<td><abbr title="The Original Series">TOS</abbr></td>
<td>1966 - 1969</td>
</tr>
<tr>
<td>The Next Generation</td>
<td><abbr title="The Next Generation">TNG</abbr></td>
<td>1987 - 1994</td>
</tr>
<tr>
<td>Deep Space Nine</td>
<td><abbr title="Deep Space Nine">DS9</abbr></td>
<td>1993 - 1999</td>
</tr>
<tr>
<td>Voyager</td>
<td><abbr title="Voyager">VOY</abbr></td>
<td>1995 - 2001</td>
</tr>
<tr>
<td>Enterprise</td>
<td><abbr title="Enterprise">ENT</abbr></td>
<td>2001 - 2005</td>
</tr>
<tr>
<td>Discovery</td>
<td><abbr title="Discovery">DSC</abbr></td>
<td>2017 - </td>
</tr>
</tbody>
</table>