Eine Tabelle wird durch die Tags <table> ... </table> begonnen bzw. beendet. Damit man den Rahmen sieht, muss im öffnenden Tag eine Rahmendicke > 1 angegeben werden, z.B. <table border="1">, sonst wird der Rahmen nicht angezeigt (was häufig auch gewünscht ist...).
Innerhalb der Tabelle wird jede Zeile durch die Tags <tr> ... </tr> (engl. table row) eingeschlossen. Innerhalb jeder Zeile wiederum wird jede Zelle durch die Tags <td> ... </td> (engl. table data) eingeschlossen.
Ein Tabellentitel kann mit <caption align="bottom"> ... </caption> hinzugefügt werden. Er sollte direkt nach dem table-Tag folgen. Über das align-Attribut ist die Seite der Tabelle wählbar, an der der Titel angezeigt wird.
Möchte man in der ersten Zeile fett gedruckte Spaltenüberschriften (engl. table header) haben, benutzt man hierin einfach <th> ... </th> an Stelle der entsprechenden td-Tags.
Damit ergibt sich für eine 2x3-Tabelle folgende Grundstruktur:<table border="1"> <caption> ... </caption> <tr> <td> ... </td> <td> ... </td> <td> ... </td> </tr> <tr> <td> ... </td> <td> ... </td> <td> ... </td> </tr> </table>
1. Zeile, 1. Spalte |
1. Zeile, 2. Spalte |
1. Zeile, 3. Spalte |
2. Zeile, 1. Spalte |
2. Zeile, 2. Spalte |
2. Zeile, 3. Spalte |
Die Grösse der Tabellenzellen passt sich automatisch der Grösse des Inhalts an. Sollen einzelne Zellen der Tabelle leer bleiben, sollte hierin ein nicht komprimierbares Leerzeichen ( ) stehen, damit jeder Browser dies richtig anzeigt.
Eine Tabelle wie oben gezeigt sieht recht farblos aus und die Inhalte sind "an den Rand gequetscht". Dies werden wir jetzt ändern und Farbe sowie den Abstand zwischen Zellen (cellspacing) und den Innenabstand zwischen Inhalt und Zellrahmen (cellpadding) einstellen.
Den Abstand zwischen den Zellen kann man durch ein
Attribut des <table>-Tag einstellen, hier: cellspacing="10" |
Den Abstand zwischen dem Zellinhalt und dem Zellrand
kann man ebenfalls durch ein Attribut des <table>-Tag einstellen,
hier: cellpadding="10" |
Die Hintergrundfarbe setzt man für die ganze Tabelle im <table>-Tag / für eine Zelle im <td>-Tag durch z.B.: bgcolor="blue" |
Die Schriftfarbe setzt man wie gewohnt mit der style-Anweisung
im jeweiligen Tag, hier im <td>-Tag: style="color: white;" |
Wenn eine Tabelle in der Breite nicht die ganze Seite füllt, kann man deren Ausrichtung auf der Seite durch ein weiteres Attribut des table-Tags vorgeben: align="center" richtet die Tabelle z.B. zentriert auf der Seite aus (left, right entsprechend).
Auch das Tabellenraster kann durch das Verbinden von einzelnen Zellen zu größeren Zellen an die jeweiligen Erfordernisse angepasst werden. Hierzu müssen in das gewünschte td-Tag für das zeilenweise Zusammenfassen eine rowspan-Anweisung und für das spaltenweise Zusammenfassen eine colspan-Anweisung eingefügt werden (s.u.).
style= "width: 30%;" rowspan="3" |
style="height: 100px;" | k.A. |
style="height: 60px;" colspan="2" | ||
k.A. | k.A. |
Die Breite der obigen, zentriert auf der Seite dargestellten Tabelle wurde durch die Anweisung style="width:70%;" im table-Tag auf 70% der verfügbaren Fensterbreite festgelegt.
Die Anweisung style="width:30%;" in einem td-Tag der ersten Spalte der Tabelle legt dagegen fest, dass diese 30% der gesamten Tabellenbreite ausmachen soll.
© K. Milzner, 2013 |