Quelle: http://de.selfhtml.org/html/
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
|
Die erste Zeile einer Tabelle kann man auch zu einer Überschriftenzeile machen, dazu verwendet man den <th> anstelle des <td> Tags:
<table border="1"> |
Tabelle mit Überschrift
|
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 |
|
Bei so einem Aufbau kann man dann auch Rahmen weglassen, um nicht alle Tabellen sichtbar werden zu lassen:
Briefmarke | |||||||
Absender |
|
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">
|
---|---|
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 |
<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ß |
<table>
|
In dieser Reihenfolge notieren. | |
Zellenabstand und |
<table cellspacing="Abstand"
cellpadding="Innenabstand"> |
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 |
<table border="Dicke"
frame="Typ">
|
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 |
<table border="Dicke"
rules="Typ">
|
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 |
<table
width="Breite">
|
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.Beschreibung | |
Zeilenumbruch |
<th
nowrap>Kopfzelle</th> |
Zellen horizontal |
<th
align="Ausrichtung">Kopfzelle</th> |
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 |
<th
valign="Ausrichtung">Kopfzelle</th> |
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">
|
Für #XXXXXX eine hexadezimal notierte
RGB-Farbe angeben oder einen erlaubten Farbnamen. | |
Hintergrundbild |
<table background="URI">
|
Für URI eine Web-Adresse oder ein Ziel mit
oder ohne Pfad der gewünschten Grafikdatei angeben. | |
Zellen |
<th
rowspan="Zeilen">Kopfzelle</th> |
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- |
<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 |
<table align="Ausrichtung"
hspace="LinksRechts" vspace="ObenUnten"> |
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 |
<table summary="Text"> |
<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>
Die Menschheit besteht aus | |
---|---|
Eseln | Affen |
<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>
Die Eselheit besteht aus | echten Eseln |
---|---|
verkappten Eseln (Menschen) | |
Die Affenheit besteht aus | echten Affen |
verkappten Affen (Menschen) |
<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>
Der Mensch ist... | zum einen Teil ein Esel | |
---|---|---|
zum anderen Teil ein Affe | ||
weder ein richtiger Esel | noch ein richtiger Affe | menschlich, allzumenschlich |