Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Inhaltsbereich

Eine einfache Tabelle: table, tr und td

Es gibt nur wenige HTML-Elemente, die zum Erstellen einer einfachen Tabelle benötigt werden:

  • Die Tabelle: table
    Beginn und Ende der Tabelle werden mithilfe der Tags <table> und </table> markiert.
  • Die Tabellenzeilen: tr
    tr steht für table row. <tr> und </tr> kennzeichnen den Beginn und das Ende einer Zeile.
  • Die Tabellenzellen: td
    td heißt table data und enthält die Daten der Tabelle. Die Tags <td> und </td> begrenzen die einzelnen Zellen in der Tabelle. Alle Textzeichen und Grafiken in der Tabelle stehen zwischen <td> und </td>.

Tabellen sind nicht schwierig, sie werden im Quelltext nur sehr schnell sehr unübersichtlich. Achten Sie bei Tabellen von Anfang an auf korrekte Einrückungen, um den Quelltext lesbar und übersichtlich zu halten. Während der Bearbeitung einer Tabelle bietet es sich an, die Rahmenlinien mit dem Attribut border sichtbar zu machen:

01 <table>
02 <tr>
03 <td>Zeile 1, Spalte 1</td>
04 <td> Zeile 1, Spalte 2</td>
05 </tr>
06 <tr>
07 <td>Zeile 2, Spalte 1</td>
08 <td> Zeile 2, Spalte 2</td>
09 </tr>
10 </table>

Im Browser sieht diese Tabelle so aus:

Abbildung 10.7: Tabelle mit zwei Zeilen und zwei Spalten
Abbildung 10.7: Tabelle mit zwei Zeilen und zwei Spalten

Es gibt noch das Element th wie table heading, das für Überschriftenzeilen in einer Tabelle benutzt werden sollte. th verhält sich genau wie td, mit dem Unterschied, dass der Zellinhalt zwischen <th> und </th> von den meisten Browsern fett und zentriert dargestellt wird.

Im Quelltext stehen die Spalten untereinander

Die Unübersichtlichkeit des Quelltextes von Tabellen kommt daher, dass die Darstellung im Quelltext nicht der Darstellung im Browser entspricht.

Während im Browser eine Tabelle aus waagerechten Zeilen und senkrechten Spalten besteht, gibt es im Quelltext nur waagerechte Zeilen (tr) und Zellen (td). Es gibt kein Element zur Erstellung von Spalten, denn die Spalten ergeben sich aus der Anzahl der Zellen innerhalb der Zeilen. Tabellen sind im Quelltext verwirrend:

  • Im Browser stehen die Spalten einer Tabelle nebeneinander.
  • Im Quelltext stehen die Spalten einer Tabelle untereinander.