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>
War dieser Beitrag hilfreich?
0 von 0 fanden dies hilfreich

Kommentare

0 Kommentare

Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.

Beiträge in diesem Abschnitt

Weitere anzeigen