HOME 

 WEBMASTER 

 • Workshops 
 HTML Grundlagen 
 Tabellen 
 Grafiken 
 Frames 
 Hyperlinks 
 CSS Grundlagen 
 • Tools 
 • Weblog 
 WEBMAIL 

 SERVICE 

 • Jetzt anmelden 
 • Login 
 • Support 
 • Passwort? 
 • Informationen 
 • Kontakt 
 ANMELDUNG 

Quick Navigation FreeCity » Webmaster » Workshops » Tabellen

Tabellen für Einsteiger

Die Grundlage der HTML-Programmierung sind die Tabellen, mit denen man die Bereiche einer Webseite festlegt und die Seiteninhalte so an quasi jeder beliebigen Stelle einfügen kann.


Tabelle
Um eine Tabelle zu öffnen, müssen Sie den sogenannten Tag für Tabellen setzen. Jede geöffnete Tabelle muss danach mit dem entsprechenden Tag wieder geschlossen werden:
<table>
Inhalt der Tabelle
</table>

Rahmen

Sie haben nun die Möglichkeit, Ihre Tabelle mit einem Rahmen zu versehen, der eine definierte Liniendicke aufweist. Möchten Sie, dass Ihre Tabelle keinen Rahmen hat, müssen Sie diesen "unsichtbar" schalten, indem Sie die Liniendicke auf "0" festlegen. Tabellen mit der Liniendicke 0 nennt man auch "blinde Tabellen".

<table border="0">
Inhalt der Tabelle
</table>

Breite

Nun sollten Sie die Breite der Tabelle festlegen, indem Sie entweder die Breite in Pixel oder in Prozent angeben können. Eine Angabe in Prozent eignet sich für Webseiten, die sich unterschiedlichen Bildschirmauflösungen anpassen:

<table width="50%" border="0">
Inhalt der Tabelle
</table>

Zeilen und Spalten
 

Beispiele:

Eine Tabelle enthält meist mehrere Zeilen, mindestens jedoch eine Zeile. Jede Zeile muss dann wiederum mindestens eine Spalte enthalten. Um einen Zeilen- bzw. Spalteninhalt einzufügen, öffnen Sie eine Zeile und anschließend eine Spalte, fügen den gewünschten Inhalt ein und schließen den Tag für die Tabellenspalte und -zeile wieder. Jede Zeile beginnt mit dem Tag <tr> "tr" steht dabei für "table row" = Tabellenzeile; in der Zeile müssen Sie dann mithilfe des Spaltentags <td> ( "table data" = Tabellendaten) mindestens eine Spalte bilden, in welche Sie Ihre Inhalte einpflegen können:

<table width="50%" border="1">
<tr>
<td>
Inhalt der Spalte</td>
</tr>
</table>
Inhalt der Spalte

 

Nun sind Sie in der Lage, beliebig viele Zeilen und Spalten in Ihre Tabelle einzufügen. Möchten Sie z.B. unsere Beispieltabelle um eine weitere Zeile ergänzen, gehen Sie wie folgt vor:

<table width="50%" border="0">
<tr>
<td>
Inhalt der Spalte</td>
</tr>
<tr>
<td>
Spalte 2</td>
</tr>
</table>

Inhalt der Spalte
Spalte 2

 

Möchten Sie hingegen die Tabellenzeile in mehrere Spalten unterteilen, so ergänzen Sie einen weiteren <td>-Tag:

<table width="50%" border="0">
<tr>
<td>
Inhalt der Spalte</td>
<td>Neue Spalte in Zeile 1</td>
</tr>
</table>
 
Inhalt der Spalte Neue Spalte in Zeile 1

 

Damit Sie in Ihrer Tabelle flexibel arbeiten können, stehen Ihnen zwei weitere Funktionen zur Verfügung: Cellpadding und Cellspacing, die man nur allzu leicht miteinander verwechseln kann. Mit Cellspacing stellen Sie den Abstand der einzelnen Zellen zueinander ein während Cellpadding für den Abstand des Inhaltes (Text, Grafik) innerhalb einer Zelle zu dem Rand hat. Der Wert wird jeweils in Pixel angegeben:

<table border="1" cellspacing=10 cellpadding=0 >
<tr>
<td>
Inhalt
</td>
</tr>
</table>

 


Inhalt

Ausrichtung

Um Tabelleninhalte innerhalb von den Zellen auszurichten, können Sie durch die Befehle align (horizontal) oder valign (vertikal) in Verbindung mit left (linksbündig), right (rechtsbündig) oder center (zentriert) die Position des Inhaltes festlegen. Anhand unserer Beispieltabelle zeigen wir, wie Sie einen Text innerhalb einer Zelle zentrieren:

<table border="1">
<tr>
<td align=center>
Inhalte der Tabelle zentriert
</td>
</tr>
</table>
 
Inhalte der Tabelle zentriert

Hintergrundfarbe
Eine nicht minder wichtige Funktion für Ihre Tabelle ist das Festlegen der Farben oder Hintergründe Ihrer Zellen.
Dazu benötigen Sie den Hexadezimalcode der Farbe, die Sie verwenden möchten. Dieser setzt sich aus den Werten der drei Farben Rot, Grün und Blau zusammen.
Wenn Sie den Code nicht kennen, so benutzen Sie einfach unseren » RGB-Farbengenerator. Den generierten Code setzen Sie dann als Hintergrundfarbe ein, indem Sie den Tag bgcolor="#000000" einfügen (Wobei #000000 durch den von Ihnen gewünschten Farbcode zu ersetzen ist).
Wenn Sie die Farbe des Tabellenrahmens ändern möchten, so lautet der Befehl bordercolor="#000000".

» Übersicht

Gratis anmelden! 
Username

Passwort

Passwort vergessen? 
Dienste pflegen
Fragen - Antworten

DatenschutzerklärungNutzungsbedingungen | Impressum

FreeCity ein Dienst der KONTENT GmbH