HTML Tutorial [ Inhaltsverzeichnis ] Tabellen
in HTML Teil III HTML Quellcode: <html>
<head> <title>Mustermanns Blumentips</title> <style type="text/css"> <!-- body { background-color:#33EE00; color:#002000; font-family:Times; } table { background-color:white; color:black; } th { background-color:navy; color:white; } --> </style> </head> <body> <table align="center" border="1"> <tr> <th colspan="2"> Blumentips </th> </tr> <tr> <th>Nummer</th> <th>Tipp</th> </tr> <tr> <td>Blumentip 1</td> <td> Vergessen Sie nie Ihre Blumen zu gießen! </td> </tr> <tr> <td>Blumentip 2</td> <td>Nachtschattengewächse im Dunkeln lagern</td> </tr> </table> </body> </html> Erklärung:
Das neu hinzugekommene Attribut colspan verbindet
zwei Spalten zu einer einzigen Zelle. Diese Zelle erstreckt sich über
die gesamte Tabellenbreite.
Man kann die Breite sogar individuell festsetzen, unabhängig
von der vorgegebenen Standardbreite der Tabelle.
Hier ein Beispiel zur Verdeutlichung:
<table border="2"> <tr> <td>Zelle1, Reihe1</td> <td>Zelle2, Reihe1</td> <td>Zelle3, Reihe1</td> </tr> <tr> <td colspan="2">Zelle1, Reihe2</td> <td rowspan="2">Zelle2, Reihe2</td> </tr> <tr> <td>Zelle1, Reihe3</td> <td>Zelle2, Reihe3</td> </tr> </table> Hinweis: Die einsetzbaren Attribute für das td Tag z.B. bgcolor , align, width,... bleiben erhalten, so dass sich keine Einschränkungen ergeben. Mit colspan und rowspan lassen sich teilweise sehr komplexe Layouts erstellen. Denken Sie bei Planungen von anspruchsvollen oder komplexen Layouts stets auch an den Einsatz dieser beiden Hilfen. HTML Tutorial [ Inhaltsverzeichnis ] ©2003 de Vries |