HTML tr • Zeilen in Tabellen

HTML table tr • Tabellenzeilen

HTML tr erzeugt eine Zeile in einer Tabelle. Eine Tabelle kann beliebig viele Zeilen enthalten. Eine Zeile besteht aus einer oder mehreren Zellen, jede Zelle kann jede Art von Daten enthalten. Die einzelnen Zellen innerhalb einer von tr-Elementen werden durch td- oder th-Elemente erzeugt.

table tr

HTML tr darf nicht innerhalb von th-, td- oder anderen tr-Elementen stehen, wohl aber auch in tbody-, thead- oder tfoot-Elementen. Die Codesequenz ist

<tr><th> hier sind die Inhalte</th></tr> und 
<tr><td> hier sind die Inhalte </td></tr>

Jede Zeile muss dieselbe Zahl von Zellen enthalten. Nur wenn die Tabellenzellen das rowspan- oder colspan-Attribut enthalten, das neben- oder untereinander liegende Zellen verbindet, kann die Zahl der td bzw. th-Elemente variieren.

Wenn eine Zeile in einer Tabelle durch einen Fehler zuwenige Zellen enthält, entsteht eine Lücke am Ende der Tabellenzeile und die Daten der Tabelle stimmen nicht mehr. Enthält eine Tabellenreihe zu viele Zellen, stellen die Browser die überzähligen Zellen am Ende der Reihe dar.

Fehlende Tabellezelle in einer Zeile
Rosen	Tulpen	Mohn
Rosa centifolia	Recreado	Klatschmohn
Rosa gallica	Schlafmohn

Überzählige Tabellezelle in einer Zeile
Obst	Gemüse	Käse
Erdbeeren	Schwarzwurzel	Edamer
Birnen	Blumenkohl	Appenzeller	Gouda

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

HTML-Tabellen sind zeilenorientiert. Nur colgroup- und col-Elemente greifen auf die Spalten einer Tabelle zu.

data-Attribut für Tabellen

Im aktuellen HTML-Standard gibt es die veralteten Attribute align, bgcolor, char, charoff und valign nicht mehr.

Interessanter für tabellarische Daten ist das data-Attribut, da Tabellenzeilen i.d.R. logisch zusammenhängende Daten enthalten.

<tr data-isbn="123456789" data-stock="14" data-published="2017-09-01">
   <td>Welden</td><td>Theodor</td>
   <td>Der geheimnisvolle Rosenstock</td>
</tr>

Mit Hilfe von CSS Attribut-Selektoren lassen sich Tabellen anhand des data-Attributs mit Javascript einfacher durchsuchen und sortieren als anhand der Einträge oder Werte in die einzelnen Zellen einer Tabelle.

var data-isbn = $('tr[data-isbn="123456789"]');

CSS für abwechslende Farben von Tabellenreihen

CSS weist den Zeilen einer HTML-Tabelle abwechselnde Hintergrundfarben zu.

<style>
tr:nth-child(odd) { background-color: gray; }
tr:nth-child(even) { background-color: blue; }
</style>