Tables
TO DO:
Add div with class .table-wrap to ALL code examples!
Use the .table class on a table to style it.
| # |
Name |
E-mail |
Department |
| 1 |
Michael Scott |
worldsbestboss@yahoo.com |
Office Manager |
| 2 |
Dwight Schrute |
mr.beet@battlestargalactica.com |
Sales |
| 3 |
Pam Beesly |
pam@dunder-mifflin.com |
Reception |
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>E-mail</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Michael Scott</td>
<td>worldsbestboss@yahoo.com</td>
<td>Office Manager</td>
</tr>
<tr>
<th>2</th>
<td>Dwight Schrute</td>
<td>mr.beet@battlestargalactica.com</td>
<td>Sales</td>
</tr>
<tr>
<th>3</th>
<td>Pam Beesly</td>
<td>pam@dunder-mifflin.com</td>
<td>Reception</td>
</tr>
</tbody>
</table>
Dark table
| # |
Name |
E-mail |
Department |
| 1 |
Michael Scott |
worldsbestboss@yahoo.com |
Office Manager |
| 2 |
Dwight Schrute |
mr.beet@battlestargalactica.com |
Sales |
| 3 |
Pam Beesly |
pam@dunder-mifflin.com |
Reception |
<table class="table table-dark">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>E-mail</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Michael Scott</td>
<td>worldsbestboss@yahoo.com</td>
<td>Office Manager</td>
</tr>
<tr>
<th>2</th>
<td>Dwight Schrute</td>
<td>mr.beet@battlestargalactica.com</td>
<td>Sales</td>
</tr>
<tr>
<th>3</th>
<td>Pam Beesly</td>
<td>pam@dunder-mifflin.com</td>
<td>Reception</td>
</tr>
</tbody>
</table>
Small table
| # |
Name |
E-mail |
Department |
| 1 |
Michael Scott |
worldsbestboss@yahoo.com |
Office Manager |
| 2 |
Dwight Schrute |
mr.beet@battlestargalactica.com |
Sales |
| 3 |
Pam Beesly |
pam@dunder-mifflin.com |
Reception |
| # |
Name |
E-mail |
Department |
| 1 |
Michael Scott |
worldsbestboss@yahoo.com |
Office Manager |
| 2 |
Dwight Schrute |
mr.beet@battlestargalactica.com |
Sales |
| 3 |
Pam Beesly |
pam@dunder-mifflin.com |
Reception |
<table class="table table-sm">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>E-mail</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Michael Scott</td>
<td>worldsbestboss@yahoo.com</td>
<td>Office Manager</td>
</tr>
<tr>
<th>2</th>
<td>Dwight Schrute</td>
<td>mr.beet@battlestargalactica.com</td>
<td>Sales</td>
</tr>
<tr>
<th>3</th>
<td>Pam Beesly</td>
<td>pam@dunder-mifflin.com</td>
<td>Reception</td>
</tr>
</tbody>
</table>
Bordered table
| # |
Name |
E-mail |
Department |
| 1 |
Michael Scott |
worldsbestboss@yahoo.com |
Office Manager |
| 2 |
Dwight Schrute |
mr.beet@battlestargalactica.com |
Sales |
| 3 |
Pam Beesly |
pam@dunder-mifflin.com |
Reception |
| # |
Name |
E-mail |
Department |
| 1 |
Michael Scott |
worldsbestboss@yahoo.com |
Office Manager |
| 2 |
Dwight Schrute |
mr.beet@battlestargalactica.com |
Sales |
| 3 |
Pam Beesly |
pam@dunder-mifflin.com |
Reception |
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>E-mail</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Michael Scott</td>
<td>worldsbestboss@yahoo.com</td>
<td>Office Manager</td>
</tr>
<tr>
<th>2</th>
<td>Dwight Schrute</td>
<td>mr.beet@battlestargalactica.com</td>
<td>Sales</td>
</tr>
<tr>
<th>3</th>
<td>Pam Beesly</td>
<td>pam@dunder-mifflin.com</td>
<td>Reception</td>
</tr>
</tbody>
</table>
Borderless table
| # |
Name |
E-mail |
Department |
| 1 |
Michael Scott |
worldsbestboss@yahoo.com |
Office Manager |
| 2 |
Dwight Schrute |
mr.beet@battlestargalactica.com |
Sales |
| 3 |
Pam Beesly |
pam@dunder-mifflin.com |
Reception |
| # |
Name |
E-mail |
Department |
| 1 |
Michael Scott |
worldsbestboss@yahoo.com |
Office Manager |
| 2 |
Dwight Schrute |
mr.beet@battlestargalactica.com |
Sales |
| 3 |
Pam Beesly |
pam@dunder-mifflin.com |
Reception |
<table class="table table-borderless">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>E-mail</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Michael Scott</td>
<td>worldsbestboss@yahoo.com</td>
<td>Office Manager</td>
</tr>
<tr>
<th>2</th>
<td>Dwight Schrute</td>
<td>mr.beet@battlestargalactica.com</td>
<td>Sales</td>
</tr>
<tr>
<th>3</th>
<td>Pam Beesly</td>
<td>pam@dunder-mifflin.com</td>
<td>Reception</td>
</tr>
</tbody>
</table>
Striped rows
Does not work correctly if a column is a th-tag. Only the first column can be a th-/td-tag, the other ones must be a td-tag.
| # |
Name |
E-mail |
Department |
| 1 |
Michael Scott |
worldsbestboss@yahoo.com |
Office Manager |
| 2 |
Dwight Schrute |
mr.beet@battlestargalactica.com |
Sales |
| 3 |
Pam Beesly |
pam@dunder-mifflin.com |
Reception |
| # |
Name |
E-mail |
Department |
| 1 |
Michael Scott |
worldsbestboss@yahoo.com |
Office Manager |
| 2 |
Dwight Schrute |
mr.beet@battlestargalactica.com |
Sales |
| 3 |
Pam Beesly |
pam@dunder-mifflin.com |
Reception |
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>E-mail</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Michael Scott</td>
<td>worldsbestboss@yahoo.com</td>
<td>Office Manager</td>
</tr>
<tr>
<th>2</th>
<td>Dwight Schrute</td>
<td>mr.beet@battlestargalactica.com</td>
<td>Sales</td>
</tr>
<tr>
<th>3</th>
<td>Pam Beesly</td>
<td>pam@dunder-mifflin.com</td>
<td>Reception</td>
</tr>
</tbody>
</table>
Hoverable row
Does not work correctly if a column is a th-tag. Only the first column can be a th-/td-tag, the other ones must be a td-tag.
| # |
Name |
E-mail |
Department |
| 1 |
Michael Scott |
worldsbestboss@yahoo.com |
Office Manager |
| 2 |
Dwight Schrute |
mr.beet@battlestargalactica.com |
Sales |
| 3 |
Pam Beesly |
pam@dunder-mifflin.com |
Reception |
| # |
Name |
E-mail |
Department |
| 1 |
Michael Scott |
worldsbestboss@yahoo.com |
Office Manager |
| 2 |
Dwight Schrute |
mr.beet@battlestargalactica.com |
Sales |
| 3 |
Pam Beesly |
pam@dunder-mifflin.com |
Reception |
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>E-mail</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Michael Scott</td>
<td>worldsbestboss@yahoo.com</td>
<td>Office Manager</td>
</tr>
<tr>
<th>2</th>
<td>Dwight Schrute</td>
<td>mr.beet@battlestargalactica.com</td>
<td>Sales</td>
</tr>
<tr>
<th>3</th>
<td>Pam Beesly</td>
<td>pam@dunder-mifflin.com</td>
<td>Reception</td>
</tr>
</tbody>
</table>
Table heads
| # |
Name |
E-mail |
Department |
| 1 |
Michael Scott |
worldsbestboss@yahoo.com |
Office Manager |
| 2 |
Dwight Schrute |
mr.beet@battlestargalactica.com |
Sales |
| 3 |
Pam Beesly |
pam@dunder-mifflin.com |
Reception |
| # |
Name |
E-mail |
Department |
| 1 |
Michael Scott |
worldsbestboss@yahoo.com |
Office Manager |
| 2 |
Dwight Schrute |
mr.beet@battlestargalactica.com |
Sales |
| 3 |
Pam Beesly |
pam@dunder-mifflin.com |
Reception |
<table class="table">
<thead class="thead-dark">
<tr>
<th>#</th>
<th>Name</th>
<th>E-mail</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Michael Scott</td>
<td>worldsbestboss@yahoo.com</td>
<td>Office Manager</td>
</tr>
<tr>
<th>2</th>
<td>Dwight Schrute</td>
<td>mr.beet@battlestargalactica.com</td>
<td>Sales</td>
</tr>
<tr>
<th>3</th>
<td>Pam Beesly</td>
<td>pam@dunder-mifflin.com</td>
<td>Reception</td>
</tr>
</tbody>
</table>
<table class="table">
<thead class="thead-light">
<tr>
<th>#</th>
<th>Name</th>
<th>E-mail</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Michael Scott</td>
<td>worldsbestboss@yahoo.com</td>
<td>Office Manager</td>
</tr>
<tr>
<th>2</th>
<td>Dwight Schrute</td>
<td>mr.beet@battlestargalactica.com</td>
<td>Sales</td>
</tr>
<tr>
<th>3</th>
<td>Pam Beesly</td>
<td>pam@dunder-mifflin.com</td>
<td>Reception</td>
</tr>
</tbody>
</table>