Code Club Style Guide

Tables

Default Table Styles

If you need a regular table for inclusion in your site's regular body copy, then use the <table> element and its relevant child elements without any extra HTML classes.

The following table implmentations are only to be used in cases where your data requires these particular styles.


Grid Table

Example
Rock Band Lost in Space Ghostbusters ChatBot Paint Box Boat Race
Sequencing
Repetition
Variables
<table class="c-grid-table">
<thead class="c-grid-table__head">
<tr class="c-grid-table__head-row">
<th class="c-grid-table__col-heading"></th>
<th class="c-grid-table__col-heading">Rock Band</th>
<th class="c-grid-table__col-heading">Lost in Space</th>
<th class="c-grid-table__col-heading">Ghostbusters</th>
<th class="c-grid-table__col-heading">ChatBot</th>
<th class="c-grid-table__col-heading">Paint Box</th>
<th class="c-grid-table__col-heading">Boat Race</th>
</tr>
</thead>
<tbody class="c-grid-table__body">
<tr class="c-grid-table__body-row">
<th class="c-grid-table__row-heading" scope="row">Sequencing</th>
<td class="c-grid-table__cell"><span class="c-icon c-icon--small c-icon--tick"></span></td>
<td class="c-grid-table__cell"><span class="c-icon c-icon--small c-icon--tick"></span></td>
<td class="c-grid-table__cell"><span class="c-icon c-icon--small c-icon--tick"></span></td>
<td class="c-grid-table__cell"><span class="c-icon c-icon--small c-icon--tick"></span></td>
<td class="c-grid-table__cell"><span class="c-icon c-icon--small c-icon--tick"></span></td>
<td class="c-grid-table__cell"><span class="c-icon c-icon--small c-icon--tick"></span></td>
</tr>
<tr class="c-grid-table__body-row">
<th class="c-grid-table__row-heading" scope="row">Repetition</th>
<td class="c-grid-table__cell"></td>
<td class="c-grid-table__cell"><span class="c-icon c-icon--small c-icon--tick"></span></td>
<td class="c-grid-table__cell"><span class="c-icon c-icon--small c-icon--tick"></span></td>
<td class="c-grid-table__cell"><span class="c-icon c-icon--small c-icon--tick"></span></td>
<td class="c-grid-table__cell"><span class="c-icon c-icon--small c-icon--tick"></span></td>
<td class="c-grid-table__cell"><span class="c-icon c-icon--small c-icon--tick"></span></td>
</tr>
<tr class="c-grid-table__body-row">
<th class="c-grid-table__row-heading" scope="row">Variables</th>
<td class="c-grid-table__cell"></td>
<td class="c-grid-table__cell"></td>
<td class="c-grid-table__cell"><span class="c-icon c-icon--small c-icon--tick"></span></td>
<td class="c-grid-table__cell"><span class="c-icon c-icon--small c-icon--tick"></span></td>
<td class="c-grid-table__cell"><span class="c-icon c-icon--small c-icon--tick"></span></td>
<td class="c-grid-table__cell"><span class="c-icon c-icon--small c-icon--tick"></span></td>
</tr>
</tbody>
</table>

Listings Table

Example
St Mary's Catholic Primary School 0.4 miles away Contact Club Host
Sherwood Library 0.8 miles away Contact Club Host
Hyson Green Primary School 1 mile away Contact Club Host
Westdale Infant School 1.2 miles away Contact Club Host
<table class="c-strip-table">
<tbody class="c-strip-table__body">
<tr class="c-strip-table__row">
<th class="c-strip-table__heading">St Mary's Catholic Primary School</th>
<td class="c-strip-table__cell"><span class="meta">0.4 miles away</span></td>
<td class="c-strip-table__cell"><a href="#">Contact Club Host</a></td>
</tr>
<tr class="c-strip-table__row">
<th class="c-strip-table__heading">Sherwood Library</th>
<td class="c-strip-table__cell"><span class="meta">0.8 miles away</span></td>
<td class="c-strip-table__cell"><a href="#">Contact Club Host</a></td>
</tr>
<tr class="c-strip-table__row">
<th class="c-strip-table__heading">Hyson Green Primary School</th>
<td class="c-strip-table__cell"><span class="meta">1 mile away</span></td>
<td class="c-strip-table__cell"><a href="#">Contact Club Host</a></td>
</tr>
<tr class="c-strip-table__row">
<th class="c-strip-table__heading">Westdale Infant School</th>
<td class="c-strip-table__cell"><span class="meta">1.2 miles away</span></td>
<td class="c-strip-table__cell"><a href="#">Contact Club Host</a></td>
</tr>
</tbody>
</table>