Schwarzcode

Nachschlagewerk zur Ergänzung des Unterrichts in Frontend Development – und für mich. Sehr subjektiv gefärbt und ohne Anspruch auf Vollständigkeit.


Tabellen

Tabellen sind Block-Elemente, verhalten sich aber etwas speziell: Sie sind nicht wie andere Blockelemente automatisch 100 % breit, sondern nur so breit, wie ihr Inhalt. Setzt man eine Tabelle auf 100 % Breite, so verteilen sich die Innenabstände der Zellen gleichmässig. Hat eine Tabelle eine per CSS definierte Breite, drück ein Padding auf den Zellen die ganze Tabelle nicht auseinander – sofern genug Platz da ist. Tabellen werden Zeilenweise aufgebaut.

Grundlegende Tabellen-Elemente

  • <table> Tabelle
  • <tr> Tabellenreihe/Zeile, Table Row
  • <td> Tabellenzelle, Table Data
  • <th> Tabellenkopfzelle, Table Head

Erweiterte Tabellen-Elemente

  • <caption> Überschrift
  • <colgroup> Spaltengruppe
  • <col> Spalte einer Spaltengruppe
  • <thead> Tabellenkopf
  • <tfoot> Tabellenfuss
  • <tbody> Tabellenkörper

Tabellen-spezifische CSS-Eigenschaften

border-collapse: [separate/collapse]; /* für das Element <table>, durchgehende Linien oder Rahmen pro Zelle */
border-spacing: 0.3em;                /* für das Element <table>, aussenabstand der Zellen */
vertical-align: [middle/bottom/top];  /* für <td> und <th> */

Mehrspaltige Zellen

Diejenigen Zellen, die Kolonnen (Spalten) überspannen, erhalten das Attribut colspan mit der Anzahl zu überspannender Kolonnen. Ausgangslage ist immer die Zelle rechts.

0

Mehrzeilige Zellen

Diejenigen Zellen, die Zeilen überspannen, erhalten das Attribut rowspan mit der Anzahl zu überspannender Zeilen. Ausgangslage ist immer die Zelle oben.

0

Grössere Tabellen

Wenn möglich sollen Tabellen eine Überschrift <caption> erhalten. Und ab einer bestimmten Länge, kann es sinnvoll sein, die Kopfzellen <th> zusätzlich mit einem Tabellenkopf <thead> und einem Tabellenfuss <tfoot> einzufassen. Der eigentliche Inhalt kommt dann in den Tabellenbody <tbody>.

Möchte man alle Zellen einer Kolonne/Spalte gemeinsam auszeichnen, kann man via Kolonnengruppe <colgroup> einzelnen Kolonnen <col> ansprechen. Das funktioniert aber nur mit mit Hintergrundfarbe oder Border. Das Attribut span definiert wieviele Spalten gemeint sind. Man muss dabei nur soviele Kolonnen nennen, wie gebraucht werden. Im Beispiel hier sinds total 3. Speziell: Kolonnen, die links nicht gebracht werden, müssen trotzdem genannt werden. Probiers mal aus und lösche die HTML-Zeile 4.

Man beachte die Struktur innerhalb der Tabelle:

  • 1. Caption
  • 2. Colgroup
  • 3. Kopf
  • 4. Fuss
  • 5. Body/Inhalt

0

Eine Alternative zur Lösung mit den Kolonnenklassen bieten die CSS-Pseudoklassen :nth-child(). Mehr dazu später.


Verantwortlich:
Jürgen Wössner
E-Mail

Schwarzcode

Nachschlagewerk zur Ergänzung des Unterrichts in Frontend Development – und für mich. Sehr subjektiv gefärbt und ohne Anspruch auf Vollständigkeit.

Aber mit so einem kleinen Bildschirm hier ist das ganze echt nutzlos. Geh mal rüber an einen grösseren Bildschirm.