http://www.tiptom.ch/homepage/ - Homepage-Tips von Thomas Lüthi

Sie sind hier: tiptom.ch > Homepage-Tips > FAQ

Warum hat es um die Bilder in Tabellenzellen Abstände?
Wie kriege ich sämtliche Rahmen und Abstände in einer Tabellenzelle weg?

1. In HTML alle Leerzeilen und Zeilenumbrüche im Quelltext zwischen <td> und </td> entfernen:
   Statt so:
   <td> <img src="..." alt="..."> <td>
   oder so:
   <td>
 <img src="..." alt="...">
<td>
   unbedingt so:
   <td><img src="..." alt="..."><td>

   Erklärung:
   Sobald in der Zelle ein Leerzeichen vorkommt, setzen viele Browser die Höhe auf den Wert einer Textzeile. (Dieser kann in CSS mit line-height explizit gesetzt werden, sonst nehmen die Browser meist die implizite Zeilenhöhe von ca. 1.20em.)
   Zeilenumbrüche im HTML-Quelltext wirken bei der Anzeige wie ein Leerzeichen.

2. Mit CSS alle Rahmen und Abstände auf Null setzen sowie den Zelleninhalt nach unten ausrichten:

   table { border:0 none; border-spacing:0; border-collapse:collapse; }
td { border:0 none; padding:0 none; }
td img { display:block; /* und/oder */ vertical-align:bottom; }

   Erklärung für display:block siehe:
   Artikel "Images, Tables, and Mysterious Gaps" von Eric A. Meyer.
   https://meyerweb.com/eric/articles/devedge/img-table-gaps/

3. Wenn uralte Browser und solche mit abgeschaltetem CSS auch berücksichtigt werden sollen, kann man in HTML zusätzlich noch die (veralteten) Attribute im TABLE-Tag angeben:
   <table border="0" cellspacing="0" cellpadding="0">

So sieht's aus: Beispielseite.

---

Auf diesen FAQ-Eintrag verlinken:
Warum hat es um die Bilder in Tabellenzellen Abstände?
Wie kriege ich sämtliche Rahmen und Abstände in einer Tabellenzelle weg?
http://www.tiptom.ch/homepage/faq.php?q=tdimg

Zur Liste mit allen Fragen

Zum Seitenanfang

---