Tables

Tables look like...

 <table>             - Has a table class
     <thead>         - Has a table__header class
         <tr>        - Has a table__row class
             <th>    - Has a table_cell class
     <tbody>
         <tr>        - Has a table__row class
             <td>    - Has a table_cell class

Be sure to resize the page to see the table's limitations.

Example

The Herculoids	Spiderman	Thundercats	Justice League
Zandor	Firestar	Lion 'O	Black Canary
Tara	Iceman	Cheetara	Firestorm
Gloop	Lightwave	Pumyra	Zatanna
Gleep	Videoman	Snarf	Wonder Woman

Markup: tables/tables.html

                    <table class="table">
    <thead class="table__header">
        <tr class="table__row">
            <th class="table__cell">The Herculoids</th>
            <th class="table__cell">Spiderman</th>
            <th class="table__cell">Thundercats</th>
            <th class="table__cell">Justice League</th>
        </tr>
    </thead>
    <tbody>
        <tr class="table__row">
            <td class="table__cell">Zandor</td>
            <td class="table__cell">Firestar</td>
            <td class="table__cell">Lion 'O</td>
            <td class="table__cell">Black Canary</td>
        </tr>
        <tr class="table__row">
            <td class="table__cell">Tara</td>
            <td class="table__cell">Iceman</td>
            <td class="table__cell">Cheetara</td>
            <td class="table__cell">Firestorm</td>
        </tr>
        <tr class="table__row">
            <td class="table__cell">Gloop</td>
            <td class="table__cell">Lightwave</td>
            <td class="table__cell">Pumyra</td>
            <td class="table__cell">Zatanna</td>
        </tr>
        <tr class="table__row">
            <td class="table__cell">Gleep</td>
            <td class="table__cell">Videoman</td>
            <td class="table__cell">Snarf</td>
            <td class="table__cell">Wonder Woman</td>
        </tr>
    </tbody>
</table>

Source: tables/_tables.scss, line 35