(Stand: 22.12.24, Adresse: http://www.grammiweb.de/anleitungen/ka_table.shtml)
Tabellen
HTML-Tabellen bieten neben der bloßen Darstellung von Daten auch ein wertvolles Hilfsmittel zur Gestaltung von Internetseiten.
Eine Tabelle wird immer mit dem <TABLE>-Tag eingeleitet und mit </TABLE> beendet. Innerhalb des Gerüstes werden zuerst die Zeilen mittels des <TR>-Tags definiert, in denen dann die Spalten durch den <TD>-Befehl eingebracht werden. Eine geöffnete Anweisung muss jeweils durch den dazugehörigen Endtag, also den Starttag in Verbindung mit einem Slash (beispielsweise </TR> oder </TD>) beendet werden. Eine einfache Tabelle würde also wie folgt aussehen:
<table>
<tr>
<td>GRAMMIWEB.DE</td>
</tr>
</table>
Ergebnis:
| GRAMMIWEB.DE |
Auf diesem Grundgerüst aufbauend können leicht neue Zeilen und Spalten eingebracht werden. Hierzu muss nur an der gewünschten Stelle der jeweilige Befehl integriert werden, also zum Beispiel ein <TR> ... </TR> nach dem letzten </TR>, um eine zusätzliche Zeile einzufügen, oder auch weitere <TD> ... </TD>-Anweisungen, um neue Spalten zu einzubinden.
<table>
<tr>
<td>Zeile 1-Spalte 1</td>
<td>Zeile
1-Spalte 2</td>
<td>Zeile
1-Spalte 3</td>
</tr>
<tr>
<td>Zeile 2-Spalte 1</td>
<td>Zeile
2-Spalte 2</td>
<td>Zeile
2-Spalte 3</td>
</tr>
</table>
Ergebnis:
| Zeile 1-Spalte 1 | Zeile 1-Spalte 2 | Zeile 1-Spalte 3 |
| Zeile 2-Spalte 1 | Zeile 2-Spalte 2 | Zeile 2-Spalte 3 |
Mittels des <BGCOLOR>-Tags können Tabellen oder auch nur einzelne Bestandteile mit einer Hintergrundfarbe versehen werden. Hierzu wird der Zusatz BGCOLOR="#Farbwert" dem gewünschten Tabellenbestandteil hinzugefügt, also zum Beispiel hinter dem <TABLE>-Tag, um die komplette Tabelle einzufärben, hinter <TR>, um eine Zeile zu verschönern, oder hinter einer <TD>-Anweisung, um eine Zelle zu hinterlegen. Als Farbwert sollten die hexadezimalen RGB-Codes der gewünschten Farbe gewählt werden, um eine weitestgehende Kompatibilität zu allen Browsern zu gewährleisten. Eine Code-Übersicht können Sie in unserer Farbtabelle finden.
<table bgcolor="#FARBE">
<tr>
<td>Zeile 1-Spalte 1</td>
<td>Zeile
1-Spalte 2</td>
</tr>
<tr>
<td>Zeile 2-Spalte 1</td>
<td bgcolor="#FARBE>Zeile 2-Spalte 2</td>
</tr>
</table>
Ergebnis:
| Zeile 1-Spalte 1 | Zeile 1-Spalte 2 |
| Zeile 2-Spalte 1 | Zeile 2-Spalte 2 |
Natürlich können auch Grafiken eine Tabelle hinterlegen. Verwenden Sie hierzu einfach anstatt des <BGCOLOR>-Tags den Zusatz <BACKGROUND>, also zum Beispiel <TABLE BACKGROUND="Grafik">.
Mit Hilfe der <DIV ALIGN>-Anweisung kann auf die Ausrichtung einer Tabelle Einfluß genommen werden. Hierbei kann diese linksbündig (<DIV ALIGN="LEFT">), zentriert (<DIV ALIGN="CENTER">) oder rechtsbündig (<DIV ALIGN="RIGHT">) ausgegeben werden. Die Anweisung wird vor dem <TABLE>-Tag gegeben und nach Beendigung der Tabelle (</TABLE>) mittels des </DIV>-Tags geschlossen.
<div align="left"><table>
<tr><td>Linksbündig</td></tr>
</table></div>
<div align="center"><table>
<tr><td>Zentriert</td></tr>
</table></div>
<div align="right"><table>
<tr><td>Rechtsbündig</td></tr>
</table></div>
Ergebnis:
| Linksbündig |
| Zentriert |
| Rechtsbündig |
Der Größe des Tabellenrahmens wird mit BORDER="x" angegeben, wobei "x" für einen Wert in Pixeln steht. Die Farbe des Rahmens kann mittels BORDERCOLOR="#Farbwert" angegeben werden, "#Farbwert" steht auch hier für einen hexadezimalen Farbcode, den Sie unserer Farbtabelle entnehmen können. Den Abstand der einzelnen Zellen zueinander gibt die Anweisung CELLSPACING="x" vor, auch hier bezieht sich "x" auf einen Wert in Pixeln. Der Abstand von Zellinhalten zum Rahmen wird mit dem Tag CELLPADDING="x" gesteuert.
<table border="5" bordercolor="#800000" cellspacing="10"
cellpadding="5">
<tr>
<td>Zeile 1-Spalte 1</td>
<td>Zeile
1-Spalte 2</td>
</tr>
<tr>
<td>Zeile 2-Spalte 1</td>
<td>Zeile
2-Spalte 2</td>
</tr>
</table>
Ergebnis:
| Zeile 1-Spalte 1 | Zeile 1-Spalte 2 |
| Zeile 2-Spalte 1 | Zeile 2-Spalte 2 |
Die COLSPAN- bzw. ROWSPAN-Anweisung ermöglicht die Darstellung von "unproportionalen" Tabellen. Hierbei wird der jeweilige Tag genutzt, um Zellbereiche festzulegen. In Verbindung mit dem <TD>-Tag gibt COLSPAN an, über wie viele Spalten eine Zelle angezeigt werden soll, ROWSPAN ist hier das Pendant zur Anzeige von Zeilen.
<table>
<tr>
<td>Zeile 1-Spalte 1</td>
<td colspan="2">Zeile 1-Spalte 2</td>
</tr>
<tr>
<td>Zeile 2-Spalte 1</td>
<td>Zeile
2-Spalte 2</td>
<td>Zeile
2-Spalte 3</td>
</tr>
</table>
<table>
<tr>
<td>Zeile 1-Spalte 1</td>
<td rowspan="2">Spalte 2</td>
<td>Zeile
1-Spalte 2</td>
</tr>
<tr>
<td>Zeile 2-Spalte 1</td>
<td>Zeile
2-Spalte 3</td>
</tr>
</table>
Ergebnis:
| Zeile 1-Spalte 1 | Zeile 1-Spalte 2 | |
| Zeile 2-Spalte 1 | Zeile 2-Spalte 2 | Zeile 2-Spalte 3 |
| Zeile 1-Spalte 1 | Spalte 2
|
Zeile 1-Spalte 3 |
| Zeile 2-Spalte 1 | Zeile 2-Spalte 3 |
Die Abmessungen einer Tabelle werden mittels WIDTH und HEIGHT vorgegeben. Hierbei gibt der Wert hinter WIDTH die Breite der Tabelle, HEIGHT deren Höhe an. Wertangaben sind sowohl in Pixeln als auch prozentual möglich. Das nachfolgende Beispiel erzeugt eine Tabelle von 50 Pixeln Höhe, die sich über 80 Prozent des darstellbaren Bereichs erstreckt.
<table
width="80%" height="50">
<tr>
<td>Grammiweb.de</td>
</tr>
</table>
Ergebnis:
| Grammiweb.de |
Auf dieselbe Weise kann auch Einfluss auf Zellen genommen werden. Unser Beispiel erzeugt eine Tabelle mit einer Breite von 80 Prozent des darstellbaren Bereichs, bei der die jeweils ersten Tabellenzellen jeder Zeile eine Breite von 120 Pixeln erhalten und die zweiten den restlichen Platz für sich beanspruchen können. Hierbei ist auch die Hierarchie innerhalb einer Tabelle zu sehen, die Wertangaben für Zellen unter die für die grundlegende Tabelle stellt.
<table width="80%">
<tr>
<td width="120">Zeile 1-Spalte 1</td>
<td width="100%">Zeile 1-Spalte 1</td>
</tr>
<tr>
<td width="120">Zeile 2-Spalte 1</td>
<td width="100%">Zeile 2-Spalte 1</td>
</tr>
</table>
Ergebnis:
| Zeile 1-Spalte 1 | Zeile 1-Spalte 1 |
| Zeile 2-Spalte 1 | Zeile 2-Spalte 1 |
© Grammiweb.de Internetlösungen. Alle Rechte vorbehalten. Stand: 22.12.2024
Seitenanfang - Sponsor werden - Datenschutz - Medien - Impressum - Werbung - Hilfe - Kontakt