 Tabellezellenbreite
Der Webmaster möchte unsichtbare Tabellen zur Gestaltung seiner Seite benutzen. Alternativ wären nätürlich CSS-Formatierungen möglich. Schaut man in den Quellcode, findet man häufig Angaben zur Breitenbestimmung der Tabellenzellen. Das funktioniert nicht überall.
Grundsätzlich: Der Inhalt einer Tabellenzelle bestimmt die maximale Breite, unabhängig von der Breitenangabe die nur die Mindestbreite bestimmen kann. Außer mit CSS, wo es die Möglichkeit gibt Inhalte abzuschneiden, sollten die die Maßvorgaben überschritten werden (clip).
HTML: Breitenangaben durch Attribut 'width'
Breitenbestimmungen in <th>, <tr> und <td>-Tags die über das 'width'-Attribut eingetragen werden, sind nicht für jeden Bowser / jede Browsergeneration bindend.
 Einige Browser interpretieren width-Angaben in TD-Tags nicht:
<td width="220" ... >
<td width="50%" ... >
CSS: Breitenangaben durch style-Eintrag
Abhilfe schafft da nur die Einbindung von CSS-Anweisungen. Hier ein Beispiel einer Inline-Anweisung für die Zellenbreite:
<td style="width:280px" ... >
Inhalte bestimmen die Breite
Tabellenzellen und damit Tabellenspalten werden nicht automatisch auf saubere 50% eingestellt, nur weil lediglich 2 Zellen je Zeile, also 2 Spalten vorhanden sind. Ohne Zutun des Webmasters würde der Browser die Spaltenbreite / Zellenbreite abhängig vom Inhalt, aber nicht gleichmäßig breit darstellen.
Den Tabellenzellen mit wenig Textinhalt wird der Browser weniger 'Breite' einräumen als denen mit längerem Text!
Die Tabelle (Breite 300) sieht ohne Angaben für die Zellenbreite im <td>-Tag so aus:
| Zelle 1 |
Zelle 2 |
| Zelle 3 |
Das ist die Zelle 4 mit einem längeren Text |
Der sichere Weg für die Mindestbreite
Fügt man ein transparentes Image passender Größe in die Zellen einer Zeile ein, hat man Kontrolle über die (Mindest-)Breite. Eine zusätzliche Breitenangabe (für die maximalbreite) im <td>-Tag ist bei Textinhalten immer hilfreich.
Zelle 1 |
Zelle 2 |
| Zelle 3 |
Das ist die Zelle 4 mit einem längeren Text |
Hier die Ansicht mit eingeschaltetem Rand für die Transpixel
Zelle 1 |
Zelle 2 |
| Zelle 3 |
Das ist die Zelle 4 mit einem längeren Text |
Transpixel herunterladen mit Rechtsklick:  transpixel.gif
Maximalbreite bestimmen
Zusätzlich immer die Tabellenbreite auch im einleitenden Tabellentag festlegen. Sonst bestimmen die Transpixel lediglich die Mindestbreite (bei einigen Browsern). Außerdem: Dieser Trick wirkt nur bei Text in Tabellenzellen. Breitere Images verberitern die Tabelle natürlich.
Das wird sie auch interessieren:
 Platzeinbußen durch Transpixel, Tabellenprobleme 03
absolute Breite berechnen, Tabellenprobleme 04
|
WWW.WEB-TOOLBOX.NET
ZURÜCK