| Tabellen in HTML |
Mit Tabellen kannst du in HTML eine WEB-Seite besser gestalten, soll heißen: man benutzt Tabellen in HTML nicht nur für eine simple Tabelle, sondern beispielsweise um ein Dokument zweispaltig zu setzen, das sind dann eben die beiden Spalten der Tabelle!
Für Tabellen gibt es dass table-Tag: es erwartet als Parameter die Rahmendicke (border) der Tabelle:
<table border="1">
Wir schauen uns mal eine einfache Tabelle an:
| Überschrift 1 | Überschrift 2 |
|---|---|
| Die erste Spalte | Die zweite Spalte |
Und nun das ganze im Original:
<table border="1" > <caption> <b>Tabellen in HTML</b> </caption> <tr> <th> Überschrift 1 </th> <th> Überschrift 2 </th> </tr> <tr> <td> Die erste Spalte </td> <td> Die zweite Spalte </td> </tr> </table>
Das caption-Tag versieht die Tabelle mit einer Überschrift, ansonsten ist die Tabelle in Zeilen und Spalten eingeteilt und hat viele Zellen. Als Zellinhalt kommt in Frage:
Das <tr>-Tag (tr: table row) eröffnet eine neue Zeile, und den Inhalt einer Zelle sprichst du mit dem <td>-Tag (td: table data) an. Willst du einen Zelleninhalt hervorheben, so benutze das <th>-Tag (th: table header). Die zugehörigen Ende-Tags, also </tr>, </td> und </th> können auch weggelassen werden. Du kannst die Tabelle farbig gestalten, indem du dem table-Tag die Parameter bgcolor und bordercolor übergibst:
| Schöne Farbe | |
|---|---|
| Rahmen: Rot | Hintergrund: Grün |
<table border="5" bgcolor="#1FFF00" bordercolor="#FF0000" align="center"> <tr> <th colspan="2" > Schöne Farbe </th> </tr> <tr> <td> Rahmen: Rot </td> <td> Hintergrund: Grün </td> </tr> </table >
Jetzt wird es etwas spezieller: Mit colspan kannst du mehrere Zellen in einer Zeile zusammenfassen zu einer Zelle, die dann über mehrere Spalten läuft. Analog gibt es auch rowspan, es faßt eben mehrere Zellen in einer Spalte zu einer Zelle zusammen, die dann über mehrere Zeilen geht. Ein weiterer Parameter für das th-Tag bzw. für das td-Tag ist align, das für die horizontale Ausrichtung des Zellinhalts verantwortlich ist (align=left, right oder center); für die vertikale Ausrichtung gibt es valign, dass als Werte top, middle, bottom oder baseline erwartet. Daneben kannst du mit width bzw. mit height Breite bzw. Höhe der Tabelle bzw. einer Tabellenspalte (bei width) oder -zeile (bei height) bestimmen. Es gibt noch eine Fülle weiterer Parameter wie zum Beispiel nowrap (verhindert automatischen Zeilenumbruch), die du in einer ausführlich(er)en Dokumentation nachschlagen kannst, mir geht es nur noch darum, wie obige Tabelle zentriert wurde: nun, du bekommst eine zentrierte Tabelle, indem du im table-Tag den Parameter align auf den Wert center setzt (siehe oben!), aber es geht natürlich auch links- oder rechtsbündig, Beispiel:
<table border="5" bgcolor="#1FFF00" bordercolor="#FF0000" align="right">
.
.
.
</table>
Und wenn Text & Tabelle dann merkwürdig aussehen? Tja, dumm gelaufen, mein Tip: Ein Paar Breaks, also <br> nach dem schließenden </table>-Tag wirken wirklich Wunder! (bitte ausprobieren)
Ein letztes Beispiel gefällig? Die Überschrift oben ist auch nichts anderes als eine (kleine) Tabelle! Vergleiche den HTML-Code:
<table width="80%">
<tr>
<td bgcolor="#000063">
<font color="#ffffff" size="+2">
Tabellen statt Tabletten
</font>
</td>
</tr>
</table>
<<<
Im HTML-Editor gibt es einen eigenen Reiter für Tabellen, und was finden wir da? Einen Eingabeassistenten! Danke schön, Herr Meybohm! Alternativ kann man über den Befehl Einfügen in diesem Reiter eine Tabelle mit m Spalten und n Zeilen erzeugen (Merke: Zeile zuletzt!), im HTML-Editor ist das eine m X n-Tabelle. Hier noch ein kleines
Achtung: Die Anzahl der Zellen in einer Zeile bestimmt gleichzeitig die Anzahl der Spalten in dieser Zeile, kurz: Anzahl Zellen = Anzahl Spalten!
<<<