 Tabellen Grundgerüst - Erklärung
Eine Tabelle bietet die Möglichkeit Inhalte anzuordnen. Das geschieht indem die Inhalte in einem Raster von Zeilen und Spalten angezeigt werden, ähnlich wie bei einer Tabellenkalkulation.
|
|
Tabellen Grundgerüst
UPDATE 25.01.2011 Hinweise auf Änderungen in HTML 5
Von Webmastern wurden Tabellen dazu benutzt eine Seite zu strukturieren. Dazu werden heute CSS-Layouts verwendet (siehe Rubrik HP-Vorlagen). HTML Tabellen können Informationen enthalten, die statisch, interaktiv (Formular) oder sogar dynamisch sind, wie zum Beispiel die Ergebnisse einer 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 eine Sonderfunktion erfüllen, wenn sie als Überschriftenzelle oder SpaltenÜberschrift deklakariert werden.
|
|
Kaffeemarken
| Marke |
Sorte |
| OnKühl |
ArabicBlack |
| TschiBus |
Browny |
| JaKorb |
DarkRost |
|
HTML unterscheidet grundsätzlich fünf Tabellenelemente die aus jeweils einem öffnenden und schließ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 Aufteilung in Spalten |
| Kopftags
|
<th> … </th> |
Spalten-Überschrift |
| Tabellentitel
|
<caption> ... </caption> |
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.
Wenn ich hier das Attribut (zugeordnetes Merkmal) für den Rand weggelassen hätte, würde der Aufbau schon HTML5-Konform sein, denn alle anderen Tabelleneigenschaften wurden mit CSS-Angaben festgelegt.
|
|
<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>
Die Angaben für Titel und Spaltenüberschriften können auch entfallen (Demo 2).
Tabellenüberschrift
| Head 1 |
Head 2 |
| Zelle 1a |
Zelle 1b |
| Zelle 2a |
Zelle 2b |
| Zelle 3a |
Zelle 3a |
|
| Zelle 1a |
Zelle 1b |
| Zelle 2a |
Zelle 2b |
| Zelle 3a |
Zelle 3a |
|
1 Caption / Tabellentitel
Innerhalb der <caption>-Tags wird Text für den tabellentitel notiert. '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.
2 <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.
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, sans-serif;
font-size: 11px;
font-weight:bold;
color: #0070C0;
line-height: 140%;
padding:2px 0 3px 0;
}
th {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
font-weight:bold;
color: #222222;
line-height: 140%;
background-color:#EFEFEF;
}
Auch für die Inhalte der gewöhnlichen Tabellenzellen wurde mittels CSS die Darstellung festgelegt:
td {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
font-weight:normal;
color: #222222;
padding:3px;
}
Die CSS-Notierungen stehen im Kopf der HTML-Seite innerhalb einer CSS-Deklaration uind wären in dieser Form für sämtliche Tabellen der Seite gültig! Zur expliziten Gestaltung einzelner Tabellen würde mann eigene CSS-Klassen notieren. Ein Beispiel finden Sie auf den Seiten für 'Kopiervorlagen'.
 Quellcode für eine CSS-formatierte Tabelle die
so aussieht
... 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
Tabellenzellen-Attribute
1) Tabellenrand formatieren (außen) mit CSS
2) Zellenrandformatierung mit CSS
3) Tabellen + Zellenrand mit CSS
Kopiervorlagen für CSS-formatierte Tabellen (HTML 5 konform)
Darstellungsprobleme durch 'whitespaces'
|
Home • Tabellen • Einführung Tabellen