Tabellen

Eine Tabelle ist eine geordnete Zusammenstellung von Texten oder Daten. Die darzustellenden Inhalte werden dabei in Zeilen (waagerecht) und Spalten (senkrecht) gegliedert. Tabellen werden mit dem Element table erstellt und bestehen aus Reihen tr, Spaltenüberschriften th und Spalten td. Daten stehen immer in einem td. Es müssen immer erst die Zeilen und dann die Spalten definiert werden.

Tabelle

Das Element <table> leitet eine Tabelle ein (table = Tabelle).

1<table></table>

Zeile

Durch das Element <tr> wird eine neue Tabellenzeile erstellt, tr = table row = Tabellenzeile. Eine Tabellenzeile kann Spaltenüberschriften oder gewöhnliche Daten enthalten und zuerst muss immer die Zeile definiert werden einer Tabelle.

1<table>
2  <tr></tr>
3</table>

Spaltenüberschriften

<th> erstellt eine Spaltenüberschrift, th = table header = Tabellenkopf. Dies sind die Überschriften der Tabelle. Sie werden automatisch fett und zentriert dargestellt.

1<table>
2  <tr>
3    <th>1. Spaltenüberschrift</th>
4    <th>2. Spaltenüberschrift</th>
5    <th>3. Spaltenüberschrift</th>
6  </tr>
7</table>

Datenzelle

Der Inhalt der Spalten wird durch das Element <td> dargestellt, td = table data = Tabellendaten. Der Bereich eines td wird auch als Tabellenzelle bezeichnet.

 1<table>
 2  <tr>
 3    <th>1. Spaltenüberschrift</th>
 4    <th>2. Spaltenüberschrift</th>
 5    <th>3. Spaltenüberschrift</th>
 6  </tr>
 7  <tr>
 8    <td>1. Spalte</td>
 9    <td>2. Spalte</td>
10    <td>3. Spalte</td>
11  </tr>
12</table>

See the Pen Tabelle by Html Website (@html_website) on CodePen.

Tabellenrahmen

Die Tabellen werden immer ohne Rahmen dargestellt und sehen daher nicht aus wie eine richtige Tabelle. Durch das Attribut border=“1“ kann ein Rahmen angezeigt werden.

See the Pen Tabelle mit Rahmen by Html Website (@html_website) on CodePen.

Datenzelle über mehrere Spalten

Tabellenzellen - <td> - können über mehrere Spalten gehen. Dies wird über das Attribut colspan erreicht. Colspan wird über das Gleichheitszeichen und einem Wert in doppelten Anführungszeichen mitgeteilt, von wie vielen Spalten der Platz eingenommen werden soll. Der Wert für colspan plus die Anzahl der anderen Spalten, darf nicht größer sein als die Gesamtanzahl aller Spalten der Tabelle.

 1<table border="1">
 2  <tr>
 3    <th>Name</th>
 4    <th colspan="2">Telefonnummern</th>
 5  </tr>
 6  <tr>
 7    <td>Howard Stark</td>
 8    <td>555 - 12345</td>
 9    <td>555 - 678910</td>
10  </tr>
11</table>

See the Pen Untitled by Html Website (@html_website) on CodePen.

Datenzelle über mehrere Zeilen

Tabellenzellen - td - können über mehrere Zeilen gehen. Dies wird über das Tabellenattribut rowspan erreicht. Rowspan wird über das Gleichheitszeichen und einem Wert in doppelten Anführungszeichen mitgeteilt, von wie vielen Zeilen der Platz eingenommen werden soll. Der Wert für rowspan plus die Anzahl der anderen Zeilen, darf nicht größer sein als die Gesamtanzahl aller Zeilen der Tabelle.

 1<table border="1">
 2  <tr>
 3    <th>Name:</th>
 4    <td>Howard Stark</td>
 5  </tr>
 6  <tr>
 7    <th rowspan="2">Telefonnummern</th>
 8    <td>555 - 12345</td>
 9  </tr>
10  <tr>
11    <td>555 - 678910</td>
12  </tr>
13</table>

See the Pen Tabelle rowspan by Html Website (@html_website) on CodePen.