# General Tables

##### Default Table

# | Name | Position | Age | Start Date
--- | --- | --- | --- | ---
1 | Brandon Jacob | Designer | 28 | 2016-05-25
2 | Bridie Kessler | Developer | 35 | 2014-12-05
3 | Ashleigh Langosh | Finance | 45 | 2011-08-12
4 | Angus Grady | HR | 34 | 2012-06-11
5 | Raheem Lehner | Dynamic Division Officer | 47 | 2011-04-19

##### Dark Table

# | Name | Position | Age | Start Date
--- | --- | --- | --- | ---
1 | Brandon Jacob | Designer | 28 | 2016-05-25
2 | Bridie Kessler | Developer | 35 | 2014-12-05
3 | Ashleigh Langosh | Finance | 45 | 2011-08-12
4 | Angus Grady | HR | 34 | 2012-06-11
5 | Raheem Lehner | Dynamic Division Officer | 47 | 2011-04-19

##### Active Table

Highlight a table row or cell by adding a `.table-active` class.

# | Name | Position | Age | Start Date
--- | --- | --- | --- | ---
1 | Brandon Jacob | Designer | 28 | 2016-05-25
2 | Bridie Kessler | Developer | 35 | 2014-12-05
3 | Ashleigh Langosh | Finance | 45 | 2011-08-12
4 | Angus Grady | HR | 34 | 2012-06-11
5 | Raheem Lehner | Dynamic Division Officer | 47 | 2011-04-19

##### Tables without borders

Add `.table-borderless` for a table without borders.

# | Name | Position | Age | Start Date
--- | --- | --- | --- | ---
1 | Brandon Jacob | Designer | 28 | 2016-05-25
2 | Bridie Kessler | Developer | 35 | 2014-12-05
3 | Ashleigh Langosh | Finance | 45 | 2011-08-12
4 | Angus Grady | HR | 34 | 2012-06-11
5 | Raheem Lehner | Dynamic Division Officer | 47 | 2011-04-19

##### Table Variants

Use contextual classes `.table-primary .table-secondary .table-success .table-danger .table-warning .table-info .table-light .table-dark` to color tables, table rows or individual cells.

Class | Heading | Heading
--- | --- | ---
Default | Cell | Cell
Primary | Cell | Cell
Secondary | Cell | Cell
Success | Cell | Cell
Danger | Cell | Cell
Warning | Cell | Cell
Info | Cell | Cell
Light | Cell | Cell
Dark | Cell | Cell

##### Table with stripped rows

# | Name | Position | Age | Start Date
--- | --- | --- | --- | ---
1 | Brandon Jacob | Designer | 28 | 2016-05-25
2 | Bridie Kessler | Developer | 35 | 2014-12-05
3 | Ashleigh Langosh | Finance | 45 | 2011-08-12
4 | Angus Grady | HR | 34 | 2012-06-11
5 | Raheem Lehner | Dynamic Division Officer | 47 | 2011-04-19

##### Table with hoverable rows

# | Name | Position | Age | Start Date
--- | --- | --- | --- | ---
1 | Brandon Jacob | Designer | 28 | 2016-05-25
2 | Bridie Kessler | Developer | 35 | 2014-12-05
3 | Ashleigh Langosh | Finance | 45 | 2011-08-12
4 | Angus Grady | HR | 34 | 2012-06-11
5 | Raheem Lehner | Dynamic Division Officer | 47 | 2011-04-19

##### Bordered Table

Add `.table-bordered` for borders on all sides of the table and cells.

# | Name | Position | Age | Start Date
--- | --- | --- | --- | ---
1 | Brandon Jacob | Designer | 28 | 2016-05-25
2 | Bridie Kessler | Developer | 35 | 2014-12-05
3 | Ashleigh Langosh | Finance | 45 | 2011-08-12
4 | Angus Grady | HR | 34 | 2012-06-11
5 | Raheem Lehner | Dynamic Division Officer | 47 | 2011-04-19

Border color utilities can be added to change colors:

# | Name | Position | Age | Start Date
--- | --- | --- | --- | ---
1 | Brandon Jacob | Designer | 28 | 2016-05-25
2 | Bridie Kessler | Developer | 35 | 2014-12-05
3 | Ashleigh Langosh | Finance | 45 | 2011-08-12
4 | Angus Grady | HR | 34 | 2012-06-11
5 | Raheem Lehner | Dynamic Division Officer | 47 | 2011-04-19

##### Small tables

Add `.table-sm` to make any `.table` more compact by cutting all cell padding in half.

# | Name | Position | Age | Start Date
--- | --- | --- | --- | ---
1 | Brandon Jacob | Designer | 28 | 2016-05-25
2 | Bridie Kessler | Developer | 35 | 2014-12-05
3 | Ashleigh Langosh | Finance | 45 | 2011-08-12
4 | Angus Grady | HR | 34 | 2012-06-11
5 | Raheem Lehner | Dynamic Division Officer | 47 | 2011-04-19