table td / th • Tabellenzellen

th und td: Tabellenkopf, Tabellenzelle

Tabellenzellen werden durch th- oder td-Elemente erzeugt und müssen innerhalb von tr-Elementen sitzen. Eine Tabellenzeile tr kann beliebig viele Tabellenzellen und Kopfzellen enthalten.

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 zwischen dem öffnenden und schließenden td-Tag wird linksbündig in normaler Schrift gesetzt.

<table>
	<tr><th>Name</th><th>Farbe</th></tr>
	<tr><td>Hasso</td><td>schwarz</td></tr>
	<tr><td>Fido</td><td>weiß</td></tr>
</table>

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.

Tabellenzellen verbinden mit rowspan / colspan

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

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

In allen tr-Elementen einer Tabelle muss dieselbe Zahl von td- bzw. th-Elementen liegen. Das rowspan- bzw. colspan-Attribut verbindet neben- oder untereinander liegende Tabellenzellen.

<table>
	<tr>
		<th scope="row">Tag</th>
		<th>Montag</th>
		<th>Dienstag</th>
		<th>Mittwoch</th>
		<th>Donnerstag</th>
		<th>Freitag</th>
	</tr>
	<tr>
		<th scope="row">1. Stunde</th>
		<td rowspan="2">Physik</td> 
		<td colspan="3">Freistunden</td> 
		<td rowspan="2">Sport</td> 
	</tr>
	<tr>
		<th scope="row">2. Stunde</th>
		<td>Mathematik</td>
		<td rowspan="2">Deutsch</td>
		<td>Englisch</td>
	</tr>
	<tr>
		<th scope="row">3. Stunde</th>
		<td>Geschichte</td>
		<td>Deutsch</td>
		<td>Chemie</td>
		<td>Kunst</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.

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

Tabellenzellen in th-Elementen 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

scope weist einer Menge von Datenzellen eine Headerzelle zu. Die vier möglichen Werte sind col, colgroup, row und rowgroup.

abbr

gekürzte Version des Inhalts einer Zelle

align deprecated / veraltet

Richtet Tabellenzellen anhand eines Zeichens (z.B. eines Kommas oder eines "%"-Zeichens) aus.

axis deprecated / veraltet

erzeugt eine Liste von Kategorienamen, um Spalten oder Zeilen einer Tabelle zu gruppieren.

char deprecated / veraltet

Zeichen für die Ausrichtung von Dezimalstellen einer Zelle.

charoff deprecated / veraltet

ganze Zahl für den Abstand des Zeichens vom Zellenrand.

Wenn Preise – also Ziffern mit Nachkommastellen – bündig sitzen sollen, muss die Schrift nicht-proportionale Zahlen unterstützen, bei der allen Ziffern denselben Platz einnehmen.

Barrierefreiheit: scope, headers und aria-labelledby

Tabellen stellen sind für die kleinen Monitore der mobilen Geräte als auch für Screenreader Hürden. Heute werden sie meist durch Datenpäckchen (»Cards«) mit Hilfe von CSS display: grid oder display: flex ersetzt.

Wenn dennoch Tabellen eingesetzt werden, helfen die Attribute scope, headers und aria den Benutzern von Screenreadern zu einem besseren Verständnis der Beziehungen zwischen Tabellenzellen und ihren Überschriften.