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:


<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>

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:


<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>

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:


<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>

Und so siehts aus:

Im Internet-Explorer: