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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<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