[HTML] Tabelle mit überschneidenden rowspan regelkonform?

dow · 9. März 2006

Hallo,

ich hänge gerade an dem Problem, dass ich eine Tabelle einfach nicht richtig angezeigt und gleichzeitig regelkonform bekomme.

Das Bild im Anhang zeigt einen Screenshot zur Verdeutlichung der Tabellenstruktur,
zu finden ist die Seite unter http://www.roaperradl.de/ .

Das Hauptproblem sind sich überschneidende Zellen mit rowspan (zweite Zeile), bei denen ich mit der Zeilenhöhe nachhelfen muss damit der Browser die Tabelle korrekt interpretiert - allerdings nicht html 4.01 trans. konform.

Standardkonformer aber nicht funktionierender Code (die zweite und vorletzte Tabellenzeile brauchen height="5"-Angaben damit es richtig angezeigt wird:
auch zu sehen unter http://www.roaperradl.de/

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title> 
</head>
<body style="background-color:#FF6500">
<div id="main" style="height:539px; width:818px; vertical-align:middle; ">
  <table cellpadding="0" cellspacing="0">
    <tr>
      <td rowspan="2" colspan="2"><img src="images/corner_left_top.png" alt="corner" /></td>
      <td colspan="3"><img src="images/border_top.png" height="30" width="748" alt="border" /></td>
      <td rowspan="2" colspan="2"><img src="images/corner_right_top.png" alt="corner" /></td>
    </tr>
    <tr valign="top">
      <td rowspan="2"><img src="images/roadl_logo.jpg" width="141" height="126" alt="Das Roaperradl Logo" /></td>
      <td rowspan="4" bgcolor="#DECFC6"><img src="images/pixel_black.gif" height="464" width="2" alt="line" /></td>
      <td rowspan="2"><img src="images/header.jpg" width="605" height="126" alt="Willkommen bei uns" /></td>
    </tr>
    <tr>
      <td width="30" rowspan="3" valign="top"><img src="images/border_left.png" height="469" width="30" alt="border" /></td>
      <td width="5" rowspan="3"><img src="images/stripe_left.jpg" width="5" height="469" alt="border" /></td>
      <td><img src="images/stripe_right_top.jpg" width="5" height="121" alt="line" /></td>
      <td rowspan="3"><img src="images/border_right.png" width="30" height="469" alt="border" /></td>
    </tr>
    <tr>
      <td><img src="images/pixel_black.gif" height="2" width="141" alt="line" /></td>
      <td colspan="2"><img src="images/pixel_black.gif" height="2" width="610" alt="line" /></td>
    </tr>
    <tr>
      <td valign="top" rowspan="2"><table cellpadding="0" cellspacing="0" style="background:url(images/buttons.jpg)">
          <tr>
            <td><a href="#" onmouseover="document['startseite'].src='images/startseite.jpg'" onmouseout="document['startseite'].src='images/pixel_transparent.gif'"><img src="images/pixel_transparent.gif" alt="Startseite" width="141" height="28" id="startseite" border="0" /></a></td>
          </tr>
          <tr> 
            <td><a href="#" onmouseover="document['rundumblick'].src='images/rundumblick.jpg'" onmouseout="document['rundumblick'].src='images/pixel_transparent.gif'"><img src="images/pixel_transparent.gif" alt="Rundumblick" width="141" height="30" border="0" id="rundumblick" /></a></td>
          </tr>
          <tr>
            <td><a href="#" onmouseover="document['veranstaltungen'].src='images/veranstaltungen.jpg'" onmouseout="document['veranstaltungen'].src='images/pixel_transparent.gif'"><img src="images/pixel_transparent.gif" alt="Veranstaltungen" border="0" width="141" height="30" id="veranstaltungen" /></a></td>
          </tr>
          <tr>
            <td><a href="#" onmouseover="document['anmietung'].src='images/anmietung.jpg'" onmouseout="document['anmietung'].src='images/pixel_transparent.gif'"><img src="images/pixel_transparent.gif" alt="Anmietung" width="141" height="30" id="anmietung" border="0" /></a></td>
          </tr>
          <tr>
            <td><a href="#" onmouseover="document['ueberuns'].src='images/ueberuns.jpg'" onmouseout="document['ueberuns'].src='images/pixel_transparent.gif'"><img src="images/pixel_transparent.gif" alt="&Uuml;ber uns" width="141" height="30" border="0" id="ueberuns" /></a></td>
          </tr>
          <tr>
            <td><a href="#" onmouseover="document['kontakt'].src='images/kontakt.jpg'" onmouseout="document['kontakt'].src='images/pixel_transparent.gif'"><img src="images/pixel_transparent.gif" alt="Kontakt" width="141" height="31" id="kontakt" border="0" /></a></td>
          </tr>
          <tr>
            <td><img src="images/pixel_transparent.gif" height="172" width="1" alt="spacer" /></td>
          </tr>
        </table></td>
      <td rowspan="2"><img src="images/content_pane.jpg" height="351" width="605" alt="Inhalt" /></td>
      <td><img src="images/stripe_right_bottom.jpg" width="5" height="346" alt="border" /></td>
    </tr>
    <tr>
      <td rowspan="2" colspan="2"><img src="images/corner_left_bottom.png" alt="corner" width="35" height="35" /></td>
      <td bgcolor="#DECFC6"></td>
      <td colspan="2" rowspan="2"><img src="images/corner_right_bottom.png" alt="corner" width="35" height="35" /></td>
    </tr>
    <tr>
      <td colspan="3"><img src="images/border_bottom.png" width="748" height="30" alt="border" /></td>
    </tr>
  </table>
</div>
</body>
</html>

/edit
Die Links geändert zwecks google-optimierung

und da sie so oder so nicht mehr aktuell sind

AlbertLast · 9. März 2006

du hast recht högen angaben und width sind nicht merh gern gesehn man soll nämlich css dafür benutzen !

dow · 9. März 2006

*au*, die höhe einer normalen Zeile mit css festzulegen - da bin ich jetzt nicht drauf gekommen. thx

Suche

[HTML] Tabelle mit überschneidenden rowspan regelkonform?

dow

Lieutenant

Anhänge

AlbertLast

Lieutenant

dow

Lieutenant

Ähnliche Themen