5. HTML-Kurs - Tabellen erstellen (2)
5.2 Rahmen und Abstände in Tabellenzellen
5.2.1 "border"
Bei den Beispielen auf der vorigen Seite erkennt man zwar einen gewissen ordentlichen Aufbau der Daten, aber eine richtige Tabelle ist noch nicht erkennbar, weil noch keine Rahmenlinien vorhanden sind. Das ist in den Fällen, wo Tabellen als Gestaltungsmittel für Websitevorlagen genutzt wird, absolut sinnvoll, denn dort würden Rahmenlinien das Layout in den meisten Fällen zerstören. Wenn man jedoch eine klassische Tabelle z.B. zum Erstellen von Spielplänen nutzt, dann ist ein Rahmen zur Abgrenzung der einzelen Zellen durchaus wünschenswert. Um dies zu erreichen fügt man in der Regel dem Tag table das Attribut border hinzu, welches in ganzen Zahlen ohne Angabe der Maßeinheit definiert wird:
<html>
<head>
<title>Grundstruktur einer Tabelle</title>
</head>
<body>
<table border="1">
<tr>
<td>Tabellenzelle 1</td>
<td>Tabellenzelle 2</td>
</tr>
</table>
</body>
</html>
Der Vollständigkeit halber sei noch erwähnt, dass die Maßeinheit, die normalerweise zum Einsatz kommt Pixel sind, auch wenn px als Abkürzung nicht explizit angegeben wird. Die bildschirmunabhängige Maßeinheit Pixel entspricht exakt einem Bildschirmpunkt. Theoretisch könnte die Angabe auch in % erfolgen, dies wird von vielen Browsern aber ebenfalls als Pixel definiert, wie dieser Link vom W3C zeigt.
Im nachfolgenden Beispiel habe ich Tabellen mit verschiedenen Rahmenstärken erstellt, der jeweilige Borderwert steht unmittelbar über der Tabelle: klick!
Bitte beachten: auch wenn Sie keinen Rahmen um Ihrer Tabelle haben möchten, sollten Sie border mit in den Table-Tag schreiben, dann halt mit dem Wert Null. So ist es einfach besseres HTML und das wollen wir ja hier ordentlich lernen. :)
5.2.2 "cellspacing"
Wie Sie im letzten Beispiel sehen konnten, kann man alleine mit unterschiedlichen Werten für das Borderattriut nette Effekte erzielen und eine ordentliche Abgrenzung der einzelnen Zellen ist auch gewährleistet. Bei genauerer Betrachtung ist Ihnen aber vielleicht auch aufgefallen, dass, sobald ein Rahmen eingefügt wird, sich der äußere Tabellenrahmen dem gewünschten Wert anpasst, die Linien zwischen den einzelnen Tabellenzellen jedoch sind immer gleich und zeigen einen kleinen weißen Spalt, der in der Größe trotz abgeändertem Borderwert immer gleich bleibt.
Um dies zu beeinflussen, wird das Attribut cellspacing genutzt. Cellspacing kann mit "Zellenabstand" übersetzt werden. Der Abstand der einzelnen Zellen wird ebenfalls in Pixeln angegeben und kann zwischen 0 und beliebig liegen und wird genau wie das Attribut "Border" innerhalb des Table-Tags definiert. Bitte beachten Sie: wenn kein Cellspacing-Wert angegeben wird, heißt dies nicht, dass der Wert automatisch 0 ist, denn wie Sie im oberen Beispiel sehen, wurde dort ja eben kein Wert angegeben und es ist doch ein Spalt zu sehen! Wenn Sie keinen Zellabstand haben möchten, müssen Sie explizit cellspacing="0" eingeben.
Die Syntax ist wie folgt:
<html>
<head>
<title>Grundstruktur einer Tabelle</title>
</head>
<body>
<table border="1"cellspacing="5">
<tr>
<td>Tabellenzelle 1</td>
<td>Tabellenzelle 2</td>
</tr>
</table>
</body>
</html>
Im nachfolgenden Beispiel habe ich Tabellen mit verschiedenen Zellabständen, jedoch mit einem festen Borderwert von 1 erstellt: klick!
5.2.3 Tabellenattribut "cellpadding"
Vielleicht möchten Sie nun noch den Abstand des Textes vom Zellenrand verändern, denn bei den bisherigen Beispielen ist doch alles recht beengt. Auch das geht im HTML: Sie nutzen dafür das Attribut cellpadding. Padding bedeutet in deutsch in etwa aufpolstern oder füllen und bezogen auf unsere Tabelle kann man sich das so vorstellen, dass die einzelne Zelle aufgepolstert/gefüllt wird.
Die Syntax ist vergleichbar mit der für cellspacing:
<html>
<head>
<title>Grundstruktur einer Tabelle</title>
</head>
<body>
<table border="1" cellspacing="5" cellpadding="5">
<tr>
<td>Tabellenzelle 1</td>
<td>Tabellenzelle 2</td>
</tr>
</table>
</body>
</html>
Im nachfolgenden Beispiel habe ich Tabellen mit verschiedenen Zellinnenabständen, jedoch mit einem festen Borderwert und Zellabstand von 1 erstellt: klick!
Nachstehend zusammenfassend noch eine Grafik, die die Begriffe border, sellspacing und cellpadding veranschaulichen:
