Tabellenstruktur in HTML

Bereich

Quellcode, Beschreibung und Parameter

Tabellenaufbau

<table border="Dicke">
<tr>
<th>Kopfzelle</th>
<th>Kopfzelle</th>
</tr>
<tr>
<td>Datenzelle</td>
<td>Datenzelle</td>
</tr>
</table>

Tabelle mit sichtbaren Gitternetzlinien durch Angabe von border im einleitenden Tabellen-Tag, durch Weglassen wird die Tabelle eine blinde Tabelle.
Für Dicke eine Zahl wie z.B. 3 für Anzahl Pixel der Dicke des Außenrahmens angeben.

Kopf, Fuß
und Körper
einer Tabelle

<table>
<thead>
<!--Tabellenzeilen-->
</thead>
<tfoot>
<!--Tabellenzeilen-->
</tfoot>
<tbody>
<!--Tabellenzeilen-->
</tbody>
</table>

In dieser Reihenfolge notieren.

Zellenabstand und
Zelleninnenabstand

<table cellspacing="Abstand" cellpadding="Innenabstand">
<!-- Tabelleninhalt -->
</table>

cellspacing = Abstand der Zellen untereinander,
cellpadding = Innenabstand von Zellenrand zu Zelleninhalt.
Für Abstand und Innenabstand Zahlen wie z.B. 5 und 10 für die Anzahl der gewünschten Pixel angeben.

Regeln für
Außenrahmen

<table border="Dicke" frame="Typ">
<!-- Tabelleninhalt -->
</table>

Rahmendicke angeben, damit ein Außenrahmen sichtbar ist.
Für Dicke eine Zahl wie z.B. 3 für Anzahl Pixel der Dicke des Außenrahmens angeben.
Für Typ einen der folgenden Werte notieren:
box = Rahmen rundum,
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.

Regeln für
Gitternetzlinien

<table border="Dicke" rules="Typ">
<!-- Tabelleninhalt -->
</table>

Rahmendicke angeben, damit Außenrahmen und Gitternetz sichtbar sind.
Für Dicke eine Zahl wie z.B. 3 für Anzahl Pixel der Dicke des Außenrahmens angeben.
Für Typ einen der folgenden Werte notieren:
none = keine Gitternetzlinien,
rows = Linien nur zwischen Tabellenzeilen,
cols = Linien nur zwischen Tabellenspalten,
groups = Linien nur zwischen Kopf, Körper und Fuß,
all = komplettes Gitternetz (Normaleinstellung).

Breiten- und
Höhenangaben

<table width="Breite">
<tr>
<th width="Breite" height="Höhe">Kopfzelle</th>
<th>Kopfzelle</th>
</tr>
<tr>
<td>Datenzelle</td>
<td width="Breite" height="Höhe">Datenzelle</td>
</tr>
</table>

width = Breite,
height = Höhe.
Breite der gesamten Tabelle im einleitenden <table>-Tag angeben,
Breite einer Spalte in einem der einleitenden <th>- oder <td>-Tags der Spalte,
und Höhe einer Tabellenzeile in einem der einleitenden <th>- oder <td>-Tags der Zeile.
Für Breite eine Zahl wie z.B. 100 für Pixel angeben,
oder einen Prozentwert wie z.B. 20%.
Für Höhe eine Zahl wie z.B. 50 für Pixel angeben.

Zellen horizontal
ausrichten

<th align="Ausrichtung">Kopfzelle</th>
<td align="Ausrichtung">Datenzelle</td>

Für Ausrichtung einen der folgenden Werte notieren:
left = linksbündig,
center = zentriert,
right = rechtsbündig,
justify = Blocksatz,
char = um Dezimalzeichen. In diesem Fall char als zusätzliches Attribut notieren und als Wert ein Dezimalzeichen wie Komma zuweisen (char=","). Mit einem weiteren Attribut charoff gegebenenfalls angeben, an welcher Position das Dezimalzeichen frühestens vorkommen kann (z.B. charoff="10").

Zellen vertikal
ausrichten

<th valign="Ausrichtung">Kopfzelle</th>
<td valign="Ausrichtung">Datenzelle</td>

Für Ausrichtung einen der folgenden Werte notieren:
top = obenbündig,
middle = mittig,
bottom = untenbündig,
baseline = an gemeinsamer Basislinie, sodass erste Textzeile immer auf gleicher Höhe beginnt.

Hintergrundfarbe

<table bgcolor="#XXXXXX">
<tr bgcolor="#XXXXXX">
<th bgcolor="#XXXXXX">Kopfzelle</th>
<td bgcolor="#XXXXXX">Datenzelle</td>
</tr>
</table>

Für #XXXXXX eine hexadezimal notierte RGB-Farbe angeben oder einen erlaubten Farbnamen.

Hintergrundbild
(Wallpaper)

<table background="URI">
<tr background="URI">
<th background="URI">Kopfzelle</th>
<td background="URI">Datenzelle</td>
</tr>
</table>

Für URI eine Web-Adresse oder ein Ziel mit oder ohne Pfad der gewünschten Grafikdatei angeben.

Zellen
verbinden

<th rowspan="Zeilen">Kopfzelle</th>
<td rowspan="Zeilen">Datenzelle</td>
<th colspan="Spalten">Kopfzelle</th>
<td colspan="Spalten">Datenzelle</td>
<th rowspan="Zeilen" colspan="Spalten">Kopfzelle</th>
<td rowspan="Zeilen" colspan="Spalten">Datenzelle</td>

Für Zeilen eine Zahl wie z.B. 3 angeben, um festzulegen, über wie viele Zeilen sich die Zelle erstrecken soll.
Für Spalten eine Zahl wie z.B. 3 angeben, um festzulegen, über wie viele Spalten sich die Zelle erstrecken soll.

Tabellen-
Beschriftung

<table>
<caption align="Ausrichtung">Text</caption>
<tr>
<td>Zelle</td>
<td>Zelle</td>
</tr>
</table>

Das caption-Element unmittelbar hinter dem einleitenden <table>-Tag notieren. Das Attribut zur Ausrichtung (align) ist optional.
Für Ausrichtung einen der folgenden Werte notieren:
left = Tabellenbeschriftung seitlich links der Tabelle,
right = Tabellenbeschriftung seitlich rechts der Tabelle,
bottom = Tabellenbeschriftung unter der Tabelle,
top = Tabellenbeschriftung oberhalb der Tabelle (Normaleinstellung).

Tabellen
ausrichten

<table align="Ausrichtung" hspace="LinksRechts" vspace="ObenUnten">
<!-- Tabelleninhalt -->
</table>

Für Ausrichtung einen der folgenden Werte notieren:
left = Tabelle links ausrichten (nachfolgende Inhalte fließen rechts vorbei),
right = Tabelle rechts ausrichten (nachfolgende Inhalte fließen links vorbei),
center = Tabelle zentriert ausrichten.
Für LinksRechts eine Zahl wie z.B. 10 notieren, um den Pixelabstand von Tabelle zur Umgebung links und rechts zu bestimmen.
Für ObenUnten eine Zahl wie z.B. 10 notieren, um den Pixelabstand von Tabelle zur Umgebung oben und unten zu bestimmen.

Zusammenfassung
des
Tabelleninhalts

<table summary="Text">
<!-- Tabelleninhalt -->
</table>