Tabellenformatierung
emmis
- html
0 MichiN0 jens ubert0 MudGuard0 Vinzenz Mai
0 Vinzenz Mai0 Gunnar Bittersmann
Hallo Forum,
eigentlich eine ganz Simple aber für mich nicht zu lösende Sache: dynamische Zellenhöhen!
Ich habe eine Tabelle die z.B. so aussieht:
<table width="100" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="1"> </td>
<td rowspan="2" id="2"> </td>
</tr>
<tr>
<td id="3"> </td>
</tr>
</table>
Ich möchte, dass die td mit der id=1 immer 80px hoch ist, die td's mit id=3 und id=2 sollen mit Content befüllt werden und dynmisch je nach bedarf die eigene Höhe bestimme ... aber die id=1 bitte unberührt dastehen lassen.
Im Firefox funktioniert das auch ganz normal, im IE scheint aber die Höhenangabe von id=1 vollkommen ignoriert zu werden. Kann man da was machen oder ist das einfach nur hinnehmbar.
Vielen Dank
Hi Jens,
eigentlich eine ganz Simple aber für mich nicht zu lösende Sache: dynamische Zellenhöhen!
damit eine Zeilenhöhe dynamisch ist, sich also ihrem Inhalt anpaßt, mußt Du _nichts_ extra angeben. Genau _das_ zeichnet die Genialität von html ja aus, dass sich zB. eine Zeilenhöhe automatisch dem Inhalt anpaßt.
Dein html ist somit in mehrfacher WEeise kein gutes.
<table width="100" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="1"> </td>
<td rowspan="2" id="2"> </td>
</tr>
<tr>
<td id="3"> </td>
</tr>
</table>
1.) Wieso verwendest Du hier IDs und keine Klassen? Was ist, wenn auf der selben Seite eine 2. oder 3. Tabelle dazukommt, wo Du das selbe Layout möchtest? Nummerierst Du dann Deine IDs rauf bis ins Unendliche? IDs dürfen pro Seite nur _eibn mal_ vorkommen, Klassen mehrfach. Es wäre also logischer, hier mit Klassen zu arbeiten.
2.) Den Zeilen, die eine dynamische, sich dem Inhalt angepaßte Höhe haben sollen, brauchst Du _keine_ Klasse mit auf den Weg geben.
3.) Wenn in einem Teil der Tabelle nichts stehen soll, dann schreibe auch nichts rein und spare Dir das unnötige " ". Ein <td></td>
reicht aus.
4.) Trenne Inhalt von Layout. Außer einem <table border="1">, damit die Tabelle auch ohne CSS mit Linien dargestellt wird, kannst (und sollst) Du _sämtliche_ Formatierungen <http://de.selfhtml.org/html/tabellen/gestaltung.htm#gestalten_css@title=mit CSS bewerkstelligen>.
Im Firefox funktioniert das auch ganz normal, im IE scheint aber die Höhenangabe von id=1 vollkommen ignoriert zu werden.
Dazu kann ich Dir nichts sagen, außer zum Xten mal bitten, Seiten online zu stellen und hier den Link dazu zu posten, damit die Leute, die sich mit Deinem Problem befassen, sich das "live" ansehen können.
Kann man da was machen oder ist das einfach nur hinnehmbar.
Natürlich, man verwendet semantisch korrektes html und formatiert jene Zeile, der man eine fixe Höhe geben möchte, entsprechend mit CSS. Ich habe Dir _ausnahmsweise_ ein Beispiel geschrieben und online gestellt. Schau Dir das an und wirf einen Blick in den Quellcode.
Da, wo ich grade bin, gibt es vom IE nur die 6.0er Version, diese zeigt meine Bespielseite allerdings völlig korrekt an.
Mit lieben Grüßen aus Wien
Michi
... leider erst jetzt die Antworten gesehen. Vergesst das mit den IDs, die habe ich leider nur zu Beschriftung dieses Threads benutzen wollen. Ich verwende keine oder anders genannte. Hier aber ein simples Beispiel für das Problem, wenns überhaupt eines ist:
http://www.pool11.de/test3.html
die richtige Darstellung ist die im Firefox. Der IE ignoriert die Zellenhöhe i oberen linken <td>.
Ach so: ich weiss, dass man mi CSS und DIVs arbeiten sollte, aber dies ist ein Beipiel-Script und aus gewissen Gründen muss ich nun mal mit Tabellen arbeiten.
Der Code dazu:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Untitled Document</title>
</head>
<body>
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="254" style="height:10px;" bgcolor="#0033FF"> </td>
<td width="246" rowspan="2" bgcolor="#00CC00">fwertwert<br>
etzertzertzertz<br>
ertzertzertzertzertzsdfgsdfg<br>
sdfgsdfgsdfgsdfg<br>
sdfgsdfgsdfgsdfg</td>
</tr>
<tr>
<td bgcolor="#00CCCC"> </td>
</tr>
</table>
</body>
</html>
Hi,
Vergesst das mit den IDs, die habe ich leider nur zu Beschriftung dieses Threads benutzen wollen. Ich verwende keine oder anders genannte.
Wenn Du Hilfe zu Deinem Code willst, ist es nicht sinnvoll, vollkommen anderen Code zu zeigen.
und aus gewissen Gründen muss ich nun mal mit Tabellen arbeiten.
Und aus Gewissensgründen solltest Du das nicht tun ... ;-)
cu,
Andreas
Grundlage für Zitat #1427.
Hallo,
... leider erst jetzt die Antworten gesehen. Vergesst das mit den IDs, die habe ich leider nur zu Beschriftung dieses Threads benutzen wollen. Ich verwende keine oder anders genannte. Hier aber ein simples Beispiel für das Problem, wenns überhaupt eines ist:
das Problem der von Deiner Vorstellung abweichenden Darstellung im IE ist unter folgenden Umständen nachvollziehbar:
a) die Höhe ist für eine Zelle festgelegt, die sich in der gleichen Zeile
befindet wie eine Zelle, die sich über mehr als eine Zeile erstreckt.
b) die Gesamthöhe wird durch die verbundene Zelle vorgegeben.
Soweit ich das sehe, verhalten sich sowohl IE als auch Firefox völlig standardkonform zu CSS 2.1 - auch wenn Firefox zum von Dir gewünschten Ergebnis kommt und IE nicht :-)
Ich zitiere aus der verlinkten Spezifikation:
<zitat>
CSS 2.1 does not specify how cells that span more than one row affect
row height calculations except that the sum of the row heights involved
must be great enough to encompass the cell spanning the rows.
</zitat>
Wenn Du aus welchen Gründen auch immer auf Tabellen zurückgreifen musst, vermeide die Situation, in der Browser die Zeilenhöhen nach eigenem Geschmack berechnen dürfen und somit zu anderen Ergebnissen kommen dürfen, als Du erwartest. Auf jeden Fall ist es eine gute Idee, veraltete HTML-Attribute zu entsorgen.
Freundliche Grüße
Vinzenz
Hallo,
Ich möchte, dass die td mit der id=1 immer 80px hoch ist, die td's mit id=3 und id=2 sollen mit Content befüllt werden und dynmisch je nach bedarf die eigene Höhe bestimme ... aber die id=1 bitte unberührt dastehen lassen.
Du solltest <http://de.selfhtml.org/html/referenz/attribute.htm#id_idref_name@title=gültige Werte für id-Attribute> verwenden.
Im Firefox funktioniert das auch ganz normal, im IE scheint aber die Höhenangabe von id=1 vollkommen ignoriert zu werden.
ich kann das nicht bestätigen.
Nach meinen Tests verhalten sich IE 8 und Firefox 3.0.10 gleich.
Testbeispiel mit gültigen id-Werten.
Testbeispiel mit ungültigen id-Werten.
Meine Webdeveloper-Toolbar sagt mir, dass im zweiten Fall wegen des ungültigen Selektors die entsprechende CSS-Regel ignoriert wurde.
Freundliche Grüße
Vinzenz
@@emmis:
nuqneH
2. Fehler: "1", "2", "3" sind keine gültigen IDs. [HTML401 §6.2]
1. Fehler: Du benutzt Tabellen zum Layouten; diese sind dazu jedoch ungeeignet. [ZITAT1068] Mach dich mit http://de.selfhtml.org/css/index.htm@title=CSS vertraut! Damit realisierst du dann dein <http://de.selfhtml.org/css/layouts/mehrspaltige.htm%0A@title=mehrspaltiges Layout>.
Qapla'