table td / th • Tabellenzellen

HTML td – Tabellen-Zellen

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.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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.

MontagDienstagMittwochDonnerstagFreitag
Physik Freistunden Sport
MathematikDeutschEnglisch
GeschichteDeutschChemieKunst
<table style="width:98%;">
	<tr>
		<th>Montag</th><th>Dienstag</th><th>Mittwoch</th><th>Donnerstag</th><th>Freitag</th>
	</tr>
	<tr>
		<td rowspan="2">Physik</td>      <!-- 2 untereinander liegende Zellen -->
		<td colspan="3">Freistunden</td> <!-- 3 nebeneinander liegende Zellen -->
		<td rowspan="2">Sport</td>       <!-- 2 untereinander liegende Zellen -->
	</tr>
	<tr>
		<td>Mathematik</td>
		<td rowspan="2">Deutsch</td>  <!-- 2 untereinander liegende Zellen -->
		<td>Englisch</td>
	</tr>
	<tr>
		<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.