Tablas de datos. Usa el bloque BEM .cl-table del Kit Digital.
Básica
<div class="cl-table">
<div class="cl-table__scroll">
<table class="cl-table__table">
<thead>
<tr class="cl-table__row">
<th class="cl-table__header" scope="col">Header</th>
<th class="cl-table__header" scope="col">Header</th>
<th class="cl-table__header" scope="col">Header</th>
</tr>
</thead>
<tbody>
<tr class="cl-table__row">
<td class="cl-table__cell">Dato</td>
<td class="cl-table__cell">Dato</td>
<td class="cl-table__cell">Dato</td>
</tr>
</tbody>
</table>
</div>
</div>
Seleccionable
<div class="cl-table">
<div class="cl-table__scroll">
<table class="cl-table__table">
<thead>
<tr class="cl-table__row">
<th class="cl-table__header cl-table__select" scope="col">
<span class="cl-visually-hidden">Seleccionar</span>
</th>
<th class="cl-table__header" scope="col">Header</th>
<th class="cl-table__header" scope="col">Header</th>
</tr>
</thead>
<tbody>
<tr class="cl-table__row" aria-selected="true">
<td class="cl-table__cell cl-table__select">
<label class="cl-checkbox">
<input class="cl-checkbox__input" type="checkbox" checked />
<span class="cl-checkbox__control" aria-hidden="true"></span>
<span class="cl-checkbox__text">Seleccionar fila</span>
</label>
</td>
<td class="cl-table__cell">Dato</td>
<td class="cl-table__cell">Dato</td>
</tr>
</tbody>
</table>
</div>
</div>
Con pie
<div class="cl-table">
<div class="cl-table__scroll">
<table class="cl-table__table">
<tbody>
<tr class="cl-table__row">
<th class="cl-table__header" scope="row">Nombre</th>
<td class="cl-table__cell">María González</td>
</tr>
</tbody>
</table>
</div>
<div class="cl-table__footer">
<p class="cl-table__count">Mostrando <strong>1 - 6</strong> de 18</p>
</div>
</div>