table td / th • Tabellenzellen

HTML td erzeugt eine Tabellenzelle, die Daten, Text oder Bilder aufnehmen kann. th erzeugt eine Kopfzelle für Überschriften. Selbst eine vollständige Tabelle kann in einer Tabellenzelle sitzen. rowspan und colspan sind Attribute für td und th, die neben- oder übereinander liegende Zellen miteinander verbinden.

HTML td – Tabellen-Zellen

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.

NameFarbe
Hassoschwarz
Fidoweiß
<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.

Tag Montag Dienstag Mittwoch Donnerstag Freitag
1. Stunde Physik Freistunden Sport
2. Stunde Mathematik Deutsch Englisch
3. Stunde Geschichte Deutsch Chemie Kunst
<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.

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

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.

Montag

Physik

Physik

Geschichte

Dienstag

Freistunde

Mathematik

Deutsch

Mittwoch

Freistunde

Deutsch

Deutsch

Donnertag

Freistunde

Englisch

Chemie

Freitag

Sport

Sport

Kunst

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.

Suchen auf mediaevent.de