Tabellen in HTML

Der Tabellenaufbau ist in folgender Weise zu realisieren:

1. Eröffnung der Tabelle mit <table>
2. Definition der Tabellenzeile mit <tr>
3. Definition der ersten Tabellenzelle der ersten Zeile mit <td> und </td>
4. Definition weiterer Zellen siehe Pkt. 3
5. Abschluss der Zeile mit </tr>
6. Definition weiterer Tabellenzeilen wie unter 2.-5.
7. Abschluss der Tabelle mit </table>

  Beispiel

Spalten und Zeilenüberschriften

Spalten und Zeilenüberschriften werden mit den Tags <th> und </th> gebildet. Diese Tags beinhalten ein automatisches Zentrieren über die Spaltenbreite und ein Textformatierung fett. (siehe Beispiel)

Erzwingen von Zeilenhöhen, Tabellen- und Spaltenbreiten

Die Angaben zu den genannten Optionen können in Prozent oder Pixel erfolgen. Sind diese Angaben kleiner als die größen, die der Zellinhalt beansprucht, werden sie einfach ignoriert.

Wird eine Spaltenbreite definiert, so gilt sie für alle Zeilen dieser Spalte. Eine definierte Zeilenhöhe gilt für alle Spalten dieser Zeile. Die Angabe der Tabellenbreite in Prozent bezieht sich immer auf die verfügbare Bildschirmbreite.

Inhalte von Datenzellen formatieren

<table border="1" width="60%" align="center"> <tr> <th valign="top" align="left" height="60" width="50%">Firma</th> <th align="right">Artikel</th> <th valign="bottom">Preis</th> </tr> <tr> <td>Muster GmbH</td> <td>PC-System</td> <td align="right">1259,00 €</td> </tr> </table>
 
Beispiel

Auto
DK	< 3 Liter	< 6 Liter
	Typ 1	Typ 2
VK	Typ 3	Typ 4

Datenzellen verbinden

In HTML ist es möglich, Tabellen aufzubauen, in denen Tabellenzellen über mehrere Zeilen oder Spalten definiert werden können. die entsprechenden Anweisungen im <td>-Tag lauten:

• <td rowspan="x"> - zeilenübergreifend (x Zeilen)
• <td colspan="x">  - spaltenübergreifend (x Spalten)

Beispiel

Anmerkung: In den darauf folgenden Zeilen/Spalten sind die <td>-Tags entsprechend zu verringern!

Außenrahmen, Gitternetzlinien, Zellabstand

<table cellpadding="x" cellspacing="x" border="x"> ... </table> border="x" - Rahmenstärke in Pixel cellspacing="x" - Stärke der Gitternetzlinien in Pixel cellpadding="x" - Abstand des Zellinhalts zum Zellrand in Pixel

Regeln für Gitternetzlinien

<table border rules="none" | "rows" | "cols" | "groups" | "all"> ... </table> none - keine Gitternetzlinien rows - Gitternetzlinien zwischen den Zeilen cols - Gitternetzlinien zwischen den Spalten groups - Gitternetzlinien zwischen Tabellenkopf, -körper und -fuß all - Gitternetzlinien überall (Standard)

Regeln für Außenrahmen

<table border frame="box" | "void" | "above" | "below" | "hsides" | "vsides" | "lhs" | "rhs"> ... </table> box - Rahmen gesamt void - kein Rahmen above - Rahmen nur oben below - Rahmen nur unten hsides - Rahmen nur oben und unten vsides - Rahmen nur links und rechts lhs - Rahmen nur links rhs - Rahmen nur rechts

Beispiel

Rahmenfarbe

Ab dem IE 2.0 werden auch Farben für die Tabellenrahmen dargestellt.

• <table bordercolor="#xxxxxx"> oder <table bordercolor="Farbname"> - Rahmenfarbe ohne Schatten
• <table bordercolordark="#xxxxxx" bordercolorlight="#xxxxxx"> - Rahmenfarben mit Schatten

bordercolordark - dunkle Farbe
bordercolorlight - helle Farbe

Hintergrundbilder in Tabellen

Als Hintergrundbilder in Tabellen können nur Bilder vom Typ ".gif" oder ".jpg" verwendet werden. Sollen Bilder mit transparentem Hintergrund verwendet werden, so können das ausschließlich Bilder vom Typ ".gif" sein. Hintergrundbilder sind ab Browserversion 4.x darstellbar.

<table background="URL"> - Hintergrundbild der Tabelle <tr background="URL"> - Hintergrundbild der Tabellenzeile <th background="URL"> - Hintergrundbild der Tabellenüberschrift <td background="URL"> - Hintergrundbild der Tabellenzelle