Quelle: http://de.selfhtml.org/html/

Tabellen

Um Daten und Texte tabellarisch darzustellen gibt es auch in HTML Tabellen. Eine Tabelle wird mit einem <table> Tag eröffnet, innerhalb der Tabelle definiert man dann Zeilen und Zellen. Der <tr> Tag (tr = Tabellenreihe) wird verwendet, um Zeilen zu definieren, <td> Tags (td = Tabellendaten) definieren dann die einzelnen Zellen.

<table>
  <tr>
    <td>Zelle 1
    </td>
    <td>Zelle 2
    </td>
  </tr>
  <tr>
    <td>Zelle 3
    </td>
    <td>Zelle 4
    </td>
  </tr>
</table>
Einfache Tabelle
Zelle 1 Zelle 2
Zelle 3 Zelle 4

Eine Tabelle kann auch mit einem Rahmen versehen werden

<table border="1">
  <tr>
    <td>Zelle 1
    </td>
    <td>Zelle 2
    </td>
  </tr>
  <tr>
    <td>Zelle 3
    </td>
    <td>Zelle 4
    </td>
  </tr>
</table>
Tabelle mit Rahmen
Zelle 1 Zelle 2
Zelle 3 Zelle 4

Die erste Zeile einer Tabelle kann man auch zu einer Überschriftenzeile machen, dazu verwendet man den <th> anstelle des <td> Tags:

<table border="1">
  <tr>
    <th>Partei
    </th>
    <th>Prozent
    </th>
  </tr>
  <tr>
    <td>CDU/CSU
    </td>
    <td>43,2
    </td>
  </tr>
  <tr>
    <td>SPD
    </td>
    <td>38,5
    </td>
  </tr>
  <tr>
    <td>Die Linke
    </td>
    <td>9,8
    </td>
  </tr>
</table>

Tabelle mit Überschrift
Partei Prozent
CDU/CSU 43,2
SPD 38,5
Die Linke 9,8

Eine weitere Tabellenoptionen ist die Auswahl der Breite, die die Tabelle belegen soll. Möglich ist hier eine Prozentangabe als auch eine Pixelangabe:

<table width="80%"> ... </table> für eine Tabelle, die 80% der Seitenbreite einnehmen soll und
<table width="450>... </table> für eine Tabelle, die 450 Pixel breit sein soll.

Weitere Möglichkeiten, die Tabellen bieten sind Zellen, die sich über mehr als eine Spalte erstrecken, sowie gezielte Ausrichtung des Textes (oder andere Elemente) innerhalb einer Zelle.
Details hierzu siehe mit der rechten Maustaste über "Öffnen" unter http://de.selfhtml.org/html/.

Schließlich ist es durchaus auch möglich, Tabellen ineinander zu schachteln. Damit kann man in eines Zelle eine Tabelle wieder eine Tabelle setzen, um ein bestimmtes Layout zu erreichen:

  Briefmarke
Absender
Vorname Nachname
Straße Hausnummer
PLZ Ort

Bei so einem Aufbau kann man dann auch Rahmen weglassen, um nicht alle Tabellen sichtbar werden zu lassen:

  Briefmarke
Absender
Vorname Nachname
Straße Hausnummer
PLZ Ort

Tabellen
(Qelle: SELHTML-Navigationshilfen =http://de.selfhtml.org/navigation/html.htm).
Dort kann man Beispiele aufrufen und sich ausführlicher informieren.

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.

 

Spalten
vordefinieren

<table >
<colgroup>
<col>
<col width="Breite" span="Anzahl">
</colgroup>
<tr>
<td>Zelle</td>
<td>Zelle</td>
</tr>
</table>
Mit <col>-Tags so viele Spalten vordefinieren wie die Tabelle hat. Gruppieren mit colgroup-Elementen.
width = Spaltenbreite (optionale Angabe).
Für Breite eine Zahl wie z.B. 100 für Pixel angeben,
oder einen Prozentwert wie z.B. 20%,
oder eine Relation zu anderen Spalten (z.B. 4* = 4 Anteile an der Summe so definierter Anteile in den anderen Spalten).
span = Angabe zur Breite gilt für so viele Spalten in Folge wie angegeben.
Für Anzahl eine Zahl wie z.B. 3 für die Anzahl Spalten angeben, für die die Angaben gelten sollen.

 

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.
Seite Beschreibung
 

Zeilenumbruch
in Zellen
verhindern

<th nowrap>Kopfzelle</th>
<td nowrap>Datenzelle</td>

 

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, so dass 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>

 

Drei zusätzliche Beispiele für die Gestaltung von Tabellen (mit Farbspielereien)

1. Zellen in einer Zeile spaltenweise verbinden

<h1 align="center">Zoologie</h1>
<table align="center" bgcolor="#FF9900"border="1">
<tr>
<th colspan="2">Die Menschheit besteht aus</th>
</tr>
<tr>
<td>Eseln</td>
<td>Affen</td>
</tr>
</table>

Zoologie

Die Menschheit besteht aus
Eseln Affen

 

2. Zellen in einer Spalte zeilenweise verbinden

<h1 align="center">Zoologie (II)</h1>
<table align="center" bgcolor="#CCCCCC" border="1">
<tr>
<th rowspan="2">Die Eselheit besteht aus</th>
<td>echten Eseln</td>
</tr>
<tr>
<td>verkappten Eseln (Menschen)</td>
</tr>
<tr>
<th rowspan="2">Die Affenheit besteht aus</th>
<td>echten Affen</td>
</tr>
<tr>
<td>verkappten Affen (Menschen)</td>
</tr>
</table>

Zoologie (II)

Die Eselheit besteht aus echten Eseln
verkappten Eseln (Menschen)
Die Affenheit besteht aus echten Affen
verkappten Affen (Menschen)

 

 

3. Zellen spalten- und zeilenweise zugleich verbinden

<h1 align="center" >Zoologie (III)</h1>
<table align="center" bgcolor="#F27C35" border="1">
<tr>
<th colspan="2" rowspan="2">Der Mensch ist...</th>
<td>zum einen Teil ein Esel</td>
</tr>
<tr>
<td >zum anderen Teil ein Affe</td>
</tr>
<tr>
<td>weder ein richtiger Esel</td>
<td>noch ein richtiger Affe</td>
<td><b>menschlich, allzumenschlich</b></td>
</tr>
</table>

Zoologie (III)

Der Mensch ist... zum einen Teil ein Esel
zum anderen Teil ein Affe
weder ein richtiger Esel noch ein richtiger Affe menschlich, allzumenschlich