CSS, HTML und Javascript mit {stil}

table td / th • Zelle einer HTML-Tabelle

HTML table: td – Tabellen-Zellen

HTML td erzeugt eine Tabellenzelle als Behälter für Daten, Text oder Bilder. Selbst eine vollständige Tabelle kann in einer Tabellenzelle sitzen.

th erzeugt eine Kopfzelle für Überschriften.

Eine Tabellenzeile tr kann beliebig viele Tabellenzellen und Kopfzellen enthalten.

Tabellenzellen werden durch th- oder td-Tags erzeugt und müssen innerhalb von tr-Tags sitzen. Während th für den Kopf der Tabelle reserviert ist, kann in einer Tabellenzelle mit td belieber Inhalt stehen. Die Browser rendern den Inhalt von th-Tags fett und zentriert; der Inhalt von td-Tags wird linksbündig in normaler Schrift gesetzt.

Bis auf diesen visuellen Unterschied verhalten sich th- und td-Elemente gleich.

Ohne besondere Formatierung durch CSS zeigen die Browser td und th ohne Rahmen. Mit CSS border zeigen Tabellenzellen einen doppelten Rahmen, da Tabellenzellen einen kleinen Abstand voneinander haben. CSS border-collapse eliminiert den Abstand und die Rahmen kollabieren zu einer Linie.

HTML td

HTML table erzeugt mit tr, td und th ein Raster für die Organisation von Daten in Zeilen und Spalten. Die Folge der Tags innerhalb einer Tabellenzeile ist

<table>
<tr><td> hier stehen die Inhalte </td></tr>
</table>

In allen Zeilen einer Tabelle muss dieselbe Zahl von Zellen liegen. Das rowspan- bzw. colspan-Attribut verbindet neben- oder untereinander liegende Tabellenzellen.

MontagDienstagMittwoch DonnerstagFreitag
Physik Freistunden Sport
MathematikDeutschEnglisch
<table>
  <tr>
     <th>Montag</th><th>Dienstag</th><th>Mittwoch</th>
     <th>Donnerstag</th><th>Freitag</th>
  </tr>
  <tr>
     <td rowspan="2">Physik</td>
     <td colspan="3">Freistunden</td>
     <td rowspan="2">Sport</td>
  </tr>
  <tr>
     <td>Mathematik</td><td>Deutsch</td><td>Englisch</td>
  </tr>
</table>

HTML th

th zeigt die Zellen einer HTML-Tabelle als Tabellenkopf. In Kopfzellen können Überschriften und Informationen über die Spalten oder Zeilen einer Tabelle stehen. Ohne CSS zeigt th den Inhalt der Tabellenzelle fett und zentriert.

In th können Überschriften und Informationen über die Spalten oder Zeilen einer Tabelle stehen.

th-Tags müssen nicht unbedingt die erste Zeile einer Tabelle bilden. Ebensogut kann die jeweils die erste Tabellenzelle der Tabellenreihen durch ein th-Tag als Header eingesetzt werden.

RosenTulpenMohn
Rosa centifoliaRecreadoKlatschmohn
Rosa gallicaTulipa tardaSchlafmohn
RosenRosa centifoliaRosa gallica
TulpenRecreadoTulipa tarda
Rosa gallicaTulipa tardaSchlafmohn

Tabellenzellen in th-Tags werden vom Browser mit einem Rahmen angezeigt, wenn keine CSS-Stile für th festgelegt sind. Ohne CSS wird jede Tabellenzelle so breit wie ihr Inhalt. Wenn die Tabelle die gesamte Breite der umfassenden Box erreicht hat, werden Texte in th-Tags umgebrochen.

<table>
  <tr>
    <th>Rosen</th><th>Tulpen</th><th>Mohn</th>
  </tr>
  <tr>
    <td>Rosa centifolia</td><td>Recreado</td><td>Klatschmohn</td>
  </tr>
    …
</table>

<table>
  <tr>
    <th>Rosen</th><td>Rosa centifolia</td><td>Rosa gallica</td>
  </tr>
  <tr>
    <th>Tulpen</th><td>Recreado</td><td>Tulipa tarda</td>
  </tr>
   …
</table>

Attribute für td und th

colspan
spannt eine Zelle über mehrere Spalten auf. Es kann auch mit dem Attribut rowspan kombiniert werden, um eine Tabellenzelle über mehrere Zeilen und Spalten aufzubauen.
headers
ist eine Liste von Zellennamen, die aus den id-Attributen der Zellen stammen. Das Attribut headers wird von Browsern für die Sprachausgabe benutzt und wird von den meisten Screenbrowsern nicht erkannt.
rowspan
erlaubt einer Zelle, sich über zwei oder mehrere Zeilen zu erstrecken. Es kann zusammen mit dem Attribut colspan benutzt werden, mit dem sich eine Zelle über mehrere Spalten erstrecken kann.
scope (nicht mehr in HTML5)
scope weist einer Menge von Datenzellen eine Headerzelle zu. Die vier möglichen Werte sind col, colgroup, row und rowgroup.
abbr (nicht mehr in HTML5)
gekürzte Version des Inhalts einer Zelle
align (nicht mehr in HTML5)
Richtet Tabellenzellen anhand eines Zeichens (z.B. eines Kommas oder eines "%"-Zeichens) aus. In XHTML ist der einzige zuweisbare Wert "char".
axis (nicht mehr in HTML5)
erzeugt eine Liste von Kategorienamen, um Spalten oder Zeilen einer Tabelle zu gruppieren.
char (nicht mehr in HTML5)
Zeichen für die Ausrichtung von Dezimalstellen einer Zelle.
charoff (nicht mehr in HTML5)
ganze Zahl für den Abstand des Zeichens vom Zellenrand.
HTML table: tr – Tabellen-Zeilen