Webdesign-City.de - HTML Grundlagen - HTML Befehle - HTML Sonderzeichen - Jetzt lernen wir HTML - HTML für Anfänger

© Webdesign-City.de - powered by MAOTEC

Linktips: Gebrauchtboote

Tabellen in HTML Dokumenten » HTML Grundlagen Übersicht

Tabellen sind ein nützliches Mittel beim erstellen einer Website. Sie können an jeder Stelle einer Seite eingefügt und zur Gliederung, bzw. zum Layouten genutzt werden.

Der Beginn einer Tabelle wird mit folgendem HTML-Tag eingeleitet:

<TABLE>

anschließend ist folgende Grunddefinition erforderlich:

<TR> Neue Tabellenzeile
<TH>...</TH> Kopfzelle
<TD>...</TD> Datenzelle
</TR> Ende der Tabellenzeile
</TABLE> Ende der Tabelle


Zur besseren Gestaltung der Tabelle können folgende Befehle verwendet werden:

<TABLE BORDER=Zahl> Aussenrahmendicke in Pixel
<TABLE WIDTH=Zahl oder %> Gesamtbreite der Tabelle in Pixel oder prozentual zum Anzeigefenster
<TABLE HEIGHT=Zahl oder %> Gesamthöhe der Tabelle in Pixel oder prozentual zum Anzeigefenster
<TABLE CELLSPACING=Zahl> Abstand der Zellen zueinander in Pixel (Gitternetzdicke)
<TABLE CELLPADDING=Zahl> Abstand des Zelleninhaltes zum Zellenrand
<TABLE BGCOLOR=farbe*> Tabellenhintergrundfarbe
<TABLE BORDERCOLR=farbe*> Rahmen- und Gitternetzfarbe

farbe* = Als RGB-Farbwert (z.B. #5683AF) oder Farbname (z.B. Red) ---> Farbtabelle


Gestaltung der Tabellenzellen, Kopf- oder Datenzellen:

<TH oder TD Align=LEFT> Ausrichtung links
<TH oder TD Align=CENTER> Ausrichtung mittig
<TH oder TD Align=RIGHT> Ausrichtung rechts
<TH oder TD WIDTH=Zahl o. %> Spaltenbreite der Zelle in Pixel oder prozentual zum Anzeigefenster
<TH oder TD HEIGHT=Zahl o. %> Höhe der Zelle in Pixel oder prozentual zum Anzeigefenster



Beispiel:

<table width="293" border="1" cellspacing="2" cellpadding="0">

<tr height="20">
<td align="center" bgcolor="#00ccff" width="50%" height="20"><font size="2">Test Tabelle</font></td>
<td align="center" width="50%" height="20"><font size="2">2 Spalten</font></td>
</tr>

<tr height="20">
<td align="center" width="50%" height="20"><font size="2">2 Zeilen</font></td>
<td align="center" bgcolor="#ff9900" width="50%" height="20"><font size="2">4 Zellen</font></td>
</tr>

</table>

Erzeugt folgende Tabelle:

Test Tabelle 2 Spalten
2 Zeilen 4 Zellen