 Tabellenbreite brechnen
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
|
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).
|
|
 Attribute für cellpadding, cellspacing und border immer eintragen
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
Grafik zur Kontrolle
|
|
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 Transpixebreite + 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)
|
WWW.WEB-TOOLBOX.NET
SOURCE 
ZURÜCK