 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 |
3 |
| border |
0 |
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.
|
Home • Tabellen • Fehlersuche • Tabellenprobleme 4