Spaltenbreite

[Jens]

Hi,

ich hab wie schon so oft das Problem, dass eine Tabelle nicht so wie ich gerne will. Da ich jetzt schon seit zig Stunden am probieren bin, wäre es sinnlos euch alle meine Ansätze zu posten. Daher versuche ich das Problem so einfach wie möglich zu beschreiben.

Ich habe eine Tabelle mit 8 Spalten und diese soll wie folgt aussehen:

Position: mittig

Breite: 80% der Bildschirmbreite

Rahmen: 1px solid black

Spaltenbreite: 9.375%; 31.25%; 9.375%; 6.25%; 6.25%; 12.5%; 12.5%; 12.5%

Also im Verhältnis:

3 : 10 : 3 : 2 : 2 : 4 : 4 : 4

Egal was ich mache, die Spalten sehen nie so aus wie ich mir das vorstelle. Hat jemand nen Ansatz für mich? Ich würe zu tiefstem Dank verbunden.

[Auge]

Hallo

Ich habe eine Tabelle mit 8 Spalten und diese soll wie folgt aussehen:

Position: mittig

Breite: 80% der Bildschirmbreite

Rahmen: 1px solid black

Spaltenbreite: 9.375%; 31.25%; 9.375%; 6.25%; 6.25%; 12.5%; 12.5%; 12.5%

Also im Verhältnis:

3 : 10 : 3 : 2 : 2 : 4 : 4 : 4

Egal was ich mache, die Spalten sehen nie so aus wie ich mir das vorstelle. Hat jemand nen Ansatz für mich? Ich würe zu tiefstem Dank verbunden.

Hast du die Gesamtbreite für die Tabelle festgelegt? Hast du für ein der Tabelle übergeordnetes Element eventuell eine ungeeigente Größe/Breite festgelegt? Hast du bei deinen Breitberechnungen für die Zellen die Breiten der Border berücksichtigt? Und zu guter Letzt und am allerwichtigsten, wo hast du den Code gelassen? Ohne dessen Kenntnis können wir nur spekulieren, woran es liegen könnte.

Tschö, Auge

[Jens]

Hi,

ich pack jetzt hier mal Beispielhaft etwas Code rein und bin mir eigentlich sicher, dass eine Tabelle hier das geeignete Element ist. Es geht um ein Bundesligatippspiel bei welchem ich eine Tabelle für den aktuellen Gesamtstand angeben will. Wie ihr im Quellcode seht steht in der ersten Spalte die Position, in der zweiten der usw. Ich finde es optisch einfach schöner, wenn die Spalte für die Position (Zahlen von 1-30) nicht genau so breit ist wie Spalte für den Namen des jeweiligen Tippers. Folgendes Beispiel sollte das Problem verdeutlichen:

<table>
   <thead>
      <tr>
         <th>Pos</th>
         <th>Name</th>
         <th>Punkte</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>1</td>
         <td>Mustermann, Max</td>
         <td>155</td>
      </tr>
      <tr>
         <td>2</td>
         <td>Schweinsteiger, Bastian</td>
         <td>147</td>
      </tr>
   </tbody>
</table>

Mein Konstrukt sieht derzeit wie folgt aus:

table{
   position:relative;
   top:10em;
   margin:0 auto;
   background:red;
   width:30%;
   border-collapse:collapse;
   table-layout:fixed;
}

th, td{
   width:25%;
   border:1px solid black;
}

th:nth-of-type(2), td:nth-of-type(2){
   width:50%;
}

In diesem speziellen Fall sieht es recht passend aus. Wenn ich das ganze aber auf 8 Spalten erweitere passt es einfach nicht mehr. Oder kann das auch an der Border liegen und wenn ja, wie umgehe ich das?

[hier unerwünschtes Vollzitat entfernt]

[Auge]

Hallo

Mein Konstrukt sieht derzeit wie folgt aus:

table{
   position:relative;
   top:10em;
   margin:0 auto;
   background:red;
   width:30%;
   border-collapse:collapse;
   table-layout:fixed;
}

Wovon berechnen sich die width:30% der Tabelle und wozu brauchst du position:relative;?

th, td{
   width:25%;
   border:1px solid black;
}

th:nth-of-type(2), td:nth-of-type(2){
   width:50%;
}

In diesem speziellen Fall sieht es recht passend aus. Wenn ich das ganze aber auf 8 Spalten erweitere passt es einfach nicht mehr. Oder kann das auch an der Border liegen und wenn ja, wie umgehe ich das?

Das können wir ohne die Kenntnis des „echten“ Quelltextes a.k.a. Codes immer noch nicht sagen. Und ja, die Angaben zu border beeinflussen die Breiten. Das sollte aber unter Kenntnis des Codes zu nachvollziehbaren Verschiebungen (um die Breiten der border (hier jeweils 1px)) führen. Wenn da nicht noch andere Fallen, die du noch nicht offenbart hast, schlummern, könnte calc() einen Lösungsansatz bergen.

Tschö, Auge

[Jens]

Hi Auge,

danke für das schnelle Feedback. Die position:relative benötige ich nur dafür, um die Tabelle etwas nach unten zu verschieben, da ich oberhalb noch eine Menüleiste habe, die mit dem gesamten Konstrukt aber sonst nichts zu tun hat.

Ich habe jetzt noch mal folgendes probiert, in der Hoffnung, dass die Tabelle etwa 75% der Seite ausfüllt. Den HTML-Code poste ich jetzt nicht noch mal extra, in dem steht einfach eine Tabelle mit 8 Spalten, die jeweils mit Einträgen gefüllt sind. Die CSS sieht so aus:

body{
   align:center;
}

table{
   position:relative;
   top:10em;
   margin:0 auto;
   border-collapse:collapse;
   table-layout:fixed;
}

th, td{
   width:9%;
}

th:nth-of-type(2), td:nth-of-type(2){
   width:22.5%;
}

th:first-child, td:first-child, th:nth-of-type(3), td:nth-of-type(3){
   width:7.5%;
}

th:nth-of-type(4), td:nth-of-type(4), th:nth-of-type(5), td:nth-of-type(5){
   width:5.25%;
}

Meine bescheidenen Rechenküste kommen dabei auf folgende Summe wenn ich alle Spaltenbreiten addiere: 7.5 + 22.5 + 7.5 + 5.25 + 5.25 + 9 + 9 + 9 = 75

Die Tabelle füllt aber nicht mal die Hälfte der Seite aus. Why?

[Vollzitat entfernt]

[MrMurphy1]

Hallo

Das grundsätzliche (und wohl am schwierigsten zu beseitigende) Problem ist, dass du eine Tabelle zum Layouten mißbrauchst.

Tabellen führen ein gewisses "Eigenleben" um Tabellendaten möglichst sinnvoll anzuzeigen. Wenn eine Tabelle zum Layouten mißbraucht wird muss dagegen angegangen werden.

die Tabelle etwa 75% der Seite ausfüllt

In dem Fall sollte die Tabelle selbst (table-Element) eine Breite von 75% des übergeordneten Elements bekommen, sofern das übergeordnete Element die komplette Seitenbreite ausfüllt.

Die Zellen werden anschließend so breit gemacht, dass sie zusammen 100% der Tabellenbreite ausfüllen.

Voraussetzung ist natürlich, dass der Inhalt der Zellen samt Abständen wie zum Beispiel padding bei den Breiten in sie hineinpasst.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@MrMurphy1

Das grundsätzliche (und wohl am schwierigsten zu beseitigende) Problem ist, dass du eine Tabelle zum Layouten mißbrauchst.

Das Problem liegt ganz auf deiner Seite, da du ohne und selbst mit Kenntnis des Inhalts bei jeder Tabelle von „zum Layouten mißbrauchst“ sprichst und damit oft falsch liegst.

Tabellen führen ein gewisses "Eigenleben" um Tabellendaten möglichst sinnvoll anzuzeigen.

Per Default, ja. Das kann man ihnen aber abgewöhnen:

17.5.2.1 Fixed table layout
With this (fast) algorithm, the horizontal layout of the table does not depend on the contents of the cells…

Na bitte, geht doch.

Muss man sich nur einen Kopf machen, was passieren soll, wenn der Zelleninhalt breiter ist als die Zelle:

• Bei Zelle 14 läuft der Inhalt in die Nachbarzelle(n) hinein; das will man wohl nicht.
• Bei Zelle 24 wird abgeschnitten.
• Bei Zelle 34 wird ein Auslassungszeichen gesetzt.

LLAP 🖖

[Gunnar Bittersmann]

@@Jens

Die position:relative benötige ich nur dafür, um die Tabelle etwas nach unten zu verschieben, da ich oberhalb noch eine Menüleiste habe, die mit dem gesamten Konstrukt aber sonst nichts zu tun hat.

Das ist Unsinn. Was immer du da hast, um die Tabelle „etwas nach unten zu verschieben“, brauchst du kein position: relative.

th:nth-of-type(2), td:nth-of-type(2){
   width:22.5%;
}

Dass :nth-of-type() hier nicht richtig ist, hatten wir kürzlich erst.

LLAP 🖖

[Der Martin]

Hallo,

ich pack jetzt hier mal Beispielhaft etwas Code rein und bin mir eigentlich sicher, dass eine Tabelle hier das geeignete Element ist. Es geht um ein Bundesligatippspiel bei welchem ich eine Tabelle für den aktuellen Gesamtstand angeben will. Wie ihr im Quellcode seht steht in der ersten Spalte die Position, in der zweiten der usw.

okay, nach der Beschreibung bin ich auch der Meinung, dass eine Tabelle wohl angebracht ist.

Ich finde es optisch einfach schöner, wenn die Spalte für die Position (Zahlen von 1-30) nicht genau so breit ist wie Spalte für den Namen des jeweiligen Tippers.

Das ist wohl wahr, aber dafür braucht's doch keine exakten Spaltenbreiten, da ist "Pi mal Daumen" allemal gut genug.

table{
   position:relative;
   top:10em;
   margin:0 auto;
   background:red;
   width:30%;
   border-collapse:collapse;
   table-layout:fixed;
}

Das position:relative für die Tabelle in Verbindung mit dem Versatz um 10em nach unten sieht aus wie der verzweifelte Versuch, die Auswirkung eines anderen Fehlers zu kompensieren. Deine Erklärung im anderen Posting mit der Menüzeile räumt diese Zweifel nicht aus. Normalerweise stehen Blockelemente (und eine Tabelle ist im weiteren Sinn auch eins) von ganz allein untereinander - es sei denn, man greift mit absoluter Positionierung oder float in diese Ordnung ein.
Um der Tabelle einfach nur einen Abstand nach oben zu geben, ohne dabei komische Nebenwirkungen zu riskieren, reicht eigentlich ein antsprechendes margin-top (wobei 10em sehr viel wäre).

In diesem speziellen Fall sieht es recht passend aus. Wenn ich das ganze aber auf 8 Spalten erweitere passt es einfach nicht mehr. Oder kann das auch an der Border liegen und wenn ja, wie umgehe ich das?

Wie wäre es, eine Spalte auszuwählen und ihr keine Breite zuzuweisen (oder explizit wieder auf auto zu setzen)? Dann nimmt diese Spalte einfach die restliche verfügbare Breite ein.

So long,
 Martin

[Der Martin]

Hallo,

Ich habe eine Tabelle mit 8 Spalten und diese soll wie folgt aussehen:

Die Begriffe Tabelle und aussehen in einem Satz ... das hat irgendwie den schalen Beigeschmack einer Layouttabelle, und somit der Vermutung, dass eine Tabelle hier nicht wirklich angebracht ist.

Wenn eine Tabelle wirklich das geeignete Element zur Darstellung der Daten ist, nimmt man die automatische Anpassung der Spaltenbreiten an den Inhalt meist als willkommenes Feature an.

Position: mittig
Breite: 80% der Bildschirmbreite
Rahmen: 1px solid black
Spaltenbreite: 9.375%; 31.25%; 9.375%; 6.25%; 6.25%; 12.5%; 12.5%; 12.5%

Uff. So präzise?

Also im Verhältnis:
3 : 10 : 3 : 2 : 2 : 4 : 4 : 4

Okay. Und was ist konkret das Problem? Das SELFHTML-Wiki hast du zu Tabellengestaltung und speziell Spaltenbreiten schon befragt?

Egal was ich mache, die Spalten sehen nie so aus wie ich mir das vorstelle.

Tolle Aussage. Das hilft uns weiter. Nee, ernsthaft: Zeig mal einen Ansatz, der deiner Ansicht nach richtig sein müsste, und beschreibe, was daran nicht wie erwartet funktioniert. Eventuell ist es was ganz Banales.

Ach, und was willst du mit dieser Tabelle erreichen bzw. darstellen? Vielleicht ist ein anderes Element tatsächlich die bessere Wahl.

So long,
 Martin

[marctrix]

Hej Jens,

Ich habe eine Tabelle mit 8 Spalten und diese soll wie folgt aussehen:

Position: mittig

Breite: 80% der Bildschirmbreite

Ist das mit irgendetwas anderem auf Deiner Seite bündig? Weil sonst sieht#s oll aus...

Linksbündig ist vermutlich besser.

Spaltenbreite: 9.375%; 31.25%; 9.375%; 6.25%; 6.25%; 12.5%; 12.5%; 12.5%

Im Ernst? Browser passen die Breite der Tabellenzellen an den Bedarf an - sie werden dadurch so kompakt wie möglich dargestellt. Spalten mit wenig Inhalt sind dadurch eh viel schmaler als Spalten mit längeren Texten. Das was du dir wünschst, sollte alos weitgehend von selber passieren, wenn du nicht Hand anlegst.

Im Übrigen, just make the porn button big enough to find it (lies mal beim Thema Grid nach... ;-)!

Man soll sich als Entwickler Gedanken machen, damit der Nutzer es nicht muss - aber hier machst du dir selber das Leben schwer, ohne dass jeman anders etwas davon hat...

Marc

[Gunnar Bittersmann]

@@marctrix

Im Ernst?

Ja, im Ernst.

Browser passen die Breite der Tabellenzellen an den Bedarf an - sie werden dadurch so kompakt wie möglich dargestellt. Spalten mit wenig Inhalt sind dadurch eh viel schmaler als Spalten mit längeren Texten. Das was du dir wünschst, sollte alos weitgehend von selber passieren, wenn du nicht Hand anlegst.

Und dann passiert das: eine Spalte ist 137px, die nächste 152px. Und das sieht dann aus wie: der Entwickler hat keine Lust gehabt.

In dem Fall ist es schon angebracht, für beide Spalten eine Breite von 10rem anzugeben. Oder allgemein ganzzahlige Verhältnisse der Spaltenbreiten vorzusehen (wie Jens das macht) – wenn nicht den goldenen Schnitt.

LLAP 🖖

[marctrix]

Hej Gunnar,

Browser passen die Breite der Tabellenzellen an den Bedarf an - sie werden dadurch so kompakt wie möglich dargestellt. Spalten mit wenig Inhalt sind dadurch eh viel schmaler als Spalten mit längeren Texten. Das was du dir wünschst, sollte alos weitgehend von selber passieren, wenn du nicht Hand anlegst.

Und dann passiert das: eine Spalte ist 137px, die nächste 152px.

Als Benutzer kann ich damit sehr gut leben...

In dem Fall ist es schon angebracht, für beide Spalten eine Breite von 10rem anzugeben. Oder allgemein ganzzahlige Verhältnisse der Spaltenbreiten vorzusehen (wie Jens das macht) – wenn nicht den goldenen Schnitt.

Mir wäre die platzsparendere Variante lieber - als Besucher. Scheint Geschmacksache zu sein.

Daher würde ich mich der Mehrheit anschließen, kenne dazu aber keine Aussagen/Statistiken.

Da ich nicht weiß, welches die objektiv bessere Möglichkeit ist, setze ich dann doch wieder auf weniger Code.

Allerdings hoffe ich ganz insgeheim, dass hier im Forum jemand diese Frage beantworten kann.

Marc

[Der Martin]

Hallo,

Und dann passiert das: eine Spalte ist 137px, die nächste 152px.

Als Benutzer kann ich damit sehr gut leben...

ich auch. Der einzige, den das wirklich stört, ist in solchen Fällen oft der Seitenautor.

Da ich nicht weiß, welches die objektiv bessere Möglichkeit ist, setze ich dann doch wieder auf weniger Code.

Guter Punkt. Allerdings ist auch niemand auf meinen Vorschlag eingegangen, die Breite von n-1 Spalten festzulegen und die letzte quasi als Freiheitsgrad zu lassen. Natürlich so, dass die Verteilung in etwa "passt", aber eben mit ein paar px Puffer.

So long,
 Martin

[Ernstmacher]

Allerdings ist auch niemand auf meinen Vorschlag eingegangen, die Breite von n-1 Spalten festzulegen und die letzte quasi als Freiheitsgrad zu lassen. Natürlich so, dass die Verteilung in etwa "passt", aber eben mit ein paar px Puffer.

Warst Du das nicht, der mal mit "Nicht gemeckert ist genug gelobt!" argumentierte? Ja, Dein Vorschlag dürfte in vielen Fällen - z.B. Dateilistings o.ä. - der richtige sein.

[Der Martin]

Hallo,

Allerdings ist auch niemand auf meinen Vorschlag eingegangen, die Breite von n-1 Spalten festzulegen und die letzte quasi als Freiheitsgrad zu lassen. Natürlich so, dass die Verteilung in etwa "passt", aber eben mit ein paar px Puffer.

Warst Du das nicht, der mal mit "Nicht gemeckert ist genug gelobt!" argumentierte?

wahrscheinlich war ich das tatsächlich, das würde zu mir passen.

Nur bin ich das hier nicht gewöhnt. Hier kommt eigentlich immer jemand vorbei, der entweder erklärt, dass ein Ansatz schlecht ist, oder im besten Fall ein, "Ja, aber ..." beisteuert.
Aber gar kein Echo fand ich unüblich. Das war also kein fishing for compliments.

So long,
 Martin

[Gunnar Bittersmann]

@@Der Martin

Als Benutzer kann ich damit sehr gut leben...

ich auch. Der einzige, den das wirklich stört, ist in solchen Fällen oft der Seitenautor.

Es gibt durchaus Benutzer, die zwischen „gestaltet“ und „dem Zufall überlassen“ unterscheiden können.

Allerdings ist auch niemand auf meinen Vorschlag eingegangen, die Breite von n-1 Spalten festzulegen und die letzte quasi als Freiheitsgrad zu lassen.

Allerdings habe ich das in meinem Pen stillschweigend so gemacht.

LLAP 🖖

[marctrix]

Hej Gunnar,

@@Der Martin

Als Benutzer kann ich damit sehr gut leben...

ich auch. Der einzige, den das wirklich stört, ist in solchen Fällen oft der Seitenautor.

Es gibt durchaus Benutzer, die zwischen „gestaltet“ und „dem Zufall überlassen“ unterscheiden können.

Du weißt sehr gut, dass die Browser-Hersteller das nicht dem Zufall überlassen. Mein Argument war, dass die Nutzer, die es hübscher finden, wie Jens es plant den Nutzern gegenüber stehen, die eine Seite möglichst kompakt mögen. Ich kenn davon sehr viele, kann aber keine belastbare Statistik dazu benennen.

Auch wenn ich generell bei einer Entscheidung zwischen hübsch und praktisch eher zum praktischen tendiere (weil besser bedienbar), lasse ich ich gerne eines besseren belehren.

"Es gibt durchaus Benutzer, die zwischen „gestaltet“ und „dem Zufall überlassen“ unterscheiden können." Ist aber reine Polemik und bringt uns der Lösung dieses Konfliktes nicht näher...

Marc

[Gunnar Bittersmann]

@@marctrix

Du weißt sehr gut, dass die Browser-Hersteller das nicht dem Zufall überlassen.

Was lese ich da unter 17.5.2.2 Automatic table layout: “UAs are not required to implement this algorithm to determine the table layout in the case that 'table-layout' is 'auto'; they can use any other algorithm even if it results in different behavior.”

Mein Argument war, dass die Nutzer, die es hübscher finden, wie Jens es plant den Nutzern gegenüber stehen, die eine Seite möglichst kompakt mögen.

Wie sagte ein Usability-Prof von mir so schön: „Luft trägt.“ Lieber etwas mehr Weißraum.

LLAP 🖖

[marctrix]

Hej Gunnar,

@@marctrix

Du weißt sehr gut, dass die Browser-Hersteller das nicht dem Zufall überlassen.

Was lese ich da unter 17.5.2.2 Automatic table layout: “UAs are not required to implement this algorithm to determine the table layout in the case that 'table-layout' is 'auto'; they can use any other algorithm even if it results in different behavior.”

Unterschiedlich, nicht zufällig. Wie ich bereits sagte. Ich bin mir sicher, du bist dir dessen bewusst. Und müssen Webseiten in allen Browsern gleich aussehen? Du darfst gerne antworten, was du auf diese Frage sonst verlinkt ;-)

Mein Argument war, dass die Nutzer, die es hübscher finden, wie Jens es plant den Nutzern gegenüber stehen, die eine Seite möglichst kompakt mögen.

Wie sagte ein Usability-Prof von mir so schön: „Luft trägt.“ Lieber etwas mehr Weißraum.

Weißraum wie padding finde ich ok - wobei es mir ja bei der Beurteilung, wie genau man die Spaltenbreiten definieren sollte (und ob überhaupt) gar nicht um meine persönlichen Vorlieben geht. Sobald du mir sagst, was die Mehrheit will, setze ich das ab diesem Moment um und lehre es auch, als die "einzig richtige Wiese Tabellen zu formatierend". Bis dahin weise ich auf beide Möglichkeiten und deren Vor- und Nachteile hin und überlasse es den Autoren. Ich glaube auch, es handelt sich hier um ein eher nebensächliches Detail.

Marc

[Gunnar Bittersmann]

@@marctrix

Du weißt sehr gut, dass die Browser-Hersteller das nicht dem Zufall überlassen.

Was lese ich da unter 17.5.2.2 Automatic table layout: “UAs are not required to implement this algorithm to determine the table layout in the case that 'table-layout' is 'auto'; they can use any other algorithm even if it results in different behavior.”

Unterschiedlich, nicht zufällig.

Wenn die Tabelle in verschiedenen Browsern unterschiedlich dargestellt wird (bei sonst gleichen Bedingungen wie Viewportgröße, Schriftgröße etc.), dann wird sie in mindestens einem Browser nicht optimal dargestellt. Das meine ich mit „Der Seitenautor (nicht Browser-Hersteller) überlässt die Darstellung dem Zufall.“

Und müssen Webseiten in allen Browsern gleich aussehen?

Natürlich nicht. Aber sie sollten in allen Browsern möglichst gut aussehen.

Beurteilung, wie genau man die Spaltenbreiten definieren sollte (und ob überhaupt)

Die Beurteilung sieht nochmal anders aus, wenn mehrere Tabellen untereinander auf einer Seite sind und deren Spaltenbreiten nicht übereinstimmen, sondern scheinbar wahllos („zufällig“) festgelegt wurden (vom Algorithmus des Browsers).

Ich glaube auch, es handelt sich hier um ein eher nebensächliches Detail.

“The details are not details, they make the product.” —Charles Eames

LLAP 🖖

[Der Martin]

Hallo,

Wie sagte ein Usability-Prof von mir so schön: „Luft trägt.“

das klingt eher nach einer Erkenntnis aus dem Flugzeugbau. ;-)

Lieber etwas mehr Weißraum.

Die Kunst besteht darin, das richtige Maß zwischen drückender Enge und Platzverschwendung zu finden.

So long,
 Martin