Tabellen

Generische Tabelle

Monatliche	Einsparungen
Summe	$270
Januar	$100
Februar	$80
März	$90

<table class="table">
  <thead>
  <tr>
    <th>Monatliche</th>
    <th>Einsparungen</th>
  </tr>
  </thead>
  <tfoot>
  <tr>
    <td>Summe </td>
    <td>$270</td>
  </tr>
  </tfoot>
  <tbody>
  <tr>
    <td>Januar </td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Februar </td>
    <td>$80</td>
  </tr>
  <tr>
    <td>März </td>
    <td>$90</td>
  </tr>
  </tbody>
</table>

Farbige Kopfzeile:

Monatliche	Einsparungen
Summe	$270
Januar	$100
Februar	$80
März	$90

<table class="table table--color-header">
  <thead>
  <tr>
    <th>Monatliche</th>
    <th>Einsparungen</th>
  </tr>
  </thead>
  <tfoot>
  <tr>
    <td>Summe </td>
    <td>$270</td>
  </tr>
  </tfoot>
  <tbody>
  <tr>
    <td>Januar </td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Februar </td>
    <td>$80</td>
  </tr>
  <tr>
    <td>März </td>
    <td>$90</td>
  </tr>
  </tbody>
</table>

Tabelle mit Rahmen

Monatliche	Einsparungen
Januar	$100
Februar	$80
März	$90
Summe	$270

<table class="table table--bordered">
  <thead>
  <tr>
    <th>Monatliche</th>
    <th>Einsparungen</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Januar </td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Februar </td>
    <td>$80</td>
  </tr>
  <tr>
    <td>März </td>
    <td>$90</td>
  </tr>
  <tr>
    <td>Summe </td>
    <td>$270</td>
  </tr>
  </tbody>
</table>

Tabelle mit Streifen

Monatliche	Einsparungen
Januar	$100
Februar	$80
März	$90
Summe	$270

<table class="table table--striped">
  <thead>
  <tr>
    <th>Monatliche</th>
    <th>Einsparungen</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Januar </td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Februar </td>
    <td>$80</td>
  </tr>
  <tr>
    <td>März </td>
    <td>$90</td>
  </tr>
  <tr>
    <td>Summe </td>
    <td>$270</td>
  </tr>
  </tbody>
</table>

Tabelle mit dynamischer Hintergrundfarbe

Monatliche	Einsparungen
Januar	$100
Februar	$80
März	$90
Summe	$270

<table class="table table--hover">
  <thead>
  <tr>
    <th>Monatliche</th>
    <th>Einsparungen</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Januar </td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Februar </td>
    <td>$80</td>
  </tr>
  <tr>
    <td>März </td>
    <td>$90</td>
  </tr>
  <tr>
    <td>Summe </td>
    <td>$270</td>
  </tr>
  </tbody>
</table>