HTML: Tabellenproblem mit Firefox

[bigfraggle]

Hallo zusammen,

kompliziert zu beschreibendes Problem, aber ich versuche trotzdem mal mein Glück:

Tabelle 800px
2 Zeilen
4 Spalten (jew. 200px)

Die beiden übereinander liegenden Zellen der 1. Spalte sollen verbunden sein
1. Zeile: Zellen 3 und 4 sollen verbunden sein (zusammen 400px)
2. Zeile: Zellen 2 und 3 sollen verbunden sein (zusammen 400px)

Tolles Schaubild:

200___200___200___200___ (zum Verständnis: 4 Spalten à 200px)

200___200___400_________ (3. und 4. Zelle verbunden)
XXX___400_________200___ (2. und 3. Zelle verbunden)

So sieht mein Code aus (Farben nur zur Veranschaulichung):

<table width="800" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="200" rowspan="2" bgcolor="#00FF00">1.1</td>
<td width="200" bgcolor="#0066FF">2.1</td>
<td colspan="2" bgcolor="#00CCFF">3.1</td>
</tr>
<tr>
<td colspan="2" bgcolor="#0066FF">2.2</td>
<td width="200" bgcolor="#00CCFF">4.2</td>
</tr>
</table>

Resultat: IE und Opera ok, Firefox murx.

Wieso, weshalb, warum? Was mache ich falsch, wo ist der Denkfehler?

Gruß
bigfraggle

 

[mxsch]

Hallo zusammen,

kompliziert zu beschreibendes Problem, aber ich versuche trotzdem mal mein Glück:

Tabelle 800px
2 Zeilen
4 Spalten (jew. 200px)

Die beiden übereinander liegenden Zellen der 1. Spalte sollen verbunden sein
1. Zeile: Zellen 3 und 4 sollen verbunden sein (zusammen 400px)
2. Zeile: Zellen 2 und 3 sollen verbunden sein (zusammen 400px)

Tolles Schaubild:

200___200___200___200___ (zum Verständnis: 4 Spalten à 200px)

200___200___400_________ (3. und 4. Zelle verbunden)
XXX___400_________200___ (2. und 3. Zelle verbunden)

So sieht mein Code aus (Farben nur zur Veranschaulichung):

<table width="800" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="200" rowspan="2" bgcolor="#00FF00">1.1</td>
<td width="200" bgcolor="#0066FF">2.1</td>
<td colspan="2" bgcolor="#00CCFF">3.1</td>
</tr>
<tr>
<td colspan="2" bgcolor="#0066FF">2.2</td>
<td width="200" bgcolor="#00CCFF">4.2</td>
</tr>
</table>

Resultat: IE und Opera ok, Firefox murx.

Wieso, weshalb, warum? Was mache ich falsch, wo ist der Denkfehler?

Gruß
bigfraggle

Also...
das Problem ist die Tabellenweite.
IE und Firefox intepretieren diese unterschiedlich.
Das heißt, wenn du bei Firefox eine Breite für eine Spalte eingibst (<td width="..">) wird diese Breite für die ganze Spalte übernommen.
In deinem Fall, bei 2 Angaben für eine Spalte wird einfach die 1. genommen.
Dem IE ist sowas z.B egal, mit dem funktionierts.
Deshalb kannst du die Tabellen verschachteln.
Du machst eine Tabelle mit 800px Breite.
Zunächst verbindest du in Spalte 1 die beiden gewünschten Zeilen, dann fügst du einfach in die Tabelle ne neue Tabelle.
Das gleiche in Zeile 2.
Einfach so:

<table width="800" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="200" rowspan="2" bgcolor="#00FF00">1.1</td>
<td>
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="200" bgcolor="#0066FF">2.1</td>
<td width="400" colspan="2" bgcolor="#00CCFF">3.1</td>
</tr>
</table>
</td>
<tr>
<td>
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" bgcolor="#0066FF">2.2</td>
<td width="200" bgcolor="#00CCFF">4.2</td>
</tr>
</table>
</td>
</table>

Ich hoffe ich konnte dir helfen und es ist verständlich.

P.S.: Funktioniert mit IE und FF, Opera hab ich nicht probiert.