---
title: Table Colors
layout: nested-component.html
---
<h1 class="docs--page-header">Table Colors</h1>

<h2 class="docs--section-header">
    Contextual Colors
</h2>

<p class="docs--page-description">
    Use the contextual classes on rows, or on individual cells.
</p>

<table class="table table-striped table-hover">
    <thead>
        <tr>
            <td>
                First Name
            </td>
            <td>
                Last Name
            </td>
            <td>
                Username
            </td>
            <td>
                Email
            </td>
            <td>
                Role
            </td>
            <td>
                Birthday
            </td>
            <td>
                Status
            </td>
            <td>
                Last login
            </td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                John
            </td>
            <td>
                Doe
            </td>
            <td>
                jd
            </td>
            <td>
                john.doe@company.com
            </td>
            <td>
                Administrator
            </td>
            <td class="shaded">
                21/05/1980
            </td>
            <td class="shaded">
                Active
            </td>
            <td class="shaded">
                19/11/2014
            </td>
        </tr>
        <tr>
            <td>
                John
            </td>
            <td>
                Doe
            </td>
            <td>
                jd
            </td>
            <td>
                john.doe@company.com
            </td>
            <td>
                Administrator
            </td>
            <td class="shaded">
                21/05/1980
            </td>
            <td class="shaded">
                Active
            </td>
            <td class="shaded">
                19/11/2014
            </td>
        </tr>
        <tr>
            <td class="info">
                John
            </td>
            <td class="info">
                Doe
            </td>
            <td class="info">
                jd
            </td>
            <td class="info">
                john.doe@company.com
            </td>
            <td class="info">
                Administrator
            </td>
            <td class="info shaded">
                21/05/1980
            </td>
            <td class="info shaded">
                Active
            </td>
            <td class="info shaded">
                19/11/2014
            </td>
        </tr>
        <tr class="info">
            <td>
                John
            </td>
            <td>
                Doe
            </td>
            <td>
                jd
            </td>
            <td>
                john.doe@company.com
            </td>
            <td>
                Administrator
            </td>
            <td class="info shaded">
                21/05/1980
            </td>
            <td class="info shaded">
                Active
            </td>
            <td class="info shaded">
                19/11/2014
            </td>
        </tr>
        <tr class="success">
            <td>
                John
            </td>
            <td>
                Doe
            </td>
            <td>
                jd
            </td>
            <td>
                john.doe@company.com
            </td>
            <td>
                Administrator
            </td>
            <td class="success shaded">
                21/05/1980
            </td>
            <td class="success shaded">
                Active
            </td>
            <td class="success shaded">
                19/11/2014
            </td>
        </tr>
        <tr class="success">
            <td>
                John
            </td>
            <td>
                Doe
            </td>
            <td>
                jd
            </td>
            <td>
                john.doe@company.com
            </td>
            <td>
                Administrator
            </td>
            <td class="success shaded">
                21/05/1980
            </td>
            <td class="success shaded">
                Active
            </td>
            <td class="success shaded">
                19/11/2014
            </td>
        </tr>
        <tr class="warning">
            <td>
                John
            </td>
            <td>
                Doe
            </td>
            <td>
                jd
            </td>
            <td>
                john.doe@company.com
            </td>
            <td>
                Administrator
            </td>
            <td class="warning shaded">
                21/05/1980
            </td>
            <td class="warning shaded">
                Active
            </td>
            <td class="warning shaded">
                19/11/2014
            </td>
        </tr>
        <tr class="warning">
            <td>
                John
            </td>
            <td>
                Doe
            </td>
            <td>
                jd
            </td>
            <td>
                john.doe@company.com
            </td>
            <td>
                Administrator
            </td>
            <td class="warning shaded">
                21/05/1980
            </td>
            <td class="warning shaded">
                Active
            </td>
            <td class="warning shaded">
                19/11/2014
            </td>
        </tr>
        <tr class="danger">
            <td>
                John
            </td>
            <td>
                Doe
            </td>
            <td>
                jd
            </td>
            <td>
                john.doe@company.com
            </td>
            <td>
                Administrator
            </td>
            <td class="danger shaded">
                21/05/1980
            </td>
            <td class="danger shaded">
                Active
            </td>
            <td class="danger shaded">
                19/11/2014
            </td>
        </tr>
        <tr class="danger">
            <td>
                John
            </td>
            <td>
                Doe
            </td>
            <td>
                jd
            </td>
            <td>
                john.doe@company.com
            </td>
            <td>
                Administrator
            </td>
            <td class="danger shaded">
                21/05/1980
            </td>
            <td class="danger shaded">
                Active
            </td>
            <td class="danger shaded">
                19/11/2014
            </td>
        </tr>
        <tr>
            <td class="info">
                John
            </td>
            <td>
                Doe
            </td>
            <td class="success">
                jd
            </td>
            <td>
                john.doe@company.com
            </td>
            <td class="warning">
                Administrator
            </td>
            <td>
                21/05/1980
            </td>
            <td class="danger">
                Active
            </td>
            <td>
                19/11/2014
            </td>
        </tr>
        <tr>
            <td class="info">
                John
            </td>
            <td>
                Doe
            </td>
            <td class="success">
                jd
            </td>
            <td>
                john.doe@company.com
            </td>
            <td class="warning">
                Administrator
            </td>
            <td>
                21/05/1980
            </td>
            <td class="danger">
                Active
            </td>
            <td>
                19/11/2014
            </td>
        </tr>
    </tbody>
</table>