Start | Webdesign | Galerie | Web-Tipp | Html-Tags | CSS | Tutorial | Impressum | Sitemap
<<< 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 >>>

Html-Tags - table - Tabellen anlegen

Um die verschiedenen grafischen Elemente und den Text auf der Webseite ausrichten zu können wurden zu Beginn des Internetzeitalters Tabellen mit und ohne sichtbaren Rahmen eingesetzt. Heute kann diese Aufgabe sehr gut mit css-style-Angaben gelöst werden. Trotzdem sind Tabellen im Webdesign noch weit verbreitet und bieten auch einige Vorteile. Wenn Sie Tabellen auf Ihren Webseiten verwenden möchten sollten Sie diese auf ein Minimum beschränken, da sie Menschen mit Behinderung den Umgang mit Ihrer Website erschweren oder gänzlich unmöglich machen. Vor allem tiefe Verschachtelungen von Tabellen ineinander oder eine Unterteilung der Tabellen in viele einzelne Zellen sollten vermieden werden. Die beste Lösung sind Website-Layouts ohne Tabellen dafür aber mit css-Formatierung aber alte Browser haben Ihre liebe Müh mit der Darstellung von css-Anweisungen.

Mit einer Prozentangabe für width im einleitenden table tag ändert sich die Tabellenbreite proportional zum Browserfenster. Eine Angabe für table height setzen die meisten Browser zwar auch um aber diese Angabe gehört nicht zum Html-Standard. Testen Sie Ihre Webseite mit dieser Attribut-Zuweisung im Validator erhalten Sie deshalb eine Fehlermeldung für diese Angabe.

Wird für width im table tag keine Angabe gemacht, richtet sich die Breite der angezeigten Tabelle nach der Menge des Inhaltes in den einzelnen Zellen einer Zeile.

Auch den einzelnen Tabellenzellen können Breiten und hier auch standardkonform Höhen zugewiesen werden. Wurde eine Tabellenzelle dabei zu klein für den Textinhalt angelegt werden Breiten- und Höhenangaben vom Browser ignoriert und die Tabellenzelle auf die, für den Text benötigte Größe ausgedehnt. Definieren Sie für eine Tabellenzelle eine Breite gilt diese für die ganze Spalte. Ebenso verhält es sich mit der Höhe. Legen Sie eine Höhe für eine Tabellenzelle fest, gilt diese für die gesamte Zeile.
Mit unsichtbaren Tabellen können alle Elemente der Webseite gut positioniert werden, allerdings sollte dafür in der Zukunft besser css verwendet werden. Auch Breite und Höhe sollten statt in Html per css formatiert werden.

Html-Befehle

Ansicht - Webseite

<table >hier steht die Tabelle</table >

einleitender Tabellen-Tag, Aufbau zeilenweise

<tr > Zeile </tr >

Tabellenzeile

<th > Zellenüberschrift </th >

Zellenüberschrift

<td > Zelle </td >

Tabellenzelle

<table border="2" >
<tr >
<td >Zelle </td >
<td >Zelle2 </td >
</tr >
<tr >
<td >Zeile 2 Zelle 1 </td >
<td >Zeile 2 Zelle2 </td >
</tr >
</table >

Zelle	Zelle2
Zeile 2 Zelle 1	Zeile 2 Zelle2

<table border="1" cellspacing="10" cellpadding="10" width="300" >
<tr >
<td >Zelle </td >
<td >Zelle2 </td >
</tr >
<tr >
<td >Zeile 2 Zelle 1 </td >
<td >Zeile 2 Zelle2 </td >
</tr >
</table >

Zelle	Zelle2
Zeile 2 Zelle 1	Zeile 2 Zelle2

Attribut frame=" " für Tabellen - Sichtbarkeit der Border - funktioniert nicht mit allen Browsern

<table border="1" frame="box" >
<tr >
<td >Zelle </td >
<td >Zelle2 </td >
</tr >
<tr >
<td >Zeile 2 Zelle 1 </td >
<td >Zeile 2 Zelle2 </td >
</tr >
</table >

border werden ringsherum angezeigt

Zelle	Zelle2
Zeile 2 Zelle 1	Zeile 2 Zelle2

<table border="1" frame="above" >
<tr >
<td >Zelle </td >
<td >Zelle2 </td >
</tr >
<tr >
<td >Zeile 2 Zelle 1 </td >
<td >Zeile 2 Zelle2 </td >
</tr >
</table >

border werden nur oben angezeigt

Zelle	Zelle2
Zeile 2 Zelle 1	Zeile 2 Zelle2

<table border="1" frame="below" >
<tr >
<td >Zelle </td >
<td >Zelle2 </td >
</tr >
<tr >
<td >Zeile 2 Zelle 1 </td >
<td >Zeile 2 Zelle2 </td >
</tr >
</table >

border werden unten angezeigt

Zelle	Zelle2
Zeile 2 Zelle 1	Zeile 2 Zelle2

<table border="1" frame="hsides" >
<tr >
<td >Zelle </td >
<td >Zelle2 </td >
</tr >
<tr >
<td >Zeile 2 Zelle 1 </td >
<td >Zeile 2 Zelle2 </td >
</tr >
</table >

border werden unten und oben angezeigt

Zelle	Zelle2
Zeile 2 Zelle 1	Zeile 2 Zelle2

<table border="1" frame="vsides" >
<tr >
<td >Zelle </td >
<td >Zelle2 </td >
</tr >
<tr >
<td >Zeile 2 Zelle 1 </td >
<td >Zeile 2 Zelle2 </td >
</tr >
</table >

border werden links und rechts angezeigt

Zelle	Zelle2
Zeile 2 Zelle 1	Zeile 2 Zelle2

<table border="1" frame="lhs" >
<tr >
<td >Zelle </td >
<td >Zelle2 </td >
</tr >
<tr >
<td >Zeile 2 Zelle 1 </td >
<td >Zeile 2 Zelle2 </td >
</tr >
</table >

border am linken Rand der Tabelle(left hand site)

Zelle	Zelle2
Zeile 2 Zelle 1	Zeile 2 Zelle2

<table border="1" frame="rhs" >
<tr >
<td >Zelle </td >
<td >Zelle2 </td >
</tr >
<tr >
<td >Zeile 2 Zelle 1 </td >
<td >Zeile 2 Zelle2 </td >
</tr >
</table >

border am rechten Rand der Tabelle(right hand site)

Zelle	Zelle2
Zeile 2 Zelle 1	Zeile 2 Zelle2

<table border="1" rules="none" >
<tr >
<td >Zelle </td >
<td >Zelle2 </td >
</tr >
<tr >
<td >Zeile 2 Zelle 1 </td >
<td >Zeile 2 Zelle2 </td >
</tr >
</table >

Gitternetzlinien werden unterdrückt

Zelle	Zelle2
Zeile 2 Zelle 1	Zeile 2 Zelle2

<table border="1" rules="rows" >
<tr >
<td >Zelle </td >
<td >Zelle2 </td >
</tr >
<tr >
<td >Zeile 2 Zelle 1 </td >
<td >Zeile 2 Zelle2 </td >
</tr >
</table >

Gitternetzlinien waagerecht

Zelle	Zelle2
Zeile 2 Zelle 1	Zeile 2 Zelle2

<table border="1" rules="cols" >
<tr >
<td >Zelle </td >
<td >Zelle2 </td >
</tr >
<tr >
<td >Zeile 2 Zelle 1 </td >
<td >Zeile 2 Zelle2 </td >
</tr >
</table >

Gitternetzlinien senkrecht

Zelle	Zelle2
Zeile 2 Zelle 1	Zeile 2 Zelle2

<table border="1" rules="all" >
<tr >
<td >Zelle </td >
<td >Zelle2 </td >
</tr >
<tr >
<td >Zeile 2 Zelle 1 </td >
<td >Zeile 2 Zelle2 </td >
</tr >
</table >

Gitternetzlinien alle

Zelle	Zelle2
Zeile 2 Zelle 1	Zeile 2 Zelle2

<table border="1" > <caption align="top" >hier steht die Überschrift </caption >
<tr >
<td >Zelle </td >
<td >Zelle2 </td >
</tr >
<tr >
<td >Zeile 2 Zelle 1 </td >
<td >Zeile 2 Zelle2 </td >
</tr >
</table >

hier steht die Überschrift
Zelle	Zelle2
Zeile 2 Zelle 1	Zeile 2 Zelle2

<table border="1" > <caption align="bottom" >hier steht die Legende </caption >
<tr >
<td >Zelle </td >
<td >Zelle2 </td >
</tr >
<tr >
<td >Zeile 2 Zelle 1 </td >
<td >Zeile 2 Zelle2 </td >
</tr >
</table >

hier steht die Legende
Zelle	Zelle2
Zeile 2 Zelle 1	Zeile 2 Zelle2

erzeugt leere Zelle

< table border="1" >
<tr >
<td colspan="2">zwei Zellen werden horizontal verbunden < /td >
<tr >
</tr >
<tr >
<td >Zeile 2 Zelle 1 </td >
<td >Zeile 2 Zelle2 </td >
</tr >
</table >

zwei Zellen werden horizontal verbunden
verbundene Zellen
Zeile 2 Zelle 1	Zeile 2 Zelle2

< table border="1" >
< tr >
<td rowspan="2">verbundene Zellen < /td >
<td >Zeile 1 Zelle 2 </td >
</tr >
<tr >
<td >Zeile 2 Zelle2 </td >
</tr >
</table >

zwei Zellen werden vertikal verbunden
verbundene Zellen	Zeile1 Zelle2
	Zeile 2 Zelle2

<table border="1" >
<tr >
<td height="40" >Zelle </td >
<td >Zelle2 </td >
</tr >
<tr >
<td >Zeile 2 Zelle 1 </td >
<td >Zeile 2 Zelle2 </td >
</tr >
</table >

gibt die Anzeigehöhe der Zelle in Pixel oder Prozent an
Zelle	Zelle2
Zeile 2 Zelle 1	Zeile 2 Zelle2

<table border="1">
<colgroup >
<col width="120" >
<col width="100" >
<col width="160" >
</colgroup>
<tr>
<td> spalte1 </td >
<td> Spalte2 </td >
<td> Spalte3 </td >
</tr >
</table >

colgroup teilt dem Browser gleich am Anfang die Anzahl der Spalten mit

spalte1

Spalte2

Spalte3

<table border="1" >
<colgroup width="140" span="2" > </colgroup >
<tr >
<td>Zeile 1 spalte 1</td >
<td>Zeile 1 Spalte 2</td >
<td>Zeile 1 Spalte 3</td >
<td>Zeile 1 Spalte 4</td >
</tr >
</table >

colgroup teilt dem Browser gleich am Anfang die Anzahl der Spalten mit, span gibt an, für wieviele Spalten die Angaben gelten

Zeile 1 spalte 1

Zeile 1 Spalte 2

Zeile 1 Spalte 3

Zeile 1 Spalte 4

<table border="4" bordercolordark="maroon" bordercolorlight="aqua" >
<tr >
<td>Tabelle </td >
<td>mit farbigem Border </td >
</tr >
<tr >
<td>und </td >
<td > andersfarbigem Schatten </td >
</tr >
</table >

Tabelle mit farbigem Border und andersfarbigem Schatten des Borders (stellt nur IE dar)

Tabelle	mit farbigem Border
und	andersfarbigem Schatten

<table border="4" >
<tr >
<td width="150" height="60" valign="top" >
<table border="1" >
<tr >
<td>oben </td >
</tr >
</table >
</td >
<td width="150" height="60" valign="middle" >
<table border="1" >
<tr >
<td>Mitte </td >
</tr >
</table >
</td >
<td width="150" height="60" valign="bottom" >
<table border="1" >
<tr >
<td>Unten </td >
</tr >
</table >
</td >
</tr >
<tr >
<td height="60" align="right" >
<table border="1" >
<tr >
<td>rechts </td >
</tr >
</table >
</td >
<td align="left" >
<table border="1" >
<tr >
<td>links </td >
</tr >
</table >
</td >
<td align="center" >
<table border="1" >
<tr >
<td>zentriert </td >
</tr >
</table >
</td >
</tr >
</table >

Ausrichtung von Tabellenzellen innerhalb einer Tabelle

oben

Mitte

Unten

rechts

links

zentriert

<table border="2" cellpadding="8" >
<thead >
<tr >
<td width="200" height="60" >hier steht </td > <td width="200" height="60" >der Inhalt des Heades </td >
</tr >
</thead >
<tfoot >
<tr >
<td height="60" >hier steht </td > <td >der Inhalt des Foots </td >
</tr >
</tfoot >
<tbody >
<tr >
<td height="60" >hier steht </td > <td >der Inhalt des Bodys <td >
</tr >
</tbody>
</table >

thead, tbody, tfoot - stellt nur der IE dar

hier steht	der Inhalt des Heades
hier steht	der Inhalt des Foots
hier steht	der Inhalt des Bodys

<<< 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 >>>
Start | Webdesign | Galerie | Web-Tipp | Html-Tags | CSS | Tutorial | Impressum | Sitemap