Übersicht / Navigation
Home
HTML
=> Überblick
=> HTML-Struktur
=> Tabellen
=> DIV-Layer
CSS
Kontakt
Gästebuch
Tabellen
Tabellenaufbau / Grundgerüst

Reihen und Spalten gehören zu einer Tabelle.
Ob die Tabelle nun aus
einer Spalte und Reihe
(beispielsweise für eine einfache Umrahmung)
oder
mehreren Spalten
und Reihen

besteht, ist dabei völlig egal!

Grundlage ist das HTML-TAG <table>. Damit fängt jede Tabelle an und mit dem entsprechenden END-TAG hört diese auf. Wichtig ist, daß beide gesetzt werden!

<table>
</table>

Mit diesem "Rohbau" kann der Browser nichts anfangen, da weder eine Anzahl der Spalten, noch die Anzahl der Zeilen angegeben wurde.
Legen wir also gleich mal eine eine Zeile mit <tr> an. Das tr steht für table row ( = Tabellen Reihe)

<table>
  <tr>
  </tr>
</table>

Auch jetzt wird noch nichts angezeigt - es fehlen die Tabellendatenzellen.
Da hilft uns das HTML-TAG <td>, das für das engl. table data = Tabellen Daten steht

<table>
  <tr>
   <td> </td>
  </tr>
</table>

Auch jetzt wir garnix angezeigt, da kein Inhalt vorhanden ist. Tragen wir also Inhalt in den Zellenbereich ein.

<table>
  <tr>
   <td> Hallo Leute! </td>
  </tr>
</table>

Und das sieht dann so aus:

Hallo Leute!

Man erkennt noch garnicht, dass es eine Tabelle werden soll, deshalb fügen wir nun einen Rahmen ein.

<table border="1">
  <tr>
   <td> Hallo Leute! </td>
  </tr>
</table>

Und das sieht dann so aus:

Hallo Leute!
Später können wir den Rahmen wieder auf Null (also border="0") setzen um ihn verschwinden zu lassen.

Jetzt basteln wir eine echte Tabelle... mit ein paar mehr Zeilen und Spalten, nehmen wir jeweils zwei.

<table border="1">
  <tr>
   <td> Hallo Leute 1 </td>
   <td> Hallo Leute 2 </td> 
  </tr>
  <tr>
   <td> Hallo Leute 3 </td>
   <td> Hallo Leute 4 </td> 
  </tr>
</table>

Und das sieht dann so aus:

Hallo Leute 1 Hallo Leute 2
Hallo Leute 3 Hallo Leute 4

Jetzt bestimmen wir mit cellpadding="ZAHL" den Abstand des Textes/Inhaltes zum Tabellenrand.
Mit cellspacing="ZAHL" legen wir fest, wie groß die Rahmenabstände in sich selbst sein sollen. (ich verwende immer die Zahl 0 - sieht am besten aus!)

<table border="1" cellpadding="10" cellspacing="0">
  <tr>
   <td> Hallo Leute 1 </td>
   <td> Hallo Leute 2 </td> 
  </tr>
  <tr>
   <td> Hallo Leute 3 </td>
   <td> Hallo Leute 4 </td> 
  </tr>
</table>

Und das sieht dann so aus:

Hallo Leute 1 Hallo Leute 2
Hallo Leute 3 Hallo Leute 4

Mit einem cellpadding von 2 und einem cellspacing von 6 sieht es so aus:

Hallo Leute 1 Hallo Leute 2
Hallo Leute 3 Hallo Leute 4

Die Parameter bordercolor="Farbe" bordercolorlight="Farbe" bordercolordark="Farbe" sorgen für die Farbe.

<table border="1" cellpadding="10" cellspacing="0" bordercolor="#FF0000" bordercolorlight="#FF7F00" bordercolordark="#7F0000">
  <tr>
   <td> Hallo Leute 1 </td>
   <td> Hallo Leute 2 </td> 
  </tr>
  <tr>
   <td> Hallo Leute 3 </td>
   <td> Hallo Leute 4 </td> 
  </tr>
</table>

Und das sieht dann so aus:

Hallo Leute 1 Hallo Leute 2
Hallo Leute 3 Hallo Leute 4

Fertig! Das waren die Schritte für eine einfache Tabelle.


Was man sonst noch so verändern kann...

Zum Beispiel können wir die maximale Breite einer Tabelle festlegen.
Das <td> - Tag kann auch noch einige Erweiterungen aufnehmen. Z.b. die Zentrierung des Inhalts oder die gezielte vertikale Ausrichtung des Textes. Auch können wir eine Zellenhintergrundfarbe festlegen.
Das alles erklärt sich am besten mit einem Beispiel:

<table border="1" cellpadding="10" cellspacing="0" bordercolor="#FF0000" bordercolorlight="#FF7F00" bordercolordark="#7F0000" width="400">
  <tr>
   <td> Hallo Leute 1 <br> Wie gehts? <br> Gruß! </td>
   <td valign="top"> Hallo Leute 2 </td> 
  </tr>
  <tr>
   <td align="center"> Hallo Leute 3 </td>
   <td bgcolor="#0000FF"> Hallo Leute 4 </td> 
  </tr>
</table>

Und das sieht dann so aus:

Hallo Leute 1
Wie gehts?
Gruß! 		Hallo Leute 2
Hallo Leute 3 Hallo Leute 4

<td valign="top"> weist den Browser an den Text/Inhalt oben zu starten.
<td align="center"> setzt die horizontale Ausrichtung mittig in der Zelle. Könnte man aber so erzielen: <td><center> Text, Inhalt...
Wenn z.B. die Tabellenbreite auf 400 gesetzt ist, kann über den TD-Tag die Breite der Zelle auch angepasst werden, da sich sonst die Tabelle automatisch die Breite der Zellen einteilt (Beispiel: <td width="200"> )
<td bgcolor="#0000FF" legt die Hintergrundfarbe der Zelle fest

Hier noch ein kleiner Geheimtipp: <table background="URL" .....> erzielt für die Tabelle einen gesondertes Hintergrundbild sofern dies gewünscht wird.

 
Diese Webseite wurde kostenlos mit Homepage-Baukasten.de erstellt. Willst du auch eine eigene Webseite?
Gratis anmelden