Tabellen erstellen

6.1 Elemente table und tr

Tabellen in HTML werden verwendet, um Daten in einem tabellarischen Format zu organisieren. Die Haupt-Tags, die zur Erstellung von Tabellen verwendet werden, sind <table>, <tr>, und <td>. Lass uns jeden von ihnen genauer betrachten.

<table>

Das Tag <table> ist ein Container für die gesamte Tabelle. Darin befinden sich die Tabellenzeilen, jede davon wird mit dem Tag <tr> definiert.

Beispiel zur Verwendung:

    
      <table>
        <!-- Tabellenzeilen und Zellen werden hier hinzugefügt -->
      </table>
    
  

Tag <tr> (table row)

Das Tag <tr> kennzeichnet eine Tabellenzeile. Innerhalb des <tr>-Tags befinden sich die Tabellenzellen, jede davon wird mit dem Tag <td> oder <th> definiert.

Beispiel zur Verwendung:

    
      <table>
        <tr>
          <!-- Zellen der Zeile werden hier hinzugefügt -->
        </tr>
      </table>
    
  

6.2 Elemente td und th

Tag <td> (table data)

Das Tag <td> wird verwendet, um eine Datenzelle in einer Tabellenzeile zu definieren. Diese Zellen enthalten die Tabellendaten und befinden sich innerhalb der Zeile, die durch das <tr>-Tag gekennzeichnet ist.

Beispiel zur Verwendung:

    
      <table>
        <tr>
          <td>Zelle 1</td>
          <td>Zelle 2</td>
          <td>Zelle 3</td>
        </tr>
      </table>
    
  

Tag <th> (table head)

Das Tag <th> wird verwendet, um Zellenüberschriften für eine Tabelle zu kennzeichnen. Der Text innerhalb von <th> wird normalerweise fett formatiert und zentriert angezeigt.

Beispiel zur Verwendung:

    
      <table>
        <tr>
          <th>Überschrift 1</th>
          <th>Überschrift 2</th>
          <th>Überschrift 3</th>
        </tr>
      </table>
    
  

Beispiel einer Tabelle:

    
      <table>
        <tr>
          <th>Name</th> <th>Alter</th> <th>Stadt</th>
        </tr>
        <tr>
          <td>Ivan</td> <td>30</td> <td>Toronto</td>
        </tr>
        <tr>
          <td>Maria</td> <td>25</td> <td>Frankfurt</td>
        </tr>
        <tr>
          <td>Nina</td> <td>35</td> <td>Paris</td>
        </tr>
      </table>
    
  

6.3 Tabellenlayout

Tabellen sollten unbedingt mit CSS gestaltet werden — das erhöht die Übersichtlichkeit und Lesbarkeit der Daten erheblich.

Zum Beispiel, wenn du beschlossen hast, jedem Zelle eine Umrandung hinzuzufügen: Eine lobenswerte Sache, aber da jede Zelle eine Umrandung hat, trennt jetzt jede Umrandung zwei Zellen - eine für jede Zelle. 🤦‍♂️

Wenn du möchtest, dass die Umrandung so aussieht, wie du es möchtest, musst du mit CSS die angrenzenden Umrandungen zusammenführen. Dafür gibt es eine spezielle Eigenschaft — border-collapse.

Hier ein Beispiel für eine gute Gestaltung unserer Tabelle:

    
      <table>
        <tr>
          <th>Name</th> <th>Alter</th> <th>Stadt</th>
        </tr>
        <tr>
          <td>Ivan</td> <td>30</td> <td>Toronto</td>
        </tr>
        <tr>
          <td>Maria</td> <td>25</td> <td>Frankfurt</td>
        </tr>
        <tr>
          <td>Nina</td> <td>35</td> <td>Paris</td>
        </tr>
      </table>
    
  

    
      table {
        width: 50%; /* Setzt die Breite der Tabelle */
        border-collapse: collapse; /* Entfernt doppelte Umrandungen zwischen den Zellen */
      }

      th, td {
        border: 1px solid black; /* Setzt eine Umrandung für die Zellen */
        padding: 8px; /* Fügt Innenabstände in den Zellen ein */
        text-align: left; /* Richtet den Text linksbündig aus */
      }

      th {
        background-color: #f2f2f2; /* Setzt die Hintergrundfarbe für die Überschriften */
      }
    
  

Hier sehen wir, dass:

• Jede Zelle hat eine Umrandung von 1 Pixel in schwarzer Farbe
• Doppelte Umrandungen zwischen den Zellen wurden entfernt
• Jede Zelle hat Innenabstände, sodass der Text nicht an den Rahmen klebt
• Die Überschriftenzellen haben eine eigene Hintergrundfarbe

Wunderschön!