CSS-Tabellen

❮ Vorige Nächste ❯

In diesem Kapitel erfahren Sie, wie man Tabellen stylen kann. Wir können die Farbe der Überschriften oder Zeilen ändern. Lassen Sie uns ein Beispiel betrachten.

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      table {
        width: 100%;
        border-collapse: collapse;
      }
      table, th, td {
        border: 1px solid black;
      }
      thead {
        background-color: #1c87c9;
        color: #ffffff;
      }
      th {
        text-align: center;
        height: 50px;
      }
      tbody tr:nth-child(odd) {
        background: #ffffff;
      }
      tbody tr:nth-child(even) {
        background: #f4f4f4;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Überschrift</th>
          <th>Überschrift</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Irgendein Text</td>
          <td>Irgendein Text</td>
        </tr>
        <tr>
          <td>Irgendein Text</td>
          <td>Irgendein Text</td>
        </tr>
        <tr>
          <td>Irgendein Text</td>
          <td>Irgendein Text</td>
        </tr>
        <tr>
          <td>Irgendein Text</td>
          <td>Irgendein Text</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Versuch es selber!

Jetzt lassen Sie uns den Code erklären.

Wie Sie sehen, besteht unsere Tabelle aus zwei Teilen: Der erste Teil ist unser <thead>, wo wir die Überschriften platziert haben, und der zweite Teil ist <tbody>, wo wir ein Text platziert haben. Die Tabelle hat einen schwarzen Rand, dafür haben wir die Eigenschaft border verwendet. Wir können eine beliebige Farbe verwenden und auch den Stil von Rändern wählen.

Table color

Wie Sie sehen, ist der Teil <thead> unserer Tabelle blau und wo immer wir ein Text schreiben, ist er weiß. Für den blauen Hintergrund verwenden wir die Eigenschaft background-color und für den weißen Text verwenden wir die Eigenschaft color. Die anderen Texte haben wir mit schwarzer Farbe geschrieben.

Collapse Borders

Die Eigenschaft border-collapse legt fest, ob die Tabellenrahmen zu einem einzelnen Rand zusammengeklappt oder getrennt werden:

Table Width und Height

Die Tabelle hat auch Eigenschaften width und height. Bemerken Sie bitte, dass wir diese Eigenschaften in unserem Stil verwenden. Die Eigenschaft width verwenden wir für alle Tabellen und die Eigenschaft height für alle Überschriften. Wir können diese Eigenschaften mit Pixeln und Prozent verwenden

Table Text Alignment

Wie Sie schon wissen, verwenden wir die Eigenschaft text aligment für die Textposition. In unserem Beispiel verwenden wir die Eigenschaft text-aligment für die Überschrift. Dazu verwenden wir "text-align: center", der Text kann auch links und rechts platziert werden.

Table Padding

Um den Abstand zwischen dem Rand und dem Inhalt einer Tabelle einzustellen, verwenden Sie die Eigenschaft padding mit den Elementen <td> und <th>:

td {
  padding: 15px;
}