# Tables

Tables present tabular information in a two-dimensional format. By default, Bootstrap's table styling is slightly more minimal than what Material Design specifies, but builds to offer more options than what is in Material's specifications. For this reason, we start with Bootstrap's default table, style it to fit Material Design's guidelines, and build on additional, optional classes from the default state.

Material Admin Pro also provides an interactive data tables plugin in addition to the table content styling on this page.

## Default Table

Bootstrap's default table has been modified to match Material's table styling. The font size has been brought down in size, with the text color being made intentionally darker for higher contrast and greater legibility.

The below is an example of the default table. Material's base styling for tables, which features hoverable rows and borders surrounding the table, are shown in the examples after this one.

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

## Bordered Table

By adding the `.table-bordered` class to the table element, the Bootstrap table design is one step closer Material's default design.

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

## Hoverable Rows

By adding the `.table-hover` class to the table element in conjunction with the `.table-bordered` class, the table design now matches the Material Design default.

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

## Striped Rows

By adding the `.table-striped` class to the table element, every other row will feature a slightly darker background color. This feature is outside of Materail Design's specifications, but can enhance the readability of a table, especially when working with large data sets.

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

## Small Table

By adding the `.table-sm` class to the table element, the padding of each table cell is decresed. This table format is especially useful for considerably large data sets.

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

## Dark Table

By adding the `.table-dark` class to the table element, the table will take on an inverse color system with a dark background and light text.

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

## Adding Color

Color can be added to the entire table by using a table background class. These classes are named using the format `.table-{color}` where color is any color defined on the color map.

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

Color can be added to a single row as well, also using the same `.table-{color}` classes.

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

Color can also be applied to a single cell using the table color classes.

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

The table specific background classes are used to change the color of entire tables, rows, or individual cells. The classes are named using the format `.table-{color}` where color is any color defined within the color map.

The color options for tables are compatible with the hover, striped, and other table states.

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
2 | Jacob | Thornton | @fat
2 | Jacob | Thornton | @fat
2 | Jacob | Thornton | @fat
2 | Jacob | Thornton | @fat
2 | Jacob | Thornton | @fat
2 | Jacob | Thornton | @fat

### Related Links

Data Tables Plugin

Material Admin Pro Data Tables Plugin

Related Link arrow_upward