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 hat im Alter von 12 Jahren begonnen, auf einem Atari ST 1040 STFM in Omikron und STOS Basic zu programmieren.
Spiele interessierten ihn nicht so sehr.
Die Welt der Bits und Bytes hat ihn gefangen.
Programmierertechnisch folgten auf dem ersten 486er Turbo Pascal, Visual Basic.
Mit dem ersten Internet Anschluss per 56k Modem folgten HTML, Javascript, CSS und Macromedia Flash.
Die Website www.wizzquiz.de wurde geboren.
Eine Flash Online-Gaming Plattform mit Quiz Spielen, Memory, Sokoban etc.
Später entwickelte er Software unter anderem für Continentale und Siemens AG.
Seit zwei Jahrzehnten konzentriert er sich 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.
