nicht angemeldet
Hallo Hopsel,
Um so ein Problem generell anzugehen:
- Zerlege die Tabelle in Vierecke, so dass alle Ecken mit anderen Ecken zusammenfallen, d. h. es müssen genau gleich große Rechtecke entstehen.
Für deinen Fall also:
_________________
| a | b | b | c |
|---------------|
| d | e | g | g |
|---------------|
| d | f | g | g |
- Nun siehst du welche Zellen welchen row- bzw. colspan benötigen.
_________________
| a | cs=2 | c |
|---------------|
| rs | e | cs=2 |
| = |---| |
| 2 | f | rs=2 |
das hast Du schön erklärt. Wenn die Browser clever genug wären, das so umzusetzen, wie der Lehrer es an die Tafel gemalt hat, wäre es noch schöner.
Nach meinen Untersuchungen im Laufe der vergangenen Woche sind Browser jedoch nur in einem Modus sehr zuverlässig beim Rendern einer Tabelle, wenn die gewünschte Breite nicht durch den Inhalt ausgefüllt wird:
<http://de.selfhtml.org/css/eigenschaften/tabellen.htm#table_layout@title=table-layout: fixed;>
mit vorgegebener Tabellenbreite (die kleiner oder gleich der Summe der Spaltenbreiten sein sollte).
Schauen wir uns an, was bei mir (ohne CSS-Einsatz) herausgekommen ist:
Außer Safari kommt keine Darstellung der Aufgabenstellung nahe - im Gegensatz zu der in allen Browsern weitgehend gleichen Darstellung, hier exemplarisch beim IE 7, die laut Tafelbild gewünscht war:
Diese Darstellung benötigt den Einsatz von weiterführenden Elementen, um <http://de.selfhtml.org/html/tabellen/aufbau.htm#vordefinieren@title=Spalten vorzudefinieren>. Dieses Mittel führt jedoch nur im Firefox dazu, dass die Darstellung der Zielvorgabe (einigermaßen) entspricht. Operas Darstellung bleibt auch im Standards Compliance Modus vergleichbar zu der im IE.
Für die Darstellung verwendete ich folgende CSS-Angaben:
table {
/* zuverlässige Spaltenbreiten (falls der Inhalt nicht breit
genug ist, gibt es nur im [link:http://www.w3.org/TR/2007/CR-CSS21-20070719/tables.html#fixed-table-layout@title=Fixed table layout]
in Verbindung mit einer Breitenangabe für die Tabelle */
table-layout: fixed;
width: 16em;
/* Weiße Schrift auf grünem Hintergrund, wie auf Schultafeln üblich */
color: white;
background-color: green;
/* Die da wollte ich immer mal verwenden ;-) */
font-family: "Comic Sans MS", fantasy;
/* etwas mehr in Tafelgröße ... */
font-size: 2em;
}
/* Breitenangaben für die Spalten */
col {
width: 4em;
}
td {
/* Höhe einer Zeile = Breite einer Spalte */
height: 4em;
/* Setze den Text mittig */
text-align: center;
}
Alles in allem finde ich das für eine Schulaufgabe nicht gerade einfach, vor allem da die CSS-freie Lösung in verbreiteten Browsern nicht die gewünschte Darstellung liefert. Ja, ich weiß, dass für die Darstellung CSS zuständig ist. Aber weiß dies der Lehrer? Hat er es seinen Schülern vermittelt? Anhand der Indizienlage (CSS-freier HTML-Code ohne http://de.selfhtml.org/html/xhtml/unterschiede.htm#dokumenttyp@title=Dokumenttyp-Deklaration) bezweifle ich das.
Freundliche Grüße
Vinzenz