Tabellenstruktur unterbrechen

[Encoder]

Hallo Forum

Ich glaub das ist ein schon öfter diskutiertes Problemchen, aber ich sitze trotzdem davor und komm auf keine gute Lösung.
Es stehen mehrere gleichartige Tabellen untereinander, jeweils mit einer Überschrift darüber. Vom Inhalt her sind alle gleich. Hier möchte ich erreichen dass die sich entsprechenden Spalten gleich breit sind. Ohne das siehts einfach sch... aus.

Was hab ich hier für Möglichkeiten?
Was ich bisher gefunden habe ist alles Gefrickel und zielt oft darauf ab, alle Spalten einer Tabelle gleich breit zu machen. Ich will schon die Dynamik behalten und je eine Spalte aller Tabellen gleich breit haben.

Das wäre praktisch das Ergebnis einer einzigen Tabelle, mit einer Zeile mit colspan und ohne border, in der die Überschrift steht. Aber das ist mir zu pfuschig wenn es eine schönere Alternative dazu gibt.

[Gunnar Bittersmann]

@@Encoder:

nuqneH

Was ich bisher gefunden habe ist alles Gefrickel und zielt oft darauf ab, alle Spalten einer Tabelle gleich breit zu machen.

Du kannst doch auch mit CSS jeder Spate ihre eigene Breite geben, entweder in em oder in %.

Wenn du allerdings den Browser anhand des Inhalts selbst die Spaltenbreiten bestimmen lassen willst …

Das wäre praktisch das Ergebnis einer einzigen Tabelle

… warum ist es nicht eine einzige Tabelle? Mit mehreren tbody?

Qapla'

[TSO]

Wenn du allerdings den Browser anhand des Inhalts selbst die Spaltenbreiten bestimmen lassen willst …

Ich glaube darauf kommt es ihm an…

Das wäre praktisch das Ergebnis einer einzigen Tabelle

… warum ist es nicht eine einzige Tabelle? Mit mehreren tbody?

Ich vermute mal wegen der Zwischenüberschriften, die die einzelnen Tabellen haben.
Es wäre hier natürlich sehr praktisch, wenn jeder tbody sein eigenes caption haben könnte.

Ich denke mal, wenn die Spaltenbreiten in allen Tabellen identisch und darüber hinaus dynamisch (also nicht per CSS festgelegt) sein sollen, dann wird man nicht drum herum kommen alle Daten in eine einzige Tabelle zu packen.

Jetzt wäre es natürlich gut mehr über die Zwischenüberschriften zu wissen: Sind diese zum Verständnis der Tabelle zwingend notwendig, oder lediglich eine Art Zusatzinformation, um die Daten netter zu Gliedern?
Sollten sie zum Verständnis notwendig sein, dann scheint mir kein Weg daran vorbei zu führen, diese in eine eigene Tabellenspalte zu schreiben, die eine einzige Zelle enthält, welche sich per colspan über die gesammte Tabellenbreite erstreckt. Das passt semantisch zwar überhaupt nicht, aber zumindest fällt mir kein anderer Weg ein sicher zu stellen, dass auch Screenreader und dergleichen die Zwischenüberschriften auch beachten.

Wenn die Zwischenüberschriften hingegen inhaltlich weniger von Bedeutung sind, dann würde ich vielleicht am ehesten damit arbeiten, sie den jeweiligen tbody-Tags als Attribut zuzuweisen und dann per CSS anzuzeigen, also z.B. so:

<tbody title="Zwischenüberschrift">  
Datenzeilen…  
</tbody>

  
tbody::before {  
display:table-caption;  
content: attr(title);  
}

[Encoder]

Stellt euch eine Übersicht von Veranstaltungen vor. Mit Datum, wer macht was, wie nennt sich das, wo findet es statt, eine Bemerkung usw. Das ist im Tabellenformat weil es eine knappe Übersicht sein soll, mit möglichst viel Infos .
Das soll nun jeweils nach Monat aufgeteilt und mit separater Überschrift versehen werden.

Ein Beispiel wie ich es inzwischen gelöst habe.
<table>
<tbody>
<tr><td colspan="100" class="Style ohne border"><h2>Mai 2014</h2></td></tr>
<tr><th>Datum</th><th>Veranstalter</th><th>Veranstaltung</th><th>Ort</th><th>Verantwortlicher</th><th>Bemerkung</th></tr>
<tr><td>10.05.2014</td><td>Sportverein</td><td>Fußballturnier</td><td>Stadion</td><td>Max Muster</td><td></td></tr>
<tr>....</tr>
</tbody>

<tbody>
<tr><td colspan="100" class="Style ohne border"><h2>Juni 2014</h2></td></tr>
<tr><th>Datum</th><th>Veranstalter</th><th>Veranstaltung</th><th>Ort</th><th>Verantwortlicher</th><th>Bemerkung</th></tr>
<tr><td>1.06.2014</td><td>Wanderclub</td><td>Ausflug nach irgendwo</td><td>irgendwo</td><td>Busfahrer</td><td>Anmeldung bis 20.5.</td></tr>
<tr>....</tr>
</tbody>
</table>

Jetzt wäre es natürlich gut mehr über die Zwischenüberschriften zu wissen: Sind diese zum Verständnis der Tabelle zwingend notwendig oder lediglich eine Art Zusatzinformation, um die Daten netter zu Gliedern?

Eher letzteres. Allerdings könnte durchaus noch etwas Zusatztext dazu kommen, so dass auch hier eine Struktur mit <h1> und <p> denkbar wäre. Ich hab es daher doch mit einer Zeile mit colspan="100" gelöst, da brauch ich nicht jedes mal nochmal zählen wie viele Spalten es tatsächlich sind. Ist zwar nicht sehr schön, aber es erfüllt den Zweck.

Danke auch an Gunnar für die Erwähnung von tbody. Dass ich das mehrfach angeben kann hab ich zunächst nicht gedacht. Damit kann ich mit tr:nth-child(even) wechselnde Hintergrundfarben angeben, die bei jedem tbody immer mit der gleichen Farbe beginnen. War auch so ein Detail das ich bisher vermisst hatte :-)

[MudGuard]

Hi,

<tr><td colspan="100" class="Style ohne border">

hast Du wirklich genau 100 Spalten?
Oder willst Du alle Spalten *) überspannen? Dann wäre 0 der richtige Wert.

Siehe Definition colspan

*) der colgroup - da Du nicht explizit mit colgroup arbeitest, sind alle Spalten in derselben implizit definierten colgroup ...

cu,
Andreas

[Encoder]

Oder willst Du alle Spalten *) überspannen? Dann wäre 0 der richtige Wert.

Interessant. Ich habe einen Beitrag bei Stackoverflow gefunden in dem jemand sagte, 0 wäre nicht das richtige. Irgendwas mit IE und die Angabe wäre zwar manchmal das selbe wie "für alle Spalten" aber nicht immer usw.

Ich sollte öfter mal in diese Definitionen sehen. Wobei ich dann immer noch nicht weiß welche Browser das wirklich korrekt umsetzen :-)

[1UnitedPower]

Meine Herren!

<tr><td colspan="100" class="Style ohne border">

hast Du wirklich genau 100 Spalten?
Oder willst Du alle Spalten *) überspannen? Dann wäre 0 der richtige Wert.

Siehe Definition colspan

In HTML5 wurde das scheinbar nicht übernommen: http://www.w3.org/TR/html51/tabular-data.html#attr-tdth-colspan

http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#attributes-common-to-td-and-th-elements

0 ist kein gültiger Wert und wird vom Parser wie 1 behandelt:
http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#algorithm-for-processing-rows

Also besser einfach die Anzahl an Spalten überspannen, die man tatsächlich überspannen möchte. So wird man immerhin gewzungen mit seinen Tabellen vernünftig zu haushalten und den Überblick zu behalten.

[ChrisB]

Hi,

… warum ist es nicht eine einzige Tabelle? Mit mehreren tbody?

Ich vermute mal wegen der Zwischenüberschriften, die die einzelnen Tabellen haben.
Es wäre hier natürlich sehr praktisch, wenn jeder tbody sein eigenes caption haben könnte.

Da das nicht geht, könnte aber eine TR mit einem TH-Element mit entsprechendem colspan herhalten …

MfG ChrisB

[MrMurphy]

Hallo,

zunächst sehe ich auch nur die Lösung eine einzelne Tabelle zu erstellen. Das Problem ist ja, das mehrere Tabellen nur mit HTML/CSS nicht aufeinander reagieren können und der Tabelleninhalt die Breite der einzelnen Zellen mit beeinflusst.

Am besten wäre aber ein konkretes Beispiel mit zwei Tabellen. So läuft es darauf hinaus, das wir nur raten können und dann nachträglich häppchenweise erfahren, warum unsere jeweiligen Vorschläge nicht funktionieren.

Häufig stellt sich bei solchen Fragestellungen heraus, das eine Liste viel geeigneter ist, da es sich semantisch gar nicht um Tabellen handelt. Mit Listen kann auch viel besser auf unterschiedliche Fensterbreiten und Zoom-Faktoren reagiert werden.

Gruss

MrMurphy