Tabellen in HTML – Teil 3 Cellpadding und Cellspacing
Tabellen in HTML – Teil 3
In diesem Tutorial möchte ich mich mit Abständen innerhalb der Tabelle beschäftigen.
Hierzu gibt es zwei entscheidende Begriffe: cellpadding und cellspacing.
Für dieses Tutorial legen wir eine Standardtabelle mit 3 Spalten und 3 Zeilen an.
In jede Zelle schreiben wir einen kurzen Text. Beispielsweise: Zelle 1, Zelle 2, Zelle 3 usw. Wir setzen die Rahmendicke auf 1. Ich habe die Breite meiner Tabelle auf 40% festgelegt.
Der Code sieht dann folgendermaßen aus:
Beispielcode HTML:
<pre><html>
<body>
<table width="40%" border="1">
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 4</td>
<td>Zelle 5</td>
<td>Zelle 6</td>
</tr>
<tr>
<td>Zelle 7</td>
<td>Zelle 8</td>
<td>Zelle 9</td>
<tr>
</table>
</body>
</html></pre>
Das Ergebnis sieht nun folgendermaßen aus:
Im Internet Explorer:
HTML leere Tabelle im Internet Explorer
Im Firefox:
HTML leere Tabelle im Firefox
Im Opera:
HTML leere Tabelle im Opera
Die Schrift ist regelrecht an den Rand geklatscht. Das sieht nicht wirklich schön aus. Damit die Schrift einen Abstand zum Zellenrand bekommt fügen wir das Element cellpadding ein:
Beispielcode HTML:
<pre><html>
<body>
<table width="40%" border="1" cellpadding="5">
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 4</td>
<td>Zelle 5</td>
<td>Zelle 6</td>
</tr>
<tr>
<td>Zelle 7</td>
<td>Zelle 8</td>
<td>Zelle 9</td>
<tr>
</table>
</body>
</html></pre>
Nun kann man deutlich den Abstand erkennen. Das sieht schon viel besser aus.
Im Internet-Explorer:
HTML Tabelle Cellpadding im Internet Explorer
Im Firefox:
HTML Tabelle Cellpadding im Firefox
Im Opera:
HTML Tabelle Cellpadding im Opera
Es ist auch möglich den Abstand zwischen den Zellen zu vergrößern. Dazu verwenden wir das cellspacing Element:
Beispielcode HTML:
<pre><html>
<body>
<table width="40%" border="1" cellpadding="5" cellspacing="10">
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 4</td>
<td>Zelle 5</td>
<td>Zelle 6</td>
</tr>
<tr>
<td>Zelle 7</td>
<td>Zelle 8</td>
<td>Zelle 9</td>
<tr>
</table>
</body>
</html></pre>
Und so siehts aus:
Im Internet-Explorer:
HTML Tabelle cellspacing im Internet Explorer
Im Firefox:
HTML Tabelle cellspacing im Firefox
Im Opera:
HTML Tabelle cellspacing im Opera
Author: Andreas Lang
Andreas Lang konzentriert sich seit zwei Jahrzehnten auf die Webentwicklung und Webdesign mit dem Schwerpunkt PHP, Laravel und Javascript und betreut seine Kunden mit Herz und Seele in allen Bereichen von Entwicklung, Design, Suchmaschinenoptimierung, IT-Recht, IT-Sicherheit etc.
