Tabellen
NineInchNails
- html
Hi ich weiss echt nicht weiter.
Unser Informatiklehrer verlangt wiedereinmal etwas was er schlecht erklaert hat.
http://img3.imagebanana.com/img/v4d7nltc/TAFEL.JPG
Das sollen wir als HTML Tabelle machen.
<html>
<head>
<title>Tabellen</title>
</head>
<body>
<table border="3" cellpadding="3">
<tr>
<td height="20" width="20">
a
</td>
<td width="40">
b
</td>
<td width="20">
c
</td>
</tr>
<tr>
<td rowspan="2">
d
</td>
<td>
e
</td>
<td rowspan="2" colspan="2" width="40" height="40">
g
</td>
</tr>
<tr>
<td>
f
</td>
</tr>
</table>
</body>
</html>
Link zur Tabelle
Soweit bin ich, aber ich schaff es nicht, dass die Buchstaben "E" und "F" nur halbsolange sind wie "b" (also die Tabellen)
Findet ihr den Fehler?
Danke im Voraus fuer die Hilfe
NIN
Kennst du colspan?
Findet ihr den Fehler?
Da man das ganze ja nur als eine Art Rätsel ernst nehmen kann:
Ich gebe dir nur einen Tipp fürs weiterkommen.
in Zelle "b" fehlt etwas das auf "-span" endet.
mfg Beat
Hi NineInchNails!
Um so ein Problem generell anzugehen:
1. 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 |
-----------------
2. Nun siehst du welche Zellen welchen row- bzw. colspan benötigen.
_________________
| a | cs=2 | c |
|---------------|
| rs | e | cs=2 |
| = |---| |
| 2 | f | rs=2 |
-----------------
MfG H☼psel
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
http://img3.imagebanana.com/img/v4d7nltc/TAFEL.JPG
wenn die reihenfolge der beschriftung die reihenfolge im quellcode wiedergeben soll, wird das "etwas schwierig" als tabelle umsetzbar - oder täusche ich mich da jetzt?
Hi ich weiss echt nicht weiter.
Unser Informatiklehrer verlangt wiedereinmal etwas was er schlecht erklaert hat.
http://img3.imagebanana.com/img/v4d7nltc/TAFEL.JPG
Das sollen wir als HTML Tabelle machen.
<html>
<head>
<title>Tabellen</title>
</head>
<body>
<table border="3" cellpadding="3">
<tr>
<td height="20" width="20">
a
</td>
<td width="40">
b
</td>
<td width="20">
c
</td>
</tr>
<tr>
<td rowspan="2">
d
</td>
<td>
e
</td>
<td rowspan="2" colspan="2" width="40" height="40">
g
</td>
</tr>
<tr>
<td>
f
</td>
</tr>
</table>
</body>
</html>
> [Link zur Tabelle](http://upload.zichy.de/files/Tabelle_Aufgabe218.html)
> Soweit bin ich, aber ich schaff es nicht, dass die Buchstaben "E" und "F" nur halbsolange sind wie "b" (also die Tabellen)
> Findet ihr den Fehler?
> Danke im Voraus fuer die Hilfe
> NIN
Hi
Hab das hier gemacht:
<html>
<head>
<title>Tabellen</title>
</head>
<body>
<table border="3" cellpadding="3">
<tr>
<td height="20" width="20">
a
</td>
<td width="40" colspan="2">
b
</td>
<td width="20" colspan="2">
c
</td>
</tr>
<tr>
<td rowspan="2">
d
</td>
<td width="10">
e
</td>
<td rowspan="2" colspan="2" width="40" height="40">
g
</td>
</tr>
<tr>
<td width="10">
f
</td>
</tr>
</table>
</body>
</html>
Schaus dir mal an und sag ob es das ist was du dir vorstellst.
MFG
Simon