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 UI 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 UI, 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>

Table of contents