Tabellen sind ein sehr umstrittenes Thema, da diese oft “missbraucht” werden, um ein Design zu ermöglichen oder um Text zu strukturieren. Dadurch sind oftmals Tabellen sehr verschrien, dennoch denke ich, dass Tabellen noch nicht ganz der Vergangenheit angehören. Wenn eine “richtige” Tabelle erstell werden soll, können diese ruhig noch verwendet werden und nicht in Div-Containern, die mit CSS angepasst werden. Zudem können Tabellen gute verwendet werden, um Formulare zu strukturieren.
Navigation
1. Grundaufbau einer Tabelle
Als erstes wird eine Tabelle <table> mit geöffnet. Die Unterteilung geschieht folgendermaßen: mit <tr> wird eine Spalte geöffnet, in diese können dann mit <td> Zeilen eingefügt werden.
Ein Beispiel:
| Zeile 1 Spalte 1 |
Zeile 1 Spalte 2 |
Zeile 1 Spalte 3 |
| Zeile 2 Spalte 1 |
Zeile 2 Spalte 2 |
Zeile 2 Spalte 3 |
| Zeile 3 Spalte 1 |
Zeile 3 Spalte 2 |
Zeile 3 Spalte 3 |
Der Code:
<table border="1">
<tr>
<td>Zeile 1
Spalte 1</td>
<td>Zeile 1
Spalte 2</td>
<td>Zeile 1
Spalte 3</td>
</tr>
<tr>
<td>Zeile 2
Spalte 1</td>
<td>Zeile 2
Spalte 2</td>
<td>Zeile 2
Spalte 3</td>
</tr>
<tr>
<td>Zeile 3
Spalte 1</td>
<td>Zeile 3
Spalte 2</td>
<td>Zeile 3
Spalte 3</td>
</tr>
</table>
2. Strukturierung einer Tabelle
Eine Tabelle lässt sich in gewissem Maße strukturieren. Es gibt eine Einteilung in Kopf, Fuß und Körper. Der Kopf und der Fuß wiederholen sich teilweise, wenn man eine Tabelle ausdruckt, die über mehrere Seiten geht. Der Kopf wird mit <thead> eingeleitet, der Fuß mit <tfoot> und der Körper mit <tbody>. Des Weiteren empfehle ich, die Daten im Kopf mit <th> anstatt <td> einzuteilen, da dies als Tabellenüberschrift gilt. Natürlich kann <th> auch, ohne weiteres, parallel zu <td> benutzt werden
Ein Beispiel:
| ID | Artikelnummer | Artikel | Preis | Lager |
|---|---|---|---|---|
| ID | Artikelnummer | Artikel | Preis | Lager |
| 1 | B2230L | 22″ Samsung-TFT Monitor | 189,99 € | 12 |
| 2 | B2430L | 24″ Samsung-TFT Monitor | 219,99 € | 4 |
| 3 | B2630L | 26″ Samsung-TFT Monitor | 249,99 € | 15 |
| 4 | B2730L | 27″ Samsung-TFT Monitor | 259,99€ | 8 |
Hier der Code:
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>Artikelnummer</th>
<th>Artikel</th>
<th>Preis</th>
<th>Lager</th>
</tr>
</thead>
<tfoot>
<tr>
<td><strong>ID</strong></td>
<td><strong>Artikelnummer</strong></td>
<td><strong>Artikel</strong></td>
<td><strong>Preis</strong></td>
<td><strong>Lager</strong></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>B2230L</td>
<td>22" Samsung-TFT Monitor</td>
<td>189,99 €</td>
<td>12</td>
</tr>
<tr>
<td>2</td>
<td>B2430L</td>
<td>24" Samsung-TFT Monitor</td>
<td>219,99 €</td>
<td>4</td>
</tr>
<tr>
<td>3</td>
<td>B2630L</td>
<td>26" Samsung-TFT Monitor</td>
<td>249,99 €</td>
<td>15</td>
</tr>
<tr>
<td>4</td>
<td>B2730L</td>
<td>27" Samsung-TFT Monitor</td>
<td>259,99€</td>
<td>8</td>
</tr>
</tbody>
</table>
Die Aufteilung der Tabelle ist keine Pflicht. Es ist jedem selbst überlassen, doch sei dazu gesagt, dass die Reihenfolge wie folgt eingehalten werden muss: Kopf -> Fuß -> Körper. <thead> und <tfoot> dürfen nur einmal pro Tabelle verwendet werden. <tbody> hingegen, darf beliebig oft genutzt werden.
3. Abstände in Tabellen
Den Außenrand der Tabelle, sowie den inneren Rand zum Text, kann man mit Abständen versehen. Der Abstand vom äußeren zum inneren Rand lässt sich mit cellspacing=”" einstellen. Der innere Rand zum Text lässt sich mit cellpadding=”" einstellen. In beiden Fällen, muss immer eine Zahl in px ( = Pixel) oder % angegeben werden, beispielsweise cellpadding=”15px” oder cellspacing=”3%”.
Ein Beispiel:
| Spalte 1 | Zeile 1 |
Hier der Code:
<table border="1px" cellpadding="15px">
<tbody>
<tr>
<td>Spalte 1</td>
<td>Zeile 1</td>
</tr>
</tbody>
</table>
4. Textausrichtung
Der Text in den Zellen lässt sich horizontal und vertikal ausrichten. Links, zentriert, rechts bzw. oben, mittig, unten. Mit align=”" stellt man die horizontale Ausrichtung ein: left, center, right. Mit valign=”" die Vertikale: top, middle, bottom. Beide Attribute können in <td> und <th> verwendet werden. Momentan ist dies noch nicht von allzu großem Belang, da Zellenhöhe und -breite über Style Sheets eingestellt werden. Dennoch stelle ich hier ein kleines Beispiel rein in dem CSS vorkommt:
| Zelle A | Zelle B | Zelle C |
Hier der Code
<table border="2px">
<tbody>
<tr>
<td style="height: 40px; width: 55px;" align="right" valign="top"> Zelle A </td>
<td style="height: 40px; width: 55px;" align="center" valign="middle"> Zelle B </td>
<td style="height: 40px; width: 55px;" align="left" valign="bottom"> Zelle C </td>
</tr>
</tbody>
</table>
Zur Erklärung: Ich habe allen Zellen beispielhaft eine andere Ausrichtung zugewiesen. Ich habe hier ausnahmsweise CSS benutzt um dies zu verdeutlichen. Das Attribut style=”" ist, wie schon auf der Seite “Die Struktur von HTML“ beschrieben, ein reines CSS Hilfsmittel. Grundlegend erst mal der Aufbau eines Befehls am Beispiel der Höhe: height:40px;. Als erstes nenne ich die Option, die verändert werden soll, in diesem falle “height”, danach folgt ein Doppelpunkt, um den Wert einzufügen, hier “40px”. Zum Schluss folgt ein Semikolon, um den Befehl zu beenden. Weitere Informationen zu CSS gibt es bald auf einfachCSS.de.
5. Zellen verbinden
Man kann belieig viele Zellen in einer Zeile oder Spalte miteinander verbinden. Mit dem Attribut colspan=”" wird es für Zellen innerhalb einer Zeile angegeben und mit rowspan=”" für Zellen innerhalb eine Spalte. Als Wert wird immer die Anzahl der Zellen angegeben.
Hier ein Beispiel für colspan=”":
| colspan=”4″ | |||
| colspan=”3″ | Leere Zelle | ||
| colspan=”2″ | Leere Zelle | Leere Zelle | |
| Ohne colspan | Leere Zelle | Leere Zelle | Leere Zelle |
Hier der Code:
<table border="1" cellpadding="5px">
<tbody>
<tr>
<td colspan="4">colspan="4"</td>
</tr>
<tr>
<td colspan="3">colspan="3"</td>
<td>Leere Zelle</td>
</tr>
<tr>
<td colspan="2">colspan="2"</td>
<td>Leere Zelle</td>
<td>Leere Zelle</td>
</tr>
<tr>
<td>Ohne colspan</td>
<td>Leere Zelle</td>
<td>Leere Zelle</td>
<td>Leere Zelle</td>
</tr>
</tbody>
</table>
Hier ein Beispiel für rowspan=”":
| rowspan=”4″ | leere Zelle | leere Zelle | leere Zelle |
| rowspan=”3″ | leere Zelle | leere Zelle | |
| rowspan=”2″ | leere Zelle | ||
| leere Zelle |
Der Code:
<table border="1">
<tbody>
<tr>
<td rowspan="4">rowspan="4"</td>
<td>leere Zelle</td>
<td>leere Zelle</td>
<td>leere Zelle</td>
</tr>
<tr>
<td rowspan="3">rowspan="3"</td>
<td>leere Zelle</td>
<td>leere Zelle</td>
</tr>
<tr>
<td rowspan="2">rowspan="2"</td>
<td>leere Zelle</td>
</tr>
<tr>
<td>leere Zelle</td>
</tr>
</tbody>
</table>
6. Tabellenname
Der Tabelle kann ohne weiteres ein Name bzw. eine Überschrift gegeben werden. Dies geschieht durch <caption>…</caption>, welches direkt nach dem Öffnen der Tabelle, also unter <table>, gesetz wird. Caption ist ein Inline-Element, das heißt man kann es direkt mit anderen Inline-Elementen formatieren oder eine Überschrift setzen.