CSS, HTML und Javascript mit {stil}

HTML tr • Tabellenzeilen

HTML tr – Tabellenzeile

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 werden durch td- oder th-Tags erzeugt.

HTML tr darf nicht innerhalb von th-, td- oder anderen tr-Tags stehen, wohl aber auch in tbody-, thead- oder tfoot-Tags. 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
RosenTulpenMohn
Rosa centifoliaRecreadoKlatschmohn
Rosa gallicaSchlafmohn
Überzählige Tabellezelle in einer Zeile
ObstGemüseKäse
ErdbeerenSchwarzwurzelEdamer
BirnenBlumenkohlAppenzellerGouda
<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-Tags greifen auf die Spalten einer Tabelle zu.

data-Attribut für Tabellen

In HTML5 wird keines der Attribute für das tr-Tag aus HTML4 (align, bgcolor, char, charoff, valign) mehr unterstützt.

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

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

Mit Hilfe von Attribut-Selektoren lassen sich Tabellen anhand des data-Attributs schnell 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

Mit CSS3 können den Zeilen einer HTML-Tabelle abwechselnde Farben zugewiesen werden. Allerdings unterstützen die älteren Version von Internet Explorer (vor IE 9) diese Eigenschaften nicht.

tr:nth-child(odd) { background: gray; }
tr:nth-child(even) { background: blue; }