Tabellen
Tabellenstruktur
Tabellen sind komplexere Listen, sie bieten eine strenge, zweidimensionale Struktur für Inhalt, der in koordinierten Zellen (Zeilen und Kolonnen) gefasst werden möchte. Zusätzlich können für eine Tabelle Überschriften, Kopf- und Fuss-Zeilen und dergleichen mehr festgelegt werden.
<table>...</table>, <tr>..</tr> und <td>...</td>
Die Tabellen-Tags <table>...</table> beinhalten jeweils eine ganze Tabelle.
Jede Tabellenzeile wird von den <tr>...</tr> (Table-Row) Tags eingefasst.
Mehrere Tabellenzellen bilden eine Zeile. Jede Zelle wird durch <td>...</td> Tags (Table-Data) begrenzt,
nur hier hinein kommt ein Zelleninhalt.
Eine Tabelle wird folglich definiert durch eine bestimmte Anzahl Zellen
pro Zeile in der Breite und eine Anzahl Zeilen in der Höhe, die Zellenmasse werden
vorerst durch den Platzbedarf der Zellinhalte bestimmt.
<table>
<tr>
<td>1A,</td> <td>1B,</td> <td>1C,</td> <td>1D,</td>
</tr>
<tr>
<td>2A,</td> <td>2B,</td> <td>2C,</td> <td>2D,</td>
</tr>
<tr>
<td>3A,</td> <td>3B,</td> <td>3C,</td> <td>3D,</td>
</tr>
</table>
So sehen die Daten in der unformatierten Tabelle aus:
| 1A, | 1B, | 1C, | 1D, |
| 2A, | 2B, | 2C, | 2D, |
| 3A, | 3B, | 3C, | 3D, |
summary='...'
Das table-Tag kann ein summary-Attribut beinhalten <table
summary="Wissenswertes über diese Tabelle">, welches für nicht visuelle Medien
(wie Braillezeile und Sprachausgabe) Informationen über die Tabelle aufnimmt.
Tabellen Überschrift
<caption>...</caption>
Das <caption>-Tag platziert eine Überschrift zu einer Tabelle.
Das caption-Tag muss direkt hinter dem table-Tag stehen, auch noch vor dem colgroup-Tag.
Es gibt nur eine Überschrift pro Tabelle.
Der Überschrifttext steht außerhalb der Tabelle, per Default oberhalb und ist
eingemittet (der Tag kann natürlich durch CSS-Eigenschaften formatiert werden).
Zellen Überschriften
<th>...</th>
scope='col' / 'row'
abbr='...'
Die <th>...</th> Tags definieren Überschriften (Table-Heads)
und ersetzen die <td>...</td>-Tags für die Zelleninhalte in der ersten Zeile
oder / und in der jeweils ersten Zelle einer Zeile.
Ohne weitere Style-Angaben werden th-Zellinhalte fett und zentriert dargestellt.
Für alternative Ausgabegeräte soll dem th-Tag das Attribut scope='col'
für Kolonne (Spalte) und 'row' für Reihe (Zeile) hinzugefügt werden.
Zusätzlich kann bei grossen Überschriften deren Kurzform (Abkürzung) als th-Attribut
angegeben werden: abbr='A'
style='speak-header:always'
Weiter lässt sich als Style im th-Tag angeben, ob bei der Sprachausgabe einer Tabelle,
die Spaltenüberschrift vor jeder Datenzelle erneut vorgelesen wird 'speak-header:always',
oder nur einmal 'speak-header:once'.
Tabellen- Kopfzeile, Fusszeile und Bodyzeilen
<thead>...</thead>, <tfoot>...</tfoot>, <tbody>..</tbody>
Diese drei Tags umschliessen die normalen Tags für die Zeilen (tr). Ihre Nutzung ist freiwillig, aber wenn, dann kommt die Fusszeile unmittelbar nach der Kopfzeile und noch vor den Body-Zeilen. Das Tag für Body-Zeilen darf mehrmals vorkommen, so können inhaltlich zusammenhängende Tabellenzeilen gruppiert, identifiziert und per CSS formatiert werden. Kopf- und Fusszeilen werden bei einer sich im Ausdruck über mehrere Seiten erstreckender Tabelle wiederholt.
Tabelle fertig
Nur damit die Tabelle und Zellen im folgenden besser ersichtlich sind, habe ich der Tabelle hier
eine Breite gegeben, width='...'. Auch der Rahmen und die Hintergrundfarbe müsste der Tabelle aber per CSS zugeordnet werden.
Zur Identifizierung sollte der Tabelle deshalb noch eine id='...'
gegeben werden, für die CSS-Formatierung könnten in bestimmten Elementen
auch noch Klassifizierungen vorgenommen werden: class='...'.
| Kopfzeile | Spalte A | Spalte B | Spalte C |
|---|---|---|---|
| Fusszeile | |||
| Zeile 1 | 1a | 1b | 1c |
| Zeile 2 | 2a | 2b | 2c |
| Zeile 3 | 3a | 3b | 3c |
Alle diese Elemente und Attribute machen eine korrekt erstellte Tabelle aus, die über dies maschinenlesbare Informationen bereitstellt.
<table id='tabelle-X' summary='Dies ist eine Beispiel-Tabelle'
bgcolor="#ffffcc" width="50%" border="1px">
<caption>
Eine komplette Tabelle
</caption>
<thead>
<tr>
<td>Kopfzeile</td>
<th scope='col' abbr='A'>Spalte A</th>
<th scope='col' abbr='B'>Spalte B</th>
<th scope='col' abbr='C'>Spalte C</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan='4'>Fusszeile</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope='row'>Zeile 1</th>
<td>1a</td>
<td>1b</td>
<td>1c</td>
</tr>
<tr>
<th scope='row'>Zeile 2</th>
<td>2a</td>
<td>2b</td>
<td>2c</td>
</tr>
<tr>
<th scope='row'>Zeile 3</th>
<td>3a</td>
<td>3b</td>
<td>3c</td>
</tr>
</tbody>
</table>
Kolonnen-Breite
<colcroup><col /></colcroup>
Die Breite je Kolonne kann durch eine systematische Angabe vorgegeben werden. Gleich nach dem table-Opentag, welches die Gesammtbreite festlegt, durch Angabe in Pixel (px), in Prozenten der Tabellenbreite (%) oder als Proportionen (*) zueinander:
<table width="50%"> <colgroup> <col width="4*" /> <col width="2*" /> <col width="1*" /> </colgroup>
Zellen-Masse
Attribut width="..."
Die Zellenbreite richtet sich nach dem grössten Inhalt in der Kolonne. Das Attribut width= sollte natürlich besser im CSS verwendet werden, dazu werden entweder alle Zellen gleich behandelt, oder einzelne Zellen (th, td) bzw. Zeilen (tr) oder Spalten (col) werden klassifiziert oder gar identifiziert.
| 0 | 1 | 2 | 3 |
|---|---|---|---|
| a | a | aa | aaa |
| zzz | zzz | zzzzzz | zzzzzzzzz |
Falls ich, unbeachtet des Inhaltes, alles gleich grosse Zellen wünsche, können in irgendwelchen Zellen (vorzugsweise in der obersten Zeile) mit dem Attribut width= die Kolonnenbreiten festgeschrieben werden.
Die Tabellen- und Zellen-Grösse kann ein Prozentsatz der Fenster- und
Tabellen-Breite sein oder in Pixeln angegeben werden.
Die Totalbreite von Zellen und der Tabelle in Pixeln schliesst die Masse von
border und cellpadding mit ein. <th width="70px">1</th>
| 1 | 2 | 3 | |
|---|---|---|---|
| a | a | aa | aaa |
| zzz | zzz | zzzzzz | zzzzzzzzz |
Mehrzellige Zellen
rowspan="..." colspan="..."
Mit dem Attribut rowspan und dem Attribut colspan
im th-Tag oder im td-Tag, kann angegeben werden, über wieviele Zeilen und Kolonnen
sich eine Zelle spannt (eine Zelle, die über 2 Zeilen geht, muss auf der
nächsten Zeile nicht noch einmal beschrieben werden).
Eine Mehrzellige Zelle wird immer von oben links her definiert.:
| 2 Zeilen 2 Kolonnen |
2 Kolonnen | ||
|---|---|---|---|
| X | Y | ||
| 2 Zeilen | 1 | 1X | 2X |
| 2 | 2X | 2Y | |
<table cellpadding="4">
<tr>
<th rowspan="2" colspan="2">2 Zeilen<br />2 Kolonnen</th>
<th colspan="2">2 Kolonnen</th>
</tr>
<tr>
<th>X</th>
<th>Y</th>
</tr>
<tr>
<th rowspan="2">2 Zeilen</th>
<th>1</th>
<td>1X</td>
<td>2X</td>
</tr>
<tr>
<th>2</th>
<td>2X</td>
<td>2Y</td>
</tr>
</table>
Durch CSS ersetzte Attribute
Die folgenden Darstellungen geben viel Aufschluss über Tabelleneigenschaften. Nichts desto trotz, sind richtige Stylesheets wie in CSS für Tabellen, den folgenden, veralteten Attributen vorzuziehen!
Rahmen und Abstände
border=, cellspacing=, cellpadding=
Die folgenden 2 Tabellen unterscheiden sich nur in 3 Attribut-Werten des Table-Opentags. Diese definieren die Dicke des schattierten Rahmens (border), die Abstände vom Rahmen zu den Zellen / Abstände zwischen den Zellen selbst (cellspacing) und Abstand vom Zellrand zum Zellinhalt (cellpadding). Ohne Angabe von Border wird die Tabelle ohne Raster dargestellt (siehe die erste Tabelle anfangs Seite).
<table align="left" border="2px" cellspacing="10px" cellpadding="25px">
<table border="10px" cellspacing="2px" cellpadding="5px">
| r1c1 | r1c2 | r1c3 | r1c4 |
|---|---|---|---|
| r2c1 | r2c2 | r2c3 | r2c4 |
| r3c1 | r3c2 | r3c3 | r3c4 |
| r1c1 | r1c2 | r1c3 | r1c4 |
|---|---|---|---|
| r2c1 | r2c2 | r2c3 | r2c4 |
| r3c1 | r3c2 | r3c3 | r3c4 |
Die Tabellen kann man (wie Bilder) von Text umfliessen lassen:
im <table> Opentag z.B. mit dem Attribut align="left"; um das
Allignement zu brechen nutzt man das <br clear="all"> Tag!
(Align Beispiele mit Bildern anschauen)
Ausrichtung
align="left/center/right", valign="top/middle/bottom"
Jeder TabellenReihe (im tr-Tag) oder jeder Zelle (im th-Tag oder im td-Tag)
kann gesagt werden, wie die Daten innerhalb der Zellen ausgerichtet werden sollen
(sofern die Zellen überhaupt gross genug sind, und es nicht von einem
zu grossem cellpadding verhindert wird).
| left | center | Right | |
|---|---|---|---|
| Top |
X | ||
Middle |
X | ||
Bottom |
X |
Eine Zelle ohne Inhalt kann nicht transparent dargestellt werden, darum mindestens einen Zeilenumbruch (br-Tag) oder einen bedingten Leerschlag ( ) einfügen.
Rahmenfarben
Im table-Tag lässt sich auch die Rahmenfarbe durch das Attribut
bordercolor="..." bestimmen (allerdings nicht in XHTML und es wäre
sowieso viel besser mit CSS zu stylen).
<table border="15px" bordercolor="RED">
Sogar die Licht- und die Schattenseiten lassen sich umfärben mit
borddercolorlight und bordercolordark:
<table border="15px" borddercolorlight="BLUE" bordercolordark="GREEN">
(Natürlich geht das wieder nur im Internetexplorer)
Hintergrundfarben
Das Attribut für bgcolor=" ", kann für die ganze Reihe in den tr-Tag
oder je Zelle in den td-Tag gesetzt werden:
<table border="0" cellspacing="0" cellpadding="0">
| ORANGE | |||
| RED | GREEN | LAVENDER | PINK |
| LIGHTGREEN | YELLOW | LIME | TURQUOISE |
Hintergrundbilder
Tabellen und Tabellenzellen können auch Hintergrundbilder haben, die Bilder im Hintergrund bestimmen nicht die Zellgrösse! IE7 stellte Hintergrnd -Farben und -Bilder nicht dar, wenn kein Zellinhalt vorhanden ist. Beim FF liegt das Tabellenhintergrundbild auch hinter den 'border'.
 |
 |
|
| hier kann etwas stehen |
Zellhintergründe müssen Zellinhalt haben |
|
Tabellenlayout
Tabellen sind keine Raster zur Positionierung von Bildern.
Vor CSS wurden zerschnittene Bilder in Tabellen ohne Ränder wieder nahtlos zusammengefügt, um pixelgenaue Layouts zu konstruieren; dies ist nun gänzlich aus der Mode gekommen. Beispiel Tabellenlayout
Die oben benutzten Attributte (bordercolor, bordercolorlight, bordercolordark und background) vallidieren als Fehler, da sie in XHTML nicht existieren!
Check den Code.