The HTML table model allows authors to arrange data into rows and columns of cells.
Each table may have an associated caption that provides a short description of the table’s purpose.
Basic
<table>
<caption>Optional Table Caption</caption>
<thead>
<tr>
<th>#</th>
<th>Theme Name</th>
<th>Theme Type</th>
<th>Theme Price</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Anemone</td>
<td>Magazine</td>
<td>$79</td>
</tr>
...
</tbody>
</table>
Optional Table Caption
| # |
Theme Name |
Theme Type |
Theme Price |
| 1 |
Anemone |
Magazine |
$79 |
| 2 |
Dicot |
Magazine |
$89 |
| 3 |
Candela |
Portfolio |
$79 |
| 4 |
Wedding |
Wedding |
$75 |
| 5 |
Axon |
Blog |
$75 |
Table Inverse
<table class="table-inverse">
<caption>Optional Table Caption</caption>
<thead>
<tr>
<th>#</th>
<th>Theme Name</th>
<th>Theme Type</th>
<th>Theme Price</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Anemone</td>
<td>Magazine</td>
<td>$79</td>
</tr>
...
</tbody>
</table>
Optional Table Caption
| # |
Theme Name |
Theme Type |
Theme Price |
| 1 |
Anemone |
Magazine |
$79 |
| 2 |
Dicot |
Magazine |
$89 |
| 3 |
Candela |
Portfolio |
$79 |
| 4 |
Wedding |
Wedding |
$75 |
| 5 |
Axon |
Blog |
$75 |
Table Head Default
<table>
<thead class="thead-default">
<tr>
<th>#</th>
<th>Theme Name</th>
<th>Theme Type</th>
<th>Theme Price</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Anemone</td>
<td>Magazine</td>
<td>$79</td>
</tr>
...
</tbody>
</table>
Table Head Inverse
<table>
<thead class="thead-inverse">
<tr>
<th>#</th>
<th>Theme Name</th>
<th>Theme Type</th>
<th>Theme Price</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Anemone</td>
<td>Magazine</td>
<td>$79</td>
</tr>
...
</tbody>
</table>
Table Striped Rows
<table class="table-striped">
<thead>
<tr>
<th>#</th>
<th>Theme Name</th>
<th>Theme Type</th>
<th>Theme Price</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Anemone</td>
<td>Magazine</td>
<td>$79</td>
</tr>
...
</tbody>
</table>
Table Bordered
<table class="table-bordered">
<thead>
<tr>
<th>#</th>
<th>Theme Name</th>
<th>Theme Type</th>
<th>Theme Price</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Anemone</td>
<td>Magazine</td>
<td>$79</td>
</tr>
...
</tbody>
</table>
Table Hover Rows
<table class="table-hover">
<thead>
<tr>
<th>#</th>
<th>Theme Name</th>
<th>Theme Type</th>
<th>Theme Price</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Anemone</td>
<td>Magazine</td>
<td>$79</td>
</tr>
...
</tbody>
</table>
Table Small
<table class="table-sm">
<thead>
<tr>
<th>#</th>
<th>Theme Name</th>
<th>Theme Type</th>
<th>Theme Price</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Anemone</td>
<td>Magazine</td>
<td>$79</td>
</tr>
...
</tbody>
</table>
Table Customized
<table class="table-bordered table-striped table-hover">
<thead>
<tr>
<th>#</th>
<th>Theme Name</th>
<th>Theme Type</th>
<th>Theme Price</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Anemone</td>
<td>Magazine</td>
<td>$79</td>
</tr>
...
</tbody>
</table>
Table Contextual Classes
<table>
<thead>
<tr>
<th>#</th>
<th>Theme Name</th>
<th>Theme Type</th>
<th>Theme Price</th>
</tr>
</thead>
<tbody>
<tr class="table-active">
<th scope="row">1</th>
<td>Anemone</td>
<td>Magazine</td>
<td>$79</td>
</tr>
<tr class="table-success">
<th scope="row">2</th>
<td>Dicot</td>
<td>Magazine</td>
<td>$89</td>
</tr>
<tr class="table-info">
<th scope="row">3</th>
<td>Candela</td>
<td>Portfolio</td>
<td>$79</td>
</tr>
<tr class="table-warning">
<th scope="row">4</th>
<td>Wedding</td>
<td>Wedding</td>
<td>$75</td>
</tr>
<tr class="table-danger">
<th scope="row">5</th>
<td>Axon</td>
<td>Blog</td>
<td>$75</td>
</tr>
</tbody>
</table>
