(Stand: 23.12.24, Adresse: http://www.grammiweb.de/html/html064.shtml)
Tabelleninhalte bündig präsentieren
Ein häufig auftretendes Problem bei der Verwendung von Tabellen in Layouts ist das der Einrückung von Zelleninhalten. Rückt man diese nicht ein, erscheinen schnell längere Inhalte aneinandergereiht und eine Trennung beim Betrachten wird erschwert. Rückt man diese ein, sind zwar die Zellen voneinander getrennt, allerdings ist das Ganze nicht mehr bündig zum Rest der Seite:
Beispiel einer Tabelle ohne Trennung der Zellen:
| Inhalt Zelle 1 | Inhalt Zelle 2 | Inhalt Zelle 3 |
Beispiel einer Tabelle mit Einrückung von Zelleninhalten (mit "cellpadding"):
| Inhalt Zelle 1 | Inhalt Zelle 2 | Inhalt Zelle 3 |
Beispiel einer Tabelle mit Einrückung von Zellen (mit "cellspacing"):
| Inhalt Zelle 1 | Inhalt Zelle 2 | Inhalt Zelle 3 |
Es bieten sich zwei sinnvolle Wege, eine Einrückung zu erreichen und trotzdem das Layout nicht zu stören:
1. CSS
Über die CSS-Anweisung "padding-[seite]" können Sie einen Abstand
vorschreiben. In unserem Beispiel, bei dem die Zellen ja jeweils nach rechts
"ausgeweitet" werden sollen (da die linke Seite ja bündig mit dem
Fließtext erscheinen soll), würde die Anweisung also lauten: padding-right:
[Anzahl Pixel]px (alternativ können natürlich auch andere Größenangaben
verwendet werden).
Inhalt Zelle 1 |
Inhalt Zelle 2 |
Inhalt Zelle 3 |
Der Quelltext zu diesem Beispiel lautet:
<table border="0"
cellpadding="0" cellspacing="0"><tr>
<td>
<div style="padding-right: 15px">Inhalt Zelle 1</div>
</td>
<td>
<div style="padding-right: 15px">Inhalt Zelle 2</div>
</td>
<td>
<div style="padding-right: 15px">Inhalt Zelle 3</div>
</td>
</tr></table>
Das Problem an dieser Lösung ist, dass sie
leider von einigen Browsern nicht oder falsch interpretiert wird.
2. Eingabe von Leerzeichen
Eine simple Alternative zur CSS-Lösung bietet HTML selbst: Die Eingabe von Leerzeichen zur Ausgabesteuerung. Dabei gibt es in unserem Beispiel zwei Möglichkeiten: Entweder, die Leerzeichen werden im Anschluss an die breiteste Tabellenzelle gesetzt und dies in jeder Spalte wiederholt, oder es werden Extraspalten, gefüllt mit Leerzeichen, eingerichtet.
| Inhalt Zelle 1 | Inhalt Zelle 2 | Inhalt Zelle 3 |
Bei diesem Beispiel wurden der ersten und der zweiten Zelle jeweils eine
Spalte angefügt, die mit 5 Leerzeichen (da HTML mehrere Leerzeichen im
Quelltext nicht interpretiert, wird hier auf die Maske
' ' zurückgegriffen) gefüllt wurden.
Der Quelltext zu diesem Beispiel lautet also:
<table border="0"
cellpadding="0" cellspacing="0"><tr>
<td>
Inhalt Zelle 1
</td>
<td>
</td>
<td>
Inhalt Zelle 2
</td>
</td>
<td>
Inhalt Zelle 3
</td>
</tr></table>
Oder, alternativ dazu, als Anhang an die breitesten Spalteneinträge:
(...) Inhalt Zelle 1
(...)
Hier sollten Sie darauf achten, dass der Zelleninhalt nicht
umgebrochen wird. Dies erreichen Sie mit dem Zusatz 'nowrap' hinter
dem '<td>'-Tag
<td nowrap>
© Grammiweb.de Internetlösungen. Alle Rechte vorbehalten. Stand: 23.12.2024
Seitenanfang - Sponsor werden - Datenschutz - Medien - Impressum - Werbung - Hilfe - Kontakt