Tabellenprobleme 4
    
 HomeTabellenFehlersuche • Tabellenprobleme 4   drucken  Seite drucken

 Tabellenbreite berechnen

Bei der Berechnung der absoluten Tabellenbreite werden häufig Fehler gemacht. Besonders wenn cellpadding, cellspacing und border nicht auf 0 (Null) eingestellt sind oder keine Angaben gemacht wurden (Defaultwerte werden vom Browser eingesetzt).

Ermittlung von Tabellenbreiten

Querverweise: 2 Beiträge beschreiben die Breiten- bzw. Höhenbestimmung von Tabellenzellen mit der Hilfe von transparenten Images.

Zellenhöhe mit der Hilfe von transparenten Images

Zellenbreite mit der Hilfe von transparenten Images

Der beste Schutz vor unerwünschten Layoutverschiebungen ist es, für Tabellen grundsätzlich die 3 Angaben für border, cellpadding und cellspacing einzutragen. Erst einmal alles auf '0' (Null) setzen und gegebenenfalls später ändern oder mit CSS festlegen. Keinesfalls unbenötigte Attribute einfach weg lassen.

Attribute für cellpadding, cellspacing und border immer eintragen
<table border="0" cellspacing="0" cellpadding="0" ...


  Mathematik

Tabelle 300 px breit mit 2 Zellen, cellpadding 10, cellspacing 1

daraus ermitteln sich folgende Platzeinbußen: 4x10 px + 3x1 px = 43 px

300 - 43 , da bleiben 257 Pixel für den Inhalt


möglichst gleichmäßig aufgeteilt auf 2 Spalten bedeutet das in diesem Fall:

verfügbare Breite Zelle 1 und 3 : 128 px

verfügbare Breite Zelle 2 und 4 : 129 px



   Zwischenbemerkung

Die Berechnung oben trifft nicht immer zu

Denn das trifft nur zu, wenn Padding, Spacing und Rand als 'inklusive' gesehen werden. Der FF rechnet diese 3 Größen aber zur Tabellenbreite hinzu, wenn die Zellenbreiten nicht definitiv festgelegt wurden und lediglich die Gesamtbreite der Tabelle bestimmt wurde.

Das trifft aber (wie im Beispiel hier) nicht zu, wenn die Inhalte der Tabelle die Breite zwingend erfordern weil z.B. Grafiken entsprechender Breite Inhalt der Zellen sind. Bei Inhalten die in der breite felxibel sind (z.B. Texte) sieht das anders aus.

(Vorausgesetzt Overflow ist nicht auf 'hidden' eingestellt, aber das ist eine anderes Thema)



   zurück zur Berechnung

Grafik zur Kontrolle, so sollte es aussehen.






Zelle 3


Zelle 4


width="128"

width="129"


Breitenberechnung: 1 + 10 + 128 + 10 + 1 + 10 + 129 + 10 + 1 = 300

An den Außenseiten der Tabelle ist hier der 1 Pixel breite Rand kaum zu erkennen. (cellspacing="1")



2 Dinge beachten:


a) Breite = Summe der Transpixelbreite + Summe cellpadding (jeweils 2 x je Zelle) + Summe cellspacing ( 1 jeweils außen, 1 je Zwischenraum der Zellen)

b) Angaben für Tabellenbreite im einleitenden TABLE-Tag sollte nicht größer sein als Breite errechnet unter a)
<table width="560" ....


Tabelle  im Beispiel   Summe  
Transpixelbreite 128 + 129 257 
cellpadding 4 x 10 40 
cellspacing 3 x 1
border 0
Tabellenbreite 300 


Breite der Tabelle bei ausgeschaltetem Rand (border="0") und ohne wiedersprüchliche Breitenbestimmung im einleitenden <table> - Tag : 300 Pixel



  Fehler duch zu breite Inhalte

Wird ein zu breiter Inhalt in eine Zelle eingefügt, wird die ganze Berechnung und die Angabe von '300' für die Tabellenbreite gegenstandslos:

Grafik zur Kontrolle






Zelle 3


Zelle 4


width="128"

width="129"


Bei der Fehlersuche kann man auch eine simple Grafik im angestrebten Maß in die HTML-Seite schreiben. Eine Hilfe, will man sich nicht auf sein gutes Augenmaß verlassen.

Mein Lineal-500 dürfen Sie für ihre Entwicklungsarbeit / Kontolle herunterladen (rechtsklicken + speichern). Weitere Lineale finden Sie im Menü HP-Vorlagen und Downloads.