Tables

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>

#	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>

#	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>

#	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 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>

#	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 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>

#	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 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>

#	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 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>

#	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 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>

#	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 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>

#	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 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>

#	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