[HTML] Tabellenproblem, Höhe einer Zelle Variabel gestalten

exxe · 16.06.2012

Ich hab aber immer noch ein Problem das ich endlich beseitigen Möchte.
Zu Einsatz kommen HTML und etwas CSS.

Mit dem aktuellen Seamonkey und Firefox sieht alles aus wie es soll, mit Opera und Chrome auch.
Nur der IE macht (natürlich

) Probleme.

Das Problem betrifft die Tabelle die ich für das Layout benutze
Ich hab grob ne Tabelle mit Links und Rechts
Wobei Rechts meist mehr Inhalt (Bilder) hat
Links ist aber teilweise nochmal unterteilt in zwei Spalten

Die unterteilten Zeilen hab ich mit "height: 5px" versehen
Firefox und co halten sich dran und machen wie gewünscht einfach die letzte Zeile passend hoch.
IE hält sich nicht dran und macht alle Zeilen gleich hoch...

Was ich natürlich machen könnte wär unten einfach auch mit "height: Xpx" aufzublasen bis es passt aber dann müsste ich da an 200+ Seiten rum versuchen bis es passt was ne weile dauern würde.

Hat evtl wer ne bessere Idee?
Sowas wie repeat-x bei Hintergrundbildern oder was weiß ich

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>APAC Banshee</title>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<table  style="text-align: left; width: 1100px;" border="0"
cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="2" rowspan="1" style="vertical-align: top;"><!--#include file="head.shtml" -->
</td>
</tr>
<tr>
<td style="vertical-align: top; width: 180px;"><!--#include file="nav.shtml" -->
</td>
<td>
<table style="text-align: left; width: 100%;" border="0" cellpadding="4"
cellspacing="0">
<tbody>
<tr>
<td class="th">APAC Banshee</td>
</tr>
</table>
<table class="main2" border="0" cellpadding="3" cellspacing="1" width="100%">
<tr>
<td width="200px" style="text-align:right; height: 5px;" >Chipsatz</td>
<td width="300px">3dfx Banshee</td>
<td colspan="1" rowspan="11"
style="vertical-align: top; text-align: center; font-size:10px">
<div style="font-size: 12px; text-align: left;">APAC Banshee</div>
<a href="../pic/apac_banshee_01.JPG"><img alt="picture"
title="vorderseite der APAC Banshee"
src="../pic/apac_banshee_01_t.JPG"
style="border: 0px solid ; width: 300px; height: 199px;"></a><br><a href="../pic/apac_banshee_01.JPG">
Dieses Bild in 1024x 680Pixel</a><br>
<a href="../pic/apac_banshee_01b.JPG">oder in 3840x 2160Pixel</a><br>
<br>
<a href="../pic/apac_banshee_02.JPG"><img alt="picture"
title="rückseite der APAC Banshee"
src="../pic/apac_banshee_02_t.JPG"
style="border: 0px solid ; width: 300px; height: 199px;"></a><br><a href="../pic/apac_banshee_02.JPG">
Dieses Bild in 1024x 680Pixel</a><br>
<a href="../pic/apac_banshee_02b.JPG">oder in 3840x 2160Pixel</a><br>
<br>
<a href="../pic/apac_banshee_03.JPG"><img alt="picture"
title="OVP der APAC Banshee"
src="../pic/apac_banshee_03_t.JPG"
style="border: 0px solid ; width: 300px; height: 199px;"></a><br>
<br>
<a href="../pic/apac_banshee_04.JPG"><img alt="picture"
title="rückseite der OVP der APAC Banshee"
src="../pic/apac_banshee_04_t.JPG"
style="border: 0px solid ; width: 300px; height: 199px;"></a><br>
<br>
</td>
    </tr>
    <tr>
      <td style="text-align:right; height: 5px;">Chiptakt </td>
      <td>100 MHz</td>
    </tr>
    <tr>
      <td style="text-align:right; height: 5px;">Speicher </td>
      <td>16 MB SG-RAM</td>
    </tr>
    <tr>
      <td style="text-align:right; height: 5px;">Speichertakt </td>
      <td>100 MHz</td>
    </tr>
    <tr>
      <td style="text-align:right; height: 5px;">Speicherinterface </td>
      <td>128 Bit</td>
    </tr>
    <tr>
      <td style="text-align:right; height: 5px;">Speicherbandbreite </td>
      <td>1,6 GB/sec</td>
    </tr>
    <tr>
      <td style="text-align:right; height: 5px;">Füllrate</td>
      <td>100 MegaPixel/sec</td>
    </tr>
    <tr>
      <td style="text-align:right; height: 5px;">Füllrate Multitexturing </td>
      <td>100 MegaTexel/sec</td>
    </tr>
     <tr>
      <td style="text-align:right; height: 5px;">Max. 2D-Auflösung </td>
      <td></td>
    </tr>
     <tr>
      <td style="text-align:right; height: 5px;">Max. 3D-Auflösung </td>
      <td></td>
    </tr>
    <tr>
      <td colspan="2" rowspan="1" style="vertical-align: top; width: 507px;"><br>

      </td>
    </tr>
  </tbody>
</table>
<br>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>

OBrian · 16.06.2012

Das Problem betrifft die Tabelle die ich für das Layout benutze

Genau aus solchen Gründen ist es heute absolut unmodern, Tabellen als Layoutkrücke zu benutzen. Seit es CSS gibt und es in allen Browsern unterstützt wird, gibt es auch keinen Grund mehr dafür, wenn es nicht eine alte Seite ist, die man nur ein kleines Stück erweitern will (aber auch dann sind Tabellen eher hinderlich).

Grundsätzlich: Tabellen nur für echte Tabellen, d.h. die man auch als solche sieht, und Layout mit CSS, sprich mit div-Blöcken o.ä., die per Stylesheet-Formatierung ausgerichtet werden.

Vorteil: Es sieht immer so aus, wie es soll, und es ist problemlos erweiterbar oder umstellbar, falls sich das Seitenlayout ändern soll. Und der Code ist nebenbei auch viel übersichtlicher.

Google einfach mal nach "CSS layout" und schau Dir ein paar Tutorials an, dann wirst Du wahrscheinlich bald sagen "warum hab ich das nicht gleich so gemacht?"

exxe · 16.06.2012

hmm, soweit ich das verstanden hab gibts da mit alten browsern aber noch Probleme

OBrian · 17.06.2012

naja, vollständige Unterstützung aller CSS-Eigenschaften nicht (z.B. Sprachausgabe), aber genug, daß man damit gut arbeiten kann: http://www.css4you.de/browsercomp.h..._3-0+;firefox_3-5+;opera_9-5+;ie_8;ie_7;ie_6;

Maxefix · 18.06.2012

exxe schrieb:
hmm, soweit ich das verstanden hab gibts da mit alten browsern aber noch Probleme

Selbst im IE6 kriegt man per CSS ein Layout hin, es ist nur etwas mehr Aufwand. Allerdings musst du dich eh fragen, ob der Browser für deine Zielgruppe überhaupt noch eine Rolle spielt. Hier helfen Statistiksysteme wie Piwik weiter.

Warum du mit deinem jetztigen Aufbau Probleme hast ist ohne Beispiel schlecht ersichtlich. Hast du nicht einen Link, damit wir uns das anschauen können?

Gruß,
Max

exxe · 20.06.2012

http://tdfx.de/ger2/apac_banshee.shtml

Statistik sagt

Firefox 48.9 %
MS Internet Explorer 16.6 %
Opera 16.2 %
Google Chrome 13.4 %
Safari 3.8 %
Mozilla 0.6 %
w3m 0.1 %

aufgedröselt sind das beim IE
Msie 9.0 6.7 %
Msie 8.0 8 %
Msie 7.0 0.7 %
Msie 6.0 1 %

Maxefix · 20.06.2012

Die Tabelle ist nicht valide! Die erste Zeile hat 3 Spalten, die darauf folgenden nur noch 2. Kein Wunder das du hier Darstellungsprobleme hast.

Mach am Besten zwei Tabellen daraus. Eine große (zwei Spalten, eine Zeile), in der links die zweite Tabelle für die technischen Daten ist und rechts sämtliche Bilder.

Gruß,
Max

Antarctica · 21.06.2012

Maxefix schrieb:
Die Tabelle ist nicht valide! Die erste Zeile hat 3 Spalten, die darauf folgenden nur noch 2. Kein Wunder das du hier Darstellungsprobleme hast.

Die ist völlig valide.

Schließlich hat die erste Zeile dritte Spalte ein rowspan="11" da stehen. D.h. die nächsten zehn Zeilen brauchen/dürfen keine dritte Spalte haben.

Maxefix · 21.06.2012

Mein Fehler, das habe ich völlig übersehen.

Dann würde ich noch versuchen den <tr> eine Höhe zu geben. Wenn das auch nicht klappt: Einfach zwei Tabellen nutzen. In dem Fall ist das gar nicht so verkehrt, eine Tabelle die fürs Layout missbraucht wird, und eine semantisch sinnvolle für tabellarische Daten.

Gruß,
Max

[HTML] Tabellenproblem, Höhe einer Zelle Variabel gestalten

exxe

Vice Admiral Special

OBrian

Moderation MBDB, ,

exxe

Vice Admiral Special

OBrian

Moderation MBDB, ,

Maxefix

Grand Admiral Special

exxe

Vice Admiral Special

Maxefix

Grand Admiral Special

Antarctica

Grand Admiral Special

Maxefix

Grand Admiral Special

Ähnliche Themen