Online HTML-Kurs (Teil 14): Tabellen mit table
Tabellen sind im Vergleich zu anderen HTML-Elementen etwas schwieriger zu verstehen, da es innerhalb des <table>-Containers noch viele weitere Elemente zur Konstruktion einer schönen Tabelle gibt.
Eine sehr einfache Tabelle mit 4 Zellen aufgeteilt auf 2 Spalten und 2 Zeilen sieht dann wie folgt aus:
<html>
<head>
<title>Dies ist der Titel</title>
</head>
<body>
<table>
<tr><td>Zelle 1</td><td>Zelle 2</td></tr>
<tr><td>Zelle 3</td><td>Zelle 4</td></tr>
</table>
</body>
</html>
Und so siehts aus:
| Zelle 1 | Zelle 2 |
| Zelle 3 | Zelle 4 |
Man kann an diesem Beispiel schon relativ leicht sehen, dass man eine Reihe anderer Elemente benötigt um Tabellenzeilen (<tr>) und Tabellenzellen (<td>) zu definieren. Dazu aber später mehr. Zunächst kümmern wir uns um die Attribute, die mit dem <table>-Tag einhergehen.
Das erste Attribut ist "bgcolor" mit dem sich die Hintergrundfarbe der Tabelle ändern lässt. Die Angabe der RGB-Farben wird wieder über Hex-Werte vorgenommen, siehe dazu auch Teil 3.
Das nächste Attribut ist "border" mit dem um die Tabelle ein Rahmen gezogen werden kann. Dabei sind die erlaubten Werte Zahlen, die die Pixelstärke und damit die Dicke des Rahmens
bestimmen. Ist der Wert auf der Standardeinstellung "0", so wird überhaupt kein Rahmen angezeigt. Steht eine andere Zahl bei "border", so wird nicht nur ein Rahmen um die Tabelle gezogen, sondern auch um die einzelnen Zellen.
Um die Breite der gesamten Tabelle festzulegen, steht uns das Attribut "width" zu Verfügung. Hier sind die erlaubten Werte entweder eine Pixelangabe, die somit der Tabelle eine feste Breite zuordnen oder eine Prozentangabe (mit Prozentzeichen), die sich auf die Breite des übergordneten Containers beziehen (Zum Beispiel wenn direkt unterhalb des <body>-Tags eine Prozentangabe erfolgt, so wird die Bildschirmbreite bzw. die Breite des Browserfensters als Maßstab genommen).
Die drei Attribute kann man zum Beispiel so verwenden:
<html>
<head
<title>Dies ist der Titel</title>
</head>
<body>
<table bgcolor="#00FF00" border="2" width="100%">
<tr><td>Zelle 1</td><td>Zelle 2</td></tr>
<tr><td>Zelle 3</td><td>Zelle 4</td></tr>
</table>
</body>
</html>
Und so siehts aus:
| Zelle 1 | Zelle 2 |
| Zelle 3 | Zelle 4 |
Außer den drei Attributen für Hintergrundfarbe, Umrandung und Breite gibt es noch eine Reihe weiterer Attribute die wichtig bei Tabellen sind. So zum Beispiel "cellspacing" und "cellpadding".
Mit "cellspacing" kann man den Abstand zwischen den Zellen festlegen; es entsteht ein Leerraum zwischen den einzelnen Zellenblöcken. Den Wert den "cellspacing" bekommt, kann entweder in Prozent oder in Pixel gemacht werden.
<html>
<head
<title>Dies ist der Titel</title>
</head>
<body>
<table border="2" cellspacing="10">
<tr><td>Zelle 1</td><td>Zelle 2</td></tr>
<tr><td>Zelle 3</td><td>Zelle 4</td></tr>
</table>
</body>
</html>
Und so siehts aus:
| Zelle 1 | Zelle 2 |
| Zelle 3 | Zelle 4 |
Nachdem wir nun den Außenabstand der Zellen festgelegt haben, lässt sich nun noch der Innenabstand festlegen. Dies geschieht mit "cellpadding". Mit diesem Attribut kann man bestimmen wieviel Zwischenraum zwischen Inhalt und Zellwand gemacht werden soll. Auch hier erfolgt die Wertangabe in Prozent oder in Pixel.
<html>
<head
<title>Dies ist der Titel</title>
</head>
<body>
<table border="2" cellpadding="10">
<tr><td>Zelle 1</td><td>Zelle 2</td></tr>
<tr><td>Zelle 3</td><td>Zelle 4</td></tr>
</table>
</body>
</html>
Und so siehts aus:
| Zelle 1 | Zelle 2 |
| Zelle 3 | Zelle 4 |
Auch für Tabellen gibt es noch eine Reihe weiterer Attribute, welche wir aber nicht verwenden wollen, da sie als Standard vom W3C nicht unterstützt werden und nur von einzelnen Browsern verwendet werden. Eine Ausnahme hiervon gibt es noch, nämlich die Attribute "frame" und "rules", die durch verschiedene Werte, verschiedene Linien des Rahmens entweder aus- oder einblenden. Die Verwendung findet man bei Selfhtml.org beschrieben.
Kategorien
HTML , Step-by-Step1 TrackBacks
Folgende Einträge anderer Blogs beziehen sich auf den Eintrag Online HTML-Kurs (Teil 14): Tabellen mit table
TrackBack-URL dieses Eintrags: http://www.undertec.de/mt-cgi/mt-tb.cgi/246
Morgen beginnt wie bereits hier im Blog angekündigt der Online HTML-Kurs. Diese Seite soll dazu dienen ein Inhaltsverzeichnis zu allen Kursseiten bereitzustellen. Im Laufe der Zeit wird das Inhaltsverzeichnis ergänzt. Jeder Artikel kann kommentier... Mehr
Jetzt kommentieren