Tabellen in Webseiten nutzen
Posted in Allgemeines, Grundlagen, HTML, Webdesign on 03/27/2011 09:35 by Hoegerl_KarlHeute wird für das Webdesign meist Cascading Style Sheets verwendet. Trotzdem ist es für Einsteiger interessant, die Möglichkeiten von Tabellen im Webdesign kennenzulernen. Zudem können Daten tabellarisch dargestellt werden. Fangen wir mit der Darstellung von tabellarischen Daten an.
Tabellen werden mit dem Tag <table border=“1“ > … </table> definiert. Die Tabelle wird nun als Zeile betrachtet. In der Zeile gibt es jeweils eine festgelegte Menge an Zellen.
Tabelle <table> | ||||
Zeile 1 <tr> |
| Zelle 1 <th> | Zelle 2 <th> | Zelle 3 <th> |
| ||||
Zeile 2 <tr> |
| Zelle 1 <td> | Zelle 2 <td> | Zelle 3 <td> |
| ||||
Die oben gezeigte Tabelle hat den Quellcode:
<body> <h1>Tabellarische Daten</h1> <table border="1"> <!-- Tabelle --> <tr><!-- Zeile 1 --> <th>Zelle 1</th> <th>Zelle 2</th> <th>Zelle 3</th> </tr> <tr><!-- Zeile 2 --> <td>Zelle 1</td> <td>Zelle 2</td> <td>Zelle 3</td> </tr> </table></body>
Bei dem Tag <table> können Attribute eingesetzt werden
Attribut | Beschreibung |
align | Ausrichtung der Tabelle: left, center, right |
border | Rahmenstärke: in Pixel |
cellpadding | Innenabstand des Textes: in Pixel |
cellspacing | Abstand der Zellen zueinander: in Pixel |
width | Breite der Tabelle: in Prozent oder Pixel |
height | Höhe der Tabelle: in Prozent oder Pixel |
bgcolor | Tabellenweite Hintergrundfarbe: #RRGGBB |
Ein Hintergrundbild lässt sich mit Hilfe von CSS einbinden
Der Tag lautet dann
<table border=“0“ style=”background-image:url(background.jpg)”> … </table>
Tabelle mit Hintergrundbild
Natürlich lässt sich das oben gezeigte Attribut für Hintergrundbilder auch in einer Tabellenzelle einsetzen.
Bei den Tabellenzellen gibt es weitere Attribute
Attribut | Beschreibung |
align | Ausrichtung der Zelle: left, center, right |
bgcolor | Tabellenweite Hintergrundfarbe: #RRGGBB |
width | Breite der Zelle: in Prozent oder Pixel |
height | Höhe der Zelle: in Prozent oder Pixel |
nowrap | Kein Zeilenumbruch |
colspan | Zellen zeilenweise verbinden |
rowspan | Zellen spaltenweise verbinden |
Tabellen als Design Vorlage für Webseiten
Viel häufiger als zur Darstellung tabellarischer Daten werden Tabellen für Vorlagen in HTML Webseiten eingesetzt. Sie haben den Vorteil, dass mit Grundkenntnissen schöne Designs erstellt werden können. Wir werden jetzt ein Beispiel erarbeiten.
Die Webseite wird in Bereiche aufgeteilt
Webdesign mit Tabelle
1. Schritt:
Wir beginnen mit unserer Basis Webseite und stellen die Ränder der Webseite auf 0 Pixel ein. Hier sind die Attribute beim Internet Explorer und dem Browser Firefox unterschiedlich.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Design Vorlage</title> </head> <body marginheight="0" marginwidth="0" leftmargin="0" topmargin="0"> </body></html>2. Schritt:
Als nächstes fügen wir die Tabelle für das Grundgerüst ein. Die Rahmenstärke wird mit 1 Pixel definiert und sichtbar. Damit die Zellen sichtbar werden, schreiben wir einen Buchstaben hinein. Bei der ersten Zeile verbinden wir mit colspan die drei Tabellenzellen zu einer Zelle.
Bei der zweiten Zeile fügen wir bei den Zellenattributen mit width die Breite der jeweiligen Spalte ein.
...<table border="1" cellspacing="0" cellpadding="0" width="100%"> <tr> <td colspan="3">a</td><!-- 3 Zellen verbinden --> </tr> <tr> <td width="200">a</td> <td width="*">a</td> <td width="3%">a</td> </tr></table>...3. Schritt:
Jetzt bringen wir Hintergrundbilder in die Tabellenzellen ein. Wir setzen den Beginn des Textes nach oben ( vspace=“top“ ) in den Bereichen Menu und Text.
...<table border="1" cellspacing="0" cellpadding="0" width="100%"> <tr> <td colspan="3" style="background-image:url(images/hawaii_titel.jpg)">a <br /> <br /> <br /> <br /> <br /> </td><!-- 3 Zellen verbinden --> </tr> <tr> <td width="200" style="background-image:url(images/strand.jpg)">a <br /> <br /> <br /> <br /> <br /> </td> <td width="*">a</td> <td width="3%">a</td> </tr></table>... Ergebnis:
Webseiten Vorlage mit Tabelle
Manche einfache, mobile Geräte unterstützen Cascading Style Sheets nur teilweise. Hier hilft das Tabellen Design weiter.
Type the name of a command and press enter to execute it, or help for assistance.
Zuletzt aktualisiert von .
