Tabellen mit css -display: table;

[Joachim]

Hallo,
wenn ich zwischen Tabellenzeilen mit mehreren Spalten eine Zeile möchte mit einer  Spalte (und dort zentrierter Text), muss ich dann einzelne Tabellen verwenden oder gibt es die Möglichkeit, in einer Zeile die Zellen zu verbinden?
Gruß
Jo.

Beispiel:
|                Titel1            |
|  Zelle11 | Zelle12    | Zelle13  |
|  Zelle21 | Zelle22    | Zelle23  |
|                Titel2            |
|  Zelle31 | Zelle32    | Zelle33  |
             ........

[tropenberta]

hi jo.

geht mit colspan.

  
 <table>  
  <tbody>  
   <tr>  
    <td>1. Spalte</td>  
    <td>2. Spalte</td>  
    <td>3. Spalte</td>  
    <td>4. Spalte</td>  
   </tr>  
   <tr>  
    <td colspan="4">1. Spalte</td>  
   </tr>  
   <tr>  
    <td>1. Spalte</td>  
    <td colspan="3">2. Spalte</td>  
   </tr>  
   <tr>  
    <td>1. Spalte</td>  
    <td>2. Spalte</td>  
    <td>3. Spalte</td>  
    <td>4. Spalte</td>  
   </tr>  
  </tbody>  
 </table>  

lg
micha

[Joachim]

Hi,
ich möchte nicht das HTML-Objekt table verwenden, sondern die Definition über css
(display: table)
Gruß
Jo

[Tom]

Hello,

ich möchte nicht das HTML-Objekt table verwenden, sondern die Definition über css
(display: table)

Welche HTML-Elemente willst Du denn anstelle der Tabelle benutzen?

Semantisch betrachtet sieht deine Darstellung allerdings nach dem Table-Element aus.
GGf. müsstest Du dann eben mehrere Tabellen nehmen, oder "Tabelle in Tabelle", was ja auch schon seit Anno Knölf funktioniert. Das würde ich allerdings ohne aktives Backend, dass die Gesamttabelle aus Einzelobjekten dann zusammenfügt, nicht mehr schreiben wollen müssen ;-))

Liebe Grüße aus dem schönen Oberharz

Tom vom Berg

[Der Martin]

Hi,

wenn ich zwischen Tabellenzeilen mit mehreren Spalten eine Zeile möchte mit einer  Spalte (und dort zentrierter Text), muss ich dann einzelne Tabellen verwenden oder gibt es die Möglichkeit, in einer Zeile die Zellen zu verbinden?

da ist CSS ausnahmsweise mal der falsche Ansatz, IMO. Die "dazwischen" liegenden Zeilen mit nur einer Spalte zeichnen sich ja durch irgendeine inhaltlich-strukturelle Besonderheit aus.

|                Titel1            |
|  Zelle11 | Zelle12    | Zelle13  |
|  Zelle21 | Zelle22    | Zelle23  |
|                Titel2            |
|  Zelle31 | Zelle32    | Zelle33  |
             ........

Okay, es scheint also um Gruppen mit Zwischenüberschriften zu gehen. Der von micha vorgeschlagene Ansatz, die Spalten mit dem colspan-Attribut wäre natürlich denkbar - das ist aber nur die halbe Miete. Ich würde zusärtlich
 a) jede Gruppe mit einem eigenen tbody-Element gruppieren
 b) die eine Zelle in der Titelzeile jeder Gruppe nicht mit td-Elementen, sondern mit th auszeichnen.

Smenatisch passender wäre noch das caption-Element, das darf aber -wie ich eben festgestellt habe- nur einmal pro Tabelle als Gesamt-Überschrift der Tabelle auftreten, und nicht, wie ich dachte, einmal pro tbody. Schade eigentlich ...

So long,
 Martin

[Joachim]

Hi,
da möchte man einmal "modern" sein und auf das oft gescholtene table-Element von html verzichten;-)
Danke Euch trotzdem.
Jo.

[Tom]

Hello,

da möchte man einmal "modern" sein und auf das oft gescholtene table-Element von html verzichten;-)

Das Table-Element wird ja nur bei Anwendung für Designaufgaben gescholten.
Für tabellarische Inhelte ist es (meistens) genau richtig.

Wenn es nur um die Anordnung von Elementen geht, ist "Position:absolute" dann noch der übersichtlichere Weg.

Liebe Grüße aus dem schönen Oberharz

Tom vom Berg

[Joachim]

Hi,
zu der Tabelle habe ich noch eine weitere Frage.
In dem Beispiel will ich beide Spalten gleich breit haben.
In der ersten Tabelle ist dies richtig, allerdings erfolgt ein Textumbruch.
Wenn ich, wie in der 2. Tabelle den Umbruch verhindere, sind die Spalten nicht mehr gleich breit.
Wie erreiche ich, dass sich die Tabelle so verbreitert, dass auch im 2. Falle beide Spalten gleich breit sind?
Gruß
Jo.

[Tom]

Hello,

In der ersten Tabelle ist dies richtig, allerdings erfolgt ein Textumbruch.
Wenn ich, wie in der 2. Tabelle den Umbruch verhindere, sind die Spalten nicht mehr gleich breit.
Wie erreiche ich, dass sich die Tabelle so verbreitert, dass auch im 2. Falle beide Spalten gleich breit sind?

Bei Verwendund des Table-Elementes:

table-layout:fixed;

bitte auch mal lesen:
http://de.selfhtml.org/navigation/css.htm#tabellen

Sonst musst Du mal überlegen, was bei Verwendung anderer Elemente anlaog wäre...

Liebe Grüße aus dem schönen Oberharz

Tom vom Berg

[ChrisB]

Hi,

wenn ich zwischen Tabellenzeilen mit mehreren Spalten eine Zeile möchte mit einer  Spalte (und dort zentrierter Text), muss ich dann einzelne Tabellen verwenden oder gibt es die Möglichkeit, in einer Zeile die Zellen zu verbinden?

Was passiert denn, wenn du im table-row Element nur ein einziges Element mit table-cell hast?

MfG ChrisB

[Joachim]

Hi,

Was passiert denn, wenn du im table-row Element nur ein einziges Element mit table-cell hast?

Es wird eine (die linke) Spalte angelegt, so dass man keinen Text über die ganze Tabellenbreite angeben kann.
Gruß
Jo.

[MrMurphy]

Hallo,

es wäre schön, wenn du mal konkreten Inhalt anbieten würdest. Mit konstruierten Inhalten lassen sich schlecht konkrete Lösungen finden.

Stark unterschiedliche Textlängen lassen zudem die Vermutung aufkommen, das dein Inhalt kein Tabelleninhalt ist und damit die Tabelle doch zum Layouten mißbraucht wird.

Gruss

MrMurphy

[Joachim]

Hallo,

es wäre schön, wenn du mal konkreten Inhalt anbieten würdest. Mit konstruierten Inhalten lassen sich schlecht konkrete Lösungen finden.

Der Inhalt ist, was die Textlängen angeht, schon konkret, allerdings darf ich hier keine echte Daten posten.

Stark unterschiedliche Textlängen lassen zudem die Vermutung aufkommen, das dein Inhalt kein Tabelleninhalt ist und damit die Tabelle doch zum Layouten mißbraucht wird.

Es soll aussehen wie das dritte Beispiel hier,
allerdings soll sich die Breite des gesamten Blocks nach der Breite des längsten Spalteninhalts richten (Tabellenbreite = 2 * Breite der breitesten Spalte) und nicht wie im 3. Beispiel als fester Wert.
Gruß
Jo.

[Joachim]

Hallo,

es wäre schön, wenn du mal konkreten Inhalt anbieten würdest. Mit konstruierten Inhalten lassen sich schlecht konkrete Lösungen finden.

Der Inhalt ist, was die Textlängen angeht, schon konkret, allerdings darf ich hier keine echte Daten posten.

Stark unterschiedliche Textlängen lassen zudem die Vermutung aufkommen, das dein Inhalt kein Tabelleninhalt ist und damit die Tabelle doch zum Layouten mißbraucht wird.

Es soll aussehen wie das dritte Beispiel hier,
allerdings soll sich die Breite des gesamten Blocks nach der Breite des längsten Spalteninhalts richten (Tabellenbreite = 2 * Breite der breitesten Spalte) und nicht wie im 3. Beispiel als fester Wert.
Gruß
Jo.

Ergänzung: Mit css (display: table, table-row,...) lässt sich dieser Automatismus erreichen, allerdings gibt es ja dort das Problem, dass für die Überschriften kein colspan möglich ist.

[ChrisB]

Hi,

Ergänzung: Mit css (display: table, table-row,...) lässt sich dieser Automatismus erreichen, allerdings gibt es ja dort das Problem, dass für die Überschriften kein colspan möglich ist.

Na dann lass sie doch als das darstellen, was sie eigentlich auch sind: table-caption.

http://jsfiddle.net/2Q6Jx/5/

MfG ChrisB

[Joachim]

Hi,

Ergänzung: Mit css (display: table, table-row,...) lässt sich dieser Automatismus erreichen, allerdings gibt es ja dort das Problem, dass für die Überschriften kein colspan möglich ist.

Na dann lass sie doch als das darstellen, was sie eigentlich auch sind: table-caption.

http://jsfiddle.net/2Q6Jx/5/

Das eigentliche "Krückenproblem" (Angabe einer festen Breite) ist aber damit ja auch nicht gelöst.
Gruß
Jo.