Tables

The HTML table model allows authors to arrange data: text, preformatted text, images, links, forms, form fields, other tables, etc. into rows and columns of cells. With Metro 4 you can create an original tables simple and easy.

Create table

Just add the base class .table to any <table>, then extend with custom styles or our various included modifier classes. All table styles are inherited in Metro 4, meaning any nested tables will be styled in the same manner as the parent.

# First Name Last Name Username
1 Bill Gates @billy
2 Steve Jobs @stevy
3 Larry Page @larry

                    <table class="table">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Username</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>1</td>
                            <td>Bill</td>
                            <td>Gates</td>
                            <td>@billy</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Steve</td>
                            <td>Jobs</td>
                            <td>@stevy</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>Larry</td>
                            <td>Page</td>
                            <td>@larry</td>
                        </tr>
                        </tbody>
                    </table>
                

Sortable columns

You can mark column as sortable. To create sortable column add class .sortable-column to head cell and mark column with need sortable direction class .sort-asc or .sort-desc.

# First Name Last Name Username
1 Bill Gates @billy
2 Steve Jobs @stevy
3 Larry Page @larry

                    <table class="table">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>First Name</th>
                            <th class="sortable-column sort-asc">Last Name</th>
                            <th>Username</th>
                        </tr>
                        </thead>
                        <tbody>
                        ...
                        </tbody>
                    </table>
                

If you need to place sortable marker on the left, add class .sortable-markers-on-left to table.

Striped rows

Use class .striped to add zebra-striping to any table row within the <tbody>.

# First Name Last Name Username
1 Bill Gates @billy
2 Steve Jobs @stevy
3 Larry Page @larry

                    <table class="table striped">
                        ...
                    </table>
                

Hoverable rows

Use class .row-hover and .cell-hover to to enable a hover state on table rows within a <tbody>.

.row-hover
# First Name Last Name Username
1 Bill Gates @billy
2 Steve Jobs @stevy
3 Larry Page @larry

.cell-hover
# First Name Last Name Username
1 Bill Gates @billy
2 Steve Jobs @stevy
3 Larry Page @larry

                    <table class="table striped">
                        ...
                    </table>
                

Bordered table

To create border for table, row or cell use subclasses: .table-border, .row-border, .cell-border. You can combine classes to achieve the desired effect.

.table-border
# First Name Last Name Username
1 Bill Gates @billy
2 Steve Jobs @stevy
3 Larry Page @larry

.row-border
# First Name Last Name Username
1 Bill Gates @billy
2 Steve Jobs @stevy
3 Larry Page @larry

.cell-border
# First Name Last Name Username
1 Bill Gates @billy
2 Steve Jobs @stevy
3 Larry Page @larry

                    <table class="table table-border cell-border">
                        ...
                    </table>
                

Compact table

Add .compact to make tables more compact by cutting cell padding in half.

# First Name Last Name Username
1 Bill Gates @billy
2 Steve Jobs @stevy
3 Larry Page @larry

                    <table class="table compact">
                        ...
                    </table>
                

Subcompact table

Add .subcompact to make tables more compact.

# First Name Last Name Username
1 Bill Gates @billy
2 Steve Jobs @stevy
3 Larry Page @larry

                    <table class="table subcompact">
                        ...
                    </table>
                

Colored table

Use contextual classes to color table rows or individual cells. Available classes: .primary, .secondary, .success, .waring, .yellow, .info, .alert, .dark, .light. You can combine classes to achieve the desired effect.

# First Name Last Name Username
1 Bill Gates @billy
2 Steve Jobs @stevy
3 Larry Page @larry
# First Name Last Name Username
1 Bill Gates @billy
2 Steve Jobs @stevy
3 Larry Page @larry

                    <table class="table table-border cell-border">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Username</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>1</td>
                            <td class="info">Bill</td>
                            <td>Gates</td>
                            <td>@billy</td>
                        </tr>
                        <tr class="yellow">
                            <td>2</td>
                            <td>Steve</td>
                            <td>Jobs</td>
                            <td class="success">@stevy</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td class="alert">Larry</td>
                            <td>Page</td>
                            <td>@larry</td>
                        </tr>
                        </tbody>
                    </table>