 Tabellen Grundgerüst - Erklärung
Eine Tabelle bietet die Möglichkeit Inhalte anzuordnen. Das geschieht indem sie in einem Raster von Zeilen und Spalten verteilt werden, ähnlich wie bei einer Tabellenkalkulation.
Von Webmastern werden Tabellen auch dazu benutzt, eine Seite zu strukturieren. HTML Tabellen können Informationen enthalten, die statisch, interaktiv (Formular) oder sogar dynamisch sind, wie zum Beispiel die Ergebnisse einer PHP-Datenbankabfrage. Auch im Zeitalter der CSS spielen Tabellen noch eine wichtige Rolle.
In seiner einfachsten Form stellt eine Tabelle Informationen innerhalb von Zellen dar, die aus der Aufteilung eines viereckigen Bereichs in Zeilen (Reihen) und Spalten gebildet werden.
Die gewöhnlichen Zellen enthalten normal dargestellte Daten, einige Zellen können aber eine Sonderfunktion erfüllen, wenn sie als Überschriftenzelle deklakariert wurden.
|
|
Kaffeemarken
| Marke |
Brand |
| OnKühl |
ArabicBlack |
| TschiBus |
Browny |
| JaKorb |
DarkRost |
|
HTML unterscheidet grundsätzlich vier Tabellenelemente die aus jeweils einem öffnenden und schleißenden Tag bestehen.
| Element |
Schreibweise der Tags |
Bedeutung |
| Tabellentags |
<table> … </table> |
leitet eine Tabelle ein und schließt sie ab |
| Zeilentags |
<tr>… </tr> |
für Tabellenzeilen (Reihen) |
| Zellentags |
<td> … </td> |
Zellen zur Spaltenaufteilung |
| Überschrift
|
<th> … </th> |
Sonderrolle |
|
Veranschaulichung
Das Beispiel zeigt den Quellcode für eine grundlegende Tabelle mit 2 Spalten ohne Schnörkel und zusätzliche Notierung von Eigenschaften, bis auf den Rand (border) der hier mit 1 Pixel festgelegt wurde, um die Aufteilung zu verdeutlichen.
<table border="1">
<caption>Tabellenüberschrift</caption>
<tr> <th>Head 1</th> <th>Head 2</th> </tr>
<tr> <td>Zelle 1a</td> <td>Zelle 1b</td> </tr>
<tr> <td>Zelle 2a</td> <td>Zelle 2b</td> </tr>
<tr> <td>Zelle 3a</td> <td>Zelle 3b</td> </tr>
</table>
|
|
Tabellenüberschrift
| Head 1 |
Head 2 |
| Zelle 1a |
Zelle 1b |
| Zelle 2a |
Zelle 2b |
| Zelle 3a |
Zelle 3a |
|
<th> / Spaltenüberschrift
Inhalte von <th>-Zellen werden als Spaltenüberschrift interpretiert. Sie können also innerhalb der Tabelle eine Spaltenüberschrift notieren, die üblicherweise zentriert dargestellt und hervorgehoben formatiert wird.
Caption / Überschrift
Sie bemerken, dass ich ihnen oben die <caption>-Tags unterschlagen habe. 'Caption' steht für Überschrift. Sie könne also eine vom eigentlichen Tabelleninhalt separierte Tabellenüberschrift notieren, die gewöhnich zentriert dargestellt und hervorgehoben formatiert wird.
Textgestaltung mit CSS
Zur Formatierung von 'caption' und 'th' habe ich auf dieser Seite eigene CSS-Anweisungen eingesetzt. Dazu wurde im HEAD-Bereich folgender Code notiert:
caption {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight:bold;
color: #0070C0;
line-height: 140%;
}
th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight:bold;
color: #222222;
line-height: 140%;
}
Auch für die Inhalte der gewöhnlichen Tabellenzellen wurde mittels CSS die Darstellung festgelegt:
td {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight:normal;
color: #222222;
line-height: 140%;
}
... lesen sie nun weiter auf der Beispielseite 'Tabellen-Attribute' und erfahren, welche weiteren Attribute sie in den HTML-Tags für Tabellen eintragen können.
 Tabellen-Attribute
1) Tabellenrand formatieren (außen) mit CSS
2) Zellenrandformatierung mit CSS
3) Tabellen + Zellenrand mit CSS
Darstellungsprobleme durch 'whitespaces'
|
WWW.WEB-TOOLBOX.NET
ZURÜCK