Tabulky se tvoří následovně:

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Jméno</th>
      <th scope="col">Příjmení</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Eva</td>
      <td>Pohodová</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Milan</td>
      <td>Rychlý</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>František</td>
      <td>Bohatý</td>
    </tr>
  </tbody>
</table>

#	Jméno	Příjmení
1	Eva	Pohodová
2	Milan	Rychlý
3	František	Bohatý

Barevná tabulka

Tabulku si dále můžeme upravovat. Například ji celou můžeme obarvit. To uděláme v class=„table“:

<table class="table table-secondary">

#	Jméno	Příjmení
1	Eva	Pohodová
2	Milan	Rychlý
3	František	Bohatý

Obarvit lze také jen jeden pruh. Najdeme si ho a do class vepíšeme:

<tr class="table-primary">
<tr class="table-secondary">
<tr class="table-success">
<tr class="table-danger">
<tr class="table-warning">
<tr class="table-info">
<tr class="table-light">
<tr class="table-dark">

#	Jméno	Příjmení
1	Eva	Pohodová
2	Milan	Rychlý
3	František	Bohatý
3	Jan	Novák
3	Eliška	Smutná
3	Adam	Veselý
3	Michal	Chytrý

Pruhovaná tabulka

Pokud chceme pruhovanou tabulky použijeme:

<table class="table table-striped">

#	Jméno	Příjmení
1	Eva	Pohodová
2	Milan	Rychlý
3	František	Bohatý

Ohraničení

Pro ohraničení přidáme:

<table class="table table-bordered">

#	Jméno	Příjmení
1	Eva	Pohodová
2	Milan	Rychlý
3	František	Bohatý

Pokud chceme naopak neohraničenou tabulku, použijeme:

<table class="table table-borderless">

#	Jméno	Příjmení
1	Eva	Pohodová
2	Milan	Rychlý
3	František	Bohatý

Spojení polí

V tabulce je možné spojit pole dohromady. V daném poli za td umístíme colspan= a počet polí, které chceme shrnout do jednoho.

<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Jméno</th>
      <th scope="col">Příjmení</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">2</th>
      <td>Milan</td>
      <td>Rychlý</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">František Bohatý</td>
    </tr>
  </tbody>
</table>

#	Jméno	Příjmení
1	Milan	Rychlý
2	František Bohatý

Označování řádku při přejíždění

<table class="table table-hover">

#	Jméno	Příjmení
1	Eva	Pohodová
2	Milan	Rychlý
3	František	Bohatý

Malá tabulka

<table class="table table-sm">

#	Jméno	Příjmení
1	Eva	Pohodová
2	Milan	Rychlý
3	František	Bohatý