© 2021 Leviy

Tables

Example

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First Name</th>
            <th scope="col">Last Name</th>
            <th scope="col">Username</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>

Example with clickable rows

# First Name Last Name Username
1 Mark Otto @mdo chevron_right
2 Jacob Thornton @fat chevron_right
3 Larry the Bird @twitter chevron_right 
<table class="table table-hover table-row-link">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First Name</th>
            <th scope="col">Last Name</th>
            <th scope="col">Username</th>
            <th scope="col"></th>
        </tr>
    </thead>
    <tbody>
        <tr data-href="https://www.leviy.com">
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
            <td class="text-right"><i class="material-icons-round">chevron_right</i></td>
        </tr>
        <tr data-href="https://www.leviy.com">
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
            <td class="text-right"><i class="material-icons-round">chevron_right</i></td>
        </tr>
        <tr data-href="https://www.leviy.com">
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
            <td class="text-right"><i class="material-icons-round">chevron_right</i></td>
        </tr>
    </tbody>
</table>