Ramnips Homepage-Help      www.chathomepage.de  
Tabellen

Wichtig bei Tabellen im Knuddels-Homepageeditor

Ich empfehle die Tabelle erstmal offline "vorzuschreiben".
Das macht man am besten im Windows-Texteditor. Die Datei speichert man dann als .html Datei ab! (*.* alle Dateitypen wählen / nicht als .txt). Danach kann man die Datei doppelt anklicken und sich im Browser erstmal ansehen.

Ebenfalls sehr wichtig! Der Knuddels-Homepageeditor erkennt das Drücken der ENTER-Taste als Zeilenumbruch, also den HTML-Befehl <br>
Hier auf der Helpseite schreibe ich die Daten jedoch übersichtlich auf, damit es jeder versteht. Aber der Knuddels-Homepageeditor übernimmt es nicht layoutgetreu - ich zeige am Ende dann mal ein Beispiel!
Die gesamte Tabellecodierung muss im Knuddels-Homepageeditor hintereinander weg geschrieben werden, auch wenn's unübersichtlich wird - es muss nun mal so sein!
Daher mein Tipp von eben: Schreibe die Tabelle erstmal offline vor.

Hat man erstmal einen Tabellenrohbau geschaffen kann man dort alles hineinpressen was an HTML so möglich ist. Mit etwas Geschick und dem logischem Verständnis lassen sich so richtige tolle Layouts schaffen.



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
mehrerenSpalten
undReihen

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.

Abschlussbeispiel für eine Übernahme in den Knuddels-Homepageeditor:

<table border="1" cellpadding="10" cellspacing="0" bordercolor="#FF0000" bordercolorlight="#FF7F00" bordercolordark="#7F0000" width="400"><tr><td> Hallo Leute 1 <br> Wie gehts? <br> Hier ein Bild: <br> <a href="http://www.chatfarben.de/" target="_blank"><img src="http://www.chathomepage.de/data/disk.gif" border="0"></a></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>



Tabellen mal etwas anders in Szene setzen

Mit etwas Geschick kann man Tabellen sogar zu Symbolen oder einfachen grafischen Darstellungen benutzen. In den folgenden 2 Besipielen ist der HTML-Code zum Verstehen und Lernen "sauber" dargestellt. Für eine Verwendung im Knuddels-Homepageeditor müsste man die Codes wie schon vorher erklärt aneinander reihen.

Die deutsche Flagge per Tabelle   |    Ein Schachfeld per Tabelle   |   Trennlinien per Tabelle


Mit der Tabelle den vertikalen und horizontalen Zentrierungszwang erreichen:
Wer kennt das nicht, ein relativ kleiner Inhalt einer Webseite soll stets genau in der Mitte angezeigt werden. Ganz egal wie groß das Browserfenster ist.
So funktioniert es: Hier klicken


Mit der Tabelle Bilder "schützen":
Jeder kennt den Rechtsklick auf ein Bild und den Klick auf Speichern unter. Schwupps - schon ist das Bild gespeichert oder der Bild-URL abgelesen.
Mit der Tabelle kann man dem jedoch etwas trickreich entgegenwirken.
So funktioniert der Bildertrick (klicken).