Tables

You're using these to display tabular data and not for layout, right? They can even be responsive! Or they can be created with flexbox.

Name Alter Ego Primary Superpower Home
Silver Surfer Norrin Radd Power Cosmic Zenn-La
Nova Richard Rider Flight; Superhuman strength, speed, and durability; Expert hand to hand combatant; Xandarian Worldmind; Gravity manipulation Earth
Adam Warlock Superhuman strength; stamina; agility; endurance; flight; Energy manipulation Earth
Gladiator Kallark Superhuman strength, speed, stamina, agility, reflexes, and durability; Psionic abilities; Flight Strontian
Table footer content goes here.

Note: A single table can contain multiple styles (e.g., bordered and striped).

Bordered

Name Alter Ego Primary Superpower Home
Silver Surfer Norrin Radd Power Cosmic Zenn-La
Nova Richard Rider Flight; Superhuman strength, speed, and durability; Expert hand to hand combatant; Xandarian Worldmind; Gravity manipulation Earth
Adam Warlock Superhuman strength; stamina; agility; endurance; flight; Energy manipulation Earth
Gladiator Kallark Superhuman strength, speed, stamina, agility, reflexes, and durability; Psionic abilities; Flight Strontian
Table footer content goes here.

Compact

Name Alter Ego Primary Superpower Home
Silver Surfer Norrin Radd Power Cosmic Zenn-La
Nova Richard Rider Flight; Superhuman strength, speed, and durability; Expert hand to hand combatant; Xandarian Worldmind; Gravity manipulation Earth
Adam Warlock Superhuman strength; stamina; agility; endurance; flight; Energy manipulation Earth
Gladiator Kallark Superhuman strength, speed, stamina, agility, reflexes, and durability; Psionic abilities; Flight Strontian
Table footer content goes here.

Striped

Name Alter Ego Primary Superpower Home
Silver Surfer Norrin Radd Power Cosmic Zenn-La
Nova Richard Rider Flight; Superhuman strength, speed, and durability; Expert hand to hand combatant; Xandarian Worldmind; Gravity manipulation Earth
Adam Warlock Superhuman strength; stamina; agility; endurance; flight; Energy manipulation Earth
Gladiator Kallark Superhuman strength, speed, stamina, agility, reflexes, and durability; Psionic abilities; Flight Strontian
Table footer content goes here. 

<table class="table--bordered table--compact table--striped">
    <thead>
        <tr>
            <th>Column 1 Header</th>
            <th>Column 2 Header</th>
            <th>Column 3 Header</th>
            <th>Column 4 Header</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>[Content here...]</td>
            <td>[Content here...]</td>
            <td>[Content here...]</td>
            <td>[Content here...]</td>
        </tr>

        [...]

        <tr>
            <td>[Content here...]</td>
            <td>[Content here...]</td>
            <td>[Content here...]</td>
            <td>[Content here...]</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <td colspan="4">[Table footer content here...]</td>
        </tr>
    </tfoot>
</table>

Linked Rows

It is possible to make entire rows a clickable link, rather than just the contents of a single cell.

Marvel Cosmic Characters
Name Alter Ego Primary Superpower Planet of Origin
Silver Surfer Norrin Radd Power Cosmic Zenn-La
Nova Richard Rider Nova Force Control Earth
Adam Warlock Energy manipulation Earth
Gladiator Kallark Superhuman Strength Strontian
Table footer content goes here. 

<table>
    <thead>
        <tr>
            <th>Column 1 Header</th>
            <th>Column 2 Header</th>
            <th>Column 3 Header</th>
            <th>Column 4 Header</th>
        </tr>
    </thead>

    <tbody>
        <tr class="is-link js-is-link" data-href="http://foo.com/" title="[Link title text here...]">
            <td>[Content here...]</td>
            <td>[Content here...]</td>
            <td>[Content here...]</td>
            <td>[Content here...]</td>
        </tr>

        [...]

       <tr class="is-link js-is-link" data-href="http://foo.com/" title="[Link title text here...]">
            <td>[Content here...]</td>
            <td>[Content here...]</td>
            <td>[Content here...]</td>
            <td>[Content here...]</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <td colspan="4">[Table footer content here...]</td>
        </tr>
    </tfoot>
</table>

Class Reference

Class Info
table--bordered Wraps the table in a border. Should be added to a table.
table--compact Removes padding from the table cells. Should be added to a table.
table--striped Applies zebra striping to the rows in the tbody tag. Should be added to a table.
table--item-pricing Used for item pricing tables. Causes the "item-pricing-quantity" td to expand as wide as possible.
table--responsive Makes a table responsive.
is-link Identifies a table row as being a "linked" row. Should be added to a tr.
empty Identifies an empty table cell, and will insert "n/a" in it. Should be added to a th or td.
numeric Should be used for cells that only contain a number. Aligns text to the right. Should be added to a th or td.
rotated Causes th text to display vertically. Should be added to a thead.
row-headers Highlights the first td in each tr. Should be added to a tbody.
flex-table Denotes a "flex-table" element. Should be added to a div.
flex-table--has-links Indicates that the "flex-table" element's rows are linked.
flex-table__tr Denotes a "flex-table" row element. Should be added to a div.
flex-table__tr--header Denotes a "flex-table" row header element.
flex-table-td Denotes a "flex-table" cell element. Should be added to a div.
flex-table-td--expand Increases the width of a "flex-table-td" element.