[an error occurred while processing this directive]

Finden Sie harmonische Farben

Mit MyColor Studio, dem professionellen Farbmanagement für Ihre Webseite

Hier klicken und mehr erfahren

Neu: Inspirationen für Webdesigner

Entdecken Sie die schönsten Seiten im Netz

Hier klicken und mehr erfahren

[an error occurred while processing this directive]

(Stand: 07.07.20, 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 '&nbsp;' 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>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</td>
<td>
Inhalt Zelle 2
</td>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</td>
<td>
Inhalt Zelle 3
</td>
</tr></table>

Oder, alternativ dazu, als Anhang an die breitesten Spalteneinträge:

(...) Inhalt Zelle 1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; (...)

Hier sollten Sie darauf achten, dass der Zelleninhalt nicht umgebrochen wird. Dies erreichen Sie mit dem Zusatz 'nowrap' hinter dem '<td>'-Tag

<td nowrap>


Zurück zum Inhaltsverzeichnis

[an error occurred while processing this directive] [an error occurred while processing this directive]

© Grammiweb.de Internetlösungen. Alle Rechte vorbehalten. Stand: 07.07.2020
Seitenanfang - Sponsor werden - Datenschutz - Medien - Impressum - Werbung - Hilfe - Kontakt