colspan bei anonymen Tabellenobjekten?

Yamoku · 20 Juli 2008

colspan beim CSS-Tabellenmodell?

Hallo,

wie realisiert man eigentlich colspan beim CSS-Tabellenmodell wie im Beispiel. Ich möchte die Zellen A1 und B1 verbinden. Wie mache ich das? Bissher habe ich weder beim W3C noch anderswo etwas gefunden. Ihr seit meine letzte Hoffnung.

Gruß, Yamoku

Beispiel:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>colspan beim CSS-Tabellenmodell</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style rel="stylesheet" type="text/css">
			ul {
				display: table;
				margin: 0;
				padding: 0;
			}
			li {
				display: table-row;
			}
			span {
				display: table-cell;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>
				<span>A1</span><span>B1</span>
			</li>
			<li>
				<span>A2</span><span>B2</span>
			</li>
		</ul>
	</body>
</html>

PS: Sorry, der Beispielcode ist nicht in

HTML:

, da dort die Zeilenumbrüche verschwinden – Ursache noch unbekannt.

prm · 20 Juli 2008

Hmmm... entweder verwechselst du da etwas oder du hast dich etwas unverständlich ausgedrückt.

Zunächst:
Dein Code hat mit Tabellen eigentlich gar nichts zu tun. Da musst du vermutlich erst etwas umdenken und dich vom bisherigen Tabellendenken loslösen (Tabellen einfach mal vergessen).

Das was du gecodet hast ist eine Liste, wo Listenpunkte untereinander dargestellt werden.
Wenn du mal alle Style-Angaben entfernst und den HTML-Code so darstellst, dann siehst du das normale "Standardergebnis":

Code:

<ul>
<li>A1B1</li>
<li>A2B2</li>
</ul>

Das heißt: A1 und B1 werden ohne weiteres Zutun nebeneinander dargestellt. Eine Zellverbindung ist deshalb nicht notwendig.

Damit müsste deine Frage eigentlich schon geklärt sein.
Ansonsten solltest du nochmal konkret mitteilen, was du vor hast.

Yamoku · 20 Juli 2008

Danke für deine Antwort. Hier noch einmal konkret, was ich vor habe...

Mit Hilfe des CSS-Tabellenmodell nach W3C kann man über CSS beliebigen Elementen das Verhalten wie bei Tabellen zuweisen.

display: table;
display: table-row;
display: table-cell;

Ich habe der Liste <ul> (siehe Beispielcode) über diese CSS Tags das Verhalten einer Tabelle beigebracht.

<ul> ist die Tabelle,
<li> eine Tabellenzeile,
<span> eine Tabellenzelle.

Die <span> Elemente verhalten sich nun wie Tabellenzellen siehe Link zum Beispiel (nur in aktuellen Browsern!)
Jedoch vermisse ich hier die Möglichkeit, CSS-Tabellenzellen nach dem Prinzip "colspan" zu verbinden. Sollte doch möglich sein oder?

Besten Dank!
Yamoku

Ansicht zum folgenden Code:

Beispiel:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>colspan beim CSS-Tabellenmodell</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style rel="stylesheet" type="text/css">
			ul {
				display: table;
				margin: 0;
				padding: 0;
			}
			li {
				display: table-row;
			}
			span {
				display: table-cell;
				padding: 10px;
				border: 1px solid #999;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>
				<span>A1 richtige Zelle</span><span>B1</span>
			</li>
			<li>
				<span>A2</span><span>B2</span>
			</li>
		</ul>
	</body>
</html>

prm · 20 Juli 2008

Hierzu zweierlei:

Der IE kann "display: table ..." nicht interpretieren.
Damit mag dein Vorhaben zwar theroetisch möglich sein, aber es nützt nichts, wenn es der IE nicht darstellen kann:
display: Anzeigeart: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

Zum anderen:
Wenn du wirklich eine strukturierte, tabellarische Darstellung benötigst: Warum machst du denn solche Klimmzüge, indem du eine Liste "vergewaltigst" und nimmst nicht gleich eine Tabelle, die a) für solche Zwecke vorgesehen ist und mit der man b) das alles unproblematisch darstellen kann?

Mit CSS zu arbeiten bedeutet ja nicht automatisch, dass Tabellen verboten sind, oder dass andere Elementen zu Tabellen umgebogen werden sollen.
Immer dann, wenn es einer strukturierten Darstellung dient, kann und soll man durchaus Tabellen verwenden. Für reine Layoutzwecke sind Tabellen dagegen nicht angebracht.

Fazit:
Für deine Darstellung scheint mir eine Tabelle der einfachste und angebrachte Lösungsweg. Eine Liste erfüllt dagegen einen anderen Zweck und sollte für diesen eingeseetzt werden.
So hat jede Aufgabe ihr spezielles Werkzeug:
Zum Mauern nimmt man eine Kelle, zum Bohren einen Bohrer. Es wäre eben viel zu umständlich, mit einer Kelle zu bohren oder mit einem Bohrer zu mauern, wenn nicht gar unmöglich ;-)

Yamoku · 21 Juli 2008

Danke für Deinen Hinweis. Das sehe ich auch so.
Aber ich möchte keine Tabellendaten, sondern ein Formular layouten nach dem Prinzip siehe Abbildung:

SEMANTIK VERSUS LAYOUT
Ein Formular ist semantisch gesehen keine Tabelle meine ich. Ich denke, eine Liste entspricht am ehesten der Semantik eines Formulars, da es Untergruppen geben kann, die von übergeordneten Eingaben abhängig sind. Was meint Ihr?

Das Layoutprinzip (Labels links) steht fest siehe Abbildung. Ich versuche hier keinen Kompromiss eingehen zu müssen, denn es hat sich bereits als beste Variante bewährt. Der Knackpunkt sind die rechtsbündigen Labels, links von den Eingabefenstern platziert. Die maximale Labelbreite kann nicht fixiert werden, da die Applikation mehrsprachig und somit die Labels variabel sind, aber nur ein Template verwendet werden soll. Also bleibt nur ein flexibles Tabellenprinzip beim Layouten, damit die Länge der Labeltexte variable sein kann. Das CSS-Tabellenmodell ist da gerade richtig denke ich.

CROSSBROWSER VERSUS KOSTEN & STANDARD
Die Formulare werden für ein CMS entwickelt. Es handelt sich nicht um eine öffentliche Webseite, sondern um eine Applikation. Deshalb bin ich nicht zwingend auf Crossbrowser angewiesen.
Auf den IE und andere nicht standardkonforme Browser kann und will ich zugunsten wirtschaftlicherer Entwicklung der Applikation verzichten. Ich möchte nach Standard entwickeln. Der Punkt ist: Ich als Nutzer würde lieber 5 Minuten investieren um meinen Browser zu aktualisieren, als wesentlich mehr für eine Applikation zahlen zu müssen. Oder?

EXKURS MICROSOFT
Microsoft gibt dem Internetexplorer kaum eine Chance. Die Entwicklung neuer Releases dauert zu lange mit zu schlechten Resultaten (siehe Beta Version8 ). Dabei müsste der IE sehr viel aufholen. Das Ganze wird zunehmend zu einem Problem für uns Entwickler. Vor allem explodieren die Kosten und die wichtigen und notwendigen Weiterentwicklungen werden aufgehalten. Das Firmen vor Jahren sich von proprietären Funktionen des IE6 abhängig gemacht haben müssen sie jetzt leider ausbaden. Schäbig von Microsoft ist, dass sie keine Lösung für das allseits bekannte Problem anbieten. Es wundert also nicht, dass bereits große Firmen wie z.B. die "Axel Springer AG", fast komplett zu Apple-Technologie wechseln. Erstaunlich ist dieser Schritt auch, da Apple offiziell gar nicht breite Businesslösungen als Geschäftsfeld führt und anvisiert. Das Problem muss also gewaltig sein. Ich finde, dass Microsoft nur davon profitieren kann, wenn der Druck auf sie wächst. Deshalb tue ich das meine dazu.

FAZIT
Ich hoffe Ihr versteht meinen Ansatz, warum ich keine Tabelle sondern eine Liste und das CSS-Tabellenmodell verwenden werde. Was bleibt ist die Frage, ob Jemand eine Lösung kennt, wie man mit dem CSS-Tabellenmodell erzeugte Tabellenzellen miteinander verbinden kann, ähnlich dem "colspan" bei HTML-Tabellen.

Grüße an alle CSS-Helden,
Yamoku

Efchen · 21 Juli 2008

Yamoku schrieb:
Danke für Deinen Hinweis. Das sehe ich auch so.
Aber ich möchte keine Tabellendaten, sondern ein Formular layouten

Dazu braucht man aber kein display:table*

Ein Formular ist semantisch gesehen keine Tabelle meine ich. Ich denke, eine Liste entspricht am ehesten der Semantik eines Formulars, da es Untergruppen geben kann, die von übergeordneten Eingaben abhängig sind. Was meint Ihr?

Ein Formular ist keine Tabelle, richtig. Aber eine Liste würde ich daraus auch nicht machen. form, fieldset, legend, label und input reichen in der Regel völlig.

Der Knackpunkt sind die rechtsbündigen Labels, links von den Eingabefenstern platziert. Die maximale Labelbreite kann nicht fixiert werden

Dann hast Du ein Problem.

Das CSS-Tabellenmodell ist da gerade richtig denke ich.

Nur, dass der weitverbreitetste Browser damit nicht umgehen kann.

Also handelt es sich bei Deiner Anwendung um ein Intranet-Projekt, das einem beschränkten Personenkreis zugänglich ist, dem man vorschreiben kann, welchen Browser er benutzen darf, oder aber Du musst Kompromisse eingehen. Da denke ich an mehrzeilige Labels, wenn der Platz nicht ausreicht.

Es handelt sich nicht um eine öffentliche Webseite, sondern um eine Applikation. Deshalb bin ich nicht zwingend auf Crossbrowser angewiesen.

Ich kann mir nie angewöhnen, erstmal bis zum Ende zu lesen, ich antworte immer sofort, wenn ich was beantwortenswertes finde ;-) Aber so sind wir wenigstens deutlich einer Meinung.

Der Punkt ist: Ich als Nutzer würde lieber 5 Minuten investieren um meinen Browser zu aktualisieren, als wesentlich mehr für eine Applikation zahlen zu müssen. Oder?

Naja, die Wahl hat halt nicht jeder. Zumindest nicht im großen, weiten Web.

Microsoft gibt dem Internetexplorer kaum eine Chance.

Klar, aber das haben die noch nicht kapiert. Sie wollen ja, dass der IE den Standard setzt und sich alle auf IE konzentrieren, aber das hat wohl nie so wirklich geklappt, auch wenn der Browser immer noch den größten Marktanteil besitzt.

Das Ganze wird zunehmend zu einem Problem für uns Entwickler.

Es ist schon immer ein Problem, aber unbedingt größer wird es IMHO nicht. Ich bin der Meinung, dass man im WWW (für öffentliche Websites) immer kompromissbereit sein muss, aufgrund der viefältigen Möglichkeiten, die nicht nur durch verschiedene Browser zur Verfügung stehen. Und da macht der IE so viel auch nicht aus.

Ich hoffe Ihr versteht meinen Ansatz, warum ich keine Tabelle sondern eine Liste und das CSS-Tabellenmodell verwenden werde.

Es ist ein sehr guter und IMHO richtiger Ansatz!
Für eine öffentliche Website ist er halt nicht praktikabel (oder nur schwer umzusetzen).

Was bleibt ist die Frage, ob Jemand eine Lösung kennt, wie man mit dem CSS-Tabellenmodell erzeugte Tabellenzellen miteinander verbinden kann, ähnlich dem "colspan" bei HTML-Tabellen.

Da bin ich gespannt drauf, ich gehöre jedenfalls nicht dazu, weil ich das nie benutzt habe.

Gruß,
-Efchen

Yamoku · 22 Juli 2008

Danke für deine Anteilnahme. Google hat 0 Einträge zu "colspan CSS-Tablemodel". In CSS3 gibt es auch keine Erweiterung in Richtung colspan. Dafür dann aber das CSS Advanced Layout Module. Das wird ein Spaß.

colspan bei anonymen Tabellenobjekten?

Yamoku

Neues Mitglied

prm

Aktives Mitglied

Yamoku

Neues Mitglied

prm

Aktives Mitglied

Yamoku

Neues Mitglied

Efchen

Guest

Yamoku

Neues Mitglied

Neueste Beiträge