Table

This section shows the different styling options of HTML tables.

Table

First nameLast nameE-Mail
Roland May
Frontend developer
rolandmay@yoveo.foo
Mark Ross
Scrum master
mark.ross@skivee.name
Melissa Anton
Frontend key developer
m.anton@grkeo.foo
Tyler Nichols
Frontend developer
tyler.nichols@cogibox.foo
Amanda Maria Kennedy
Chief product expert
amanda-maria-kennedy@gmail.foo
<table class="table">
    <thead>
        <tr>
            <th>First name</th>
            <th>Last name</th>
            <th>E-Mail</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                Roland
            </td>
            <td>
                May
                <div class="td__description">
                    Frontend developer
                </div>
            </td>
            <td>
                <a href="mailto:rolandmay@yoveo.foo">
                    rolandmay@yoveo.foo
                </a>
            </td>
        </tr>
        <tr>
            <td>
                Mark
            </td>
            <td>
                Ross
                <div class="td__description">
                    Scrum master
                </div>
            </td>
            <td>
                <a href="mailto:mark.ross@skivee.foo">
                    mark.ross@skivee.name
                </a>
            </td>
        </tr>
        <tr>
            <td>Melissa</td>
            <td>
                Anton
                <div class="td__description">
                    Frontend key developer
                </div>
            </td>
            <td>
                <a href="mailto:m.anton@grkeo.foo">
                    m.anton@grkeo.foo
                </a>
            </td>
        </tr>
        <tr>
            <td>Tyler</td>
            <td>
                Nichols
                <div class="td__description">
                    Frontend developer
                </div>
            </td>
            <td>
                <a href="mailto:tyler.nichols@cogibox.foo">
                    tyler.nichols@cogibox.foo
                </a>
            </td>
        </tr>
        <tr>
            <td>Amanda Maria</td>
            <td>
                Kennedy
                <div class="td__description">
                    Chief product expert
                </div>
            </td>
            <td>
                <a href="mailto:amanda-maria-kennedy@gmail.foo">
                    amanda-maria-kennedy@gmail.foo
                </a>
            </td>
        </tr>
    </tbody>
    <tfoot>
    </tfoot>
</table>

Small table

First nameLast nameE-Mail
Roland May
Frontend developer
rolandmay@yoveo.foo
Mark Ross
Scrum master
mark.ross@skivee.foo
Melissa Anton
Frontend key developer
m.anton@grkeo.foo
Tyler Nichols
Frontend developer
tyler.nichols@cogibox.foo
Amanda Maria Kennedy
Chief product expert
amanda-maria-kennedy@gmail.foo
<table class="table table--small">
    <thead>
        <tr>
            <th>First name</th>
            <th>Last name</th>
            <th>E-Mail</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Roland</td>
            <td>
                May
                <div class="td__description">
                    Frontend developer
                </div>
            </td>
            <td>
                <a href="mailto:roymay@yoveo.foo">
                    rolandmay@yoveo.foo
                </a>
            </td>
        </tr>
        <tr>
            <td>
                Mark
            </td>
            <td>
                Ross
                <div class="td__description">
                    Scrum master
                </div>
            </td>
            <td>
                <a href="mailto:mark.ross@skivee.foo">
                    mark.ross@skivee.foo
                </a>
            </td>
        </tr>
        <tr>
            <td>Melissa</td>
            <td>
                Anton
                <div class="td__description">
                    Frontend key developer
                </div>
            </td>
            <td>
                <a href="mailto:m.anton@grkeo.foo">
                    m.anton@grkeo.foo
                </a>
            </td>
        </tr>
        <tr>
            <td>Tyler</td>
            <td>
                Nichols
                <div class="td__description">
                    Frontend developer
                </div>
            </td>
            <td>
                <a href="mailto:tyler.nichols@cogibox.foo">
                    tyler.nichols@cogibox.foo
                </a>
            </td>
        </tr>
        <tr>
            <td>Amanda Maria</td>
            <td>
                Kennedy
                <div class="td__description">
                    Chief product expert
                </div>
            </td>
            <td>
                <a href="mailto:amanda-maria-kennedy@gmail.foo">
                    amanda-maria-kennedy@gmail.foo
                </a>
            </td>
        </tr>
    </tbody>
    <tfoot>
    </tfoot>
</table>

Table with leading column

Roland May
Frontend developer
rolandmay@yoveo.foo
Mark Ross
Scrum master
mark.ross@skivee.foo
Melissa Anton
Frontend key developer
m.anton@grkeo.foo
Tyler Nichols
Frontend developer
tyler.nichols@cogibox.foo
Amanda Maria Kennedy
Chief product expert
amanda-maria-kennedy@gmail.foo
<table class="table table--leading">
    <tbody>
        <tr>
            <td>Roland</td>
            <td>
                May
                <div class="td__description">
                    Frontend developer
                </div>
            </td>
            <td>
                <a href="mailto:roymay@yoveo.foo">
                    rolandmay@yoveo.foo
                </a>
            </td>
        </tr>
        <tr>
            <td>
                Mark
            </td>
            <td>
                Ross
                <div class="td__description">
                    Scrum master
                </div>
            </td>
            <td>
                <a href="mailto:mark.ross@skivee.foo">
                    mark.ross@skivee.foo
                </a>
            </td>
        </tr>
        <tr>
            <td>Melissa</td>
            <td>
                Anton
                <div class="td__description">
                    Frontend key developer
                </div>
            </td>
            <td>
                <a href="mailto:m.anton@grkeo.foo">
                    m.anton@grkeo.foo
                </a>
            </td>
        </tr>
        <tr>
            <td>Tyler</td>
            <td>
                Nichols
                <div class="td__description">
                    Frontend developer
                </div>
            </td>
            <td>
                <a href="mailto:tyler.nichols@cogibox.foo">
                    tyler.nichols@cogibox.foo
                </a>
            </td>
        </tr>
        <tr>
            <td>Amanda Maria</td>
            <td>
                Kennedy
                <div class="td__description">
                    Chief product expert
                </div>
            </td>
            <td>
                <a href="mailto:amanda-maria-kennedy@gmail.foo">
                    amanda-maria-kennedy@gmail.foo
                </a>
            </td>
        </tr>
    </tbody>
    <tfoot>
    </tfoot>
</table>

Table with alternating rows

First nameLast nameE-Mail
Roland May
Frontend developer
rolandmay@yoveo.foo
Mark Ross
Scrum master
mark.ross@skivee.foo
Melissa Anton
Frontend key developer
m.anton@grkeo.foo
Tyler Nichols
Frontend developer
tyler.nichols@cogibox.foo
Amanda Maria Kennedy
Chief product expert
amanda-maria-kennedy@gmail.foo
<table class="table table--alternate">
    <thead>
        <tr>
            <th>First name</th>
            <th>Last name</th>
            <th>E-Mail</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Roland</td>
            <td>
                May
                <div class="td__description">
                    Frontend developer
                </div>
            </td>
            <td>
                <a href="mailto:roymay@yoveo.foo">
                    rolandmay@yoveo.foo
                </a>
            </td>
        </tr>
        <tr>
            <td>
                Mark
            </td>
            <td>
                Ross
                <div class="td__description">
                    Scrum master
                </div>
            </td>
            <td>
                <a href="mailto:mark.ross@skivee.foo">
                    mark.ross@skivee.foo
                </a>
            </td>
        </tr>
        <tr>
            <td>Melissa</td>
            <td>
                Anton
                <div class="td__description">
                    Frontend key developer
                </div>
            </td>
            <td>
                <a href="mailto:m.anton@grkeo.foo">
                    m.anton@grkeo.foo
                </a>
            </td>
        </tr>
        <tr>
            <td>Tyler</td>
            <td>
                Nichols
                <div class="td__description">
                    Frontend developer
                </div>
            </td>
            <td>
                <a href="mailto:tyler.nichols@cogibox.foo">
                    tyler.nichols@cogibox.foo
                </a>
            </td>
        </tr>
        <tr>
            <td>Amanda Maria</td>
            <td>
                Kennedy
                <div class="td__description">
                    Chief product expert
                </div>
            </td>
            <td>
                <a href="mailto:amanda-maria-kennedy@gmail.foo">
                    amanda-maria-kennedy@gmail.foo
                </a>
            </td>
        </tr>
    </tbody>
    <tfoot>
    </tfoot>
</table>

Usage

ElementClassDescription
.table .table--small Reduces the padding in the first column of the table.
.table .table--leading Adds a border to the top of the table if no table header is used. Additionally, it sets the first column bold.
.table .table--alternate Adds a light background color to every second table row and highlights the currently hovered row.
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top