Tabellenzeile mit <div> umspannen?

[Jules_Rulez]

Hallo zusammen.

Basis meines Problems ist die unten stehende Tabelle die den Seitenkopf einer Vorlagendatei von de.selfhtml.org darstellt (SELFHTML: Navigationshilfen / Wie fange ich an? / Tour 6 unter "fertige Layouts" und da Layout Nr. 6)

<!-- Tabelle Kopf-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#E0E2D4">
<td bgcolor="#E0E2D4" width="4%">&nbsp;</td>
<td height="62" width="88%"><a href="index.htm"><img src="images/logo.gif" width="170" height="61" align="middle" border="0" alt=""></a>
<b>Der &nbsp;R o h l i n g </b> :: v.1.0 :: 01.09.02</td>
<td width="8%">&nbsp;</td>
</tr>
<tr>
<td style="background-image:url(images/bg_gelb.gif)" width="4%">&nbsp;</td>
<td style="background-image:url(images/bg_gelb.gif)" width="88%" height="25">
<div align="right"><a href="#">impressum</a> :: <a href="#">feedback</a> ::&nbsp;<a href="#">forum</a>&nbsp;::
<a href="#">newsletter</a>&nbsp;::&nbsp;&nbsp;</div>
</td>
<td style="background-image:url(images/bg_gelb.gif)" width="8%">
<!-- Buttons rechts/links - home -->
<div align="right"> <a href="index.htm"><img src="images/bu_home.gif" width="42" height="15" border="0" alt=""></a></div>
</td>
</tr>
<!--Pfadangaben mit Links-->
<tr bgcolor="#E0E2D4">
<td colspan="3" height="25"><b>&nbsp;LINKWEG&nbsp;::: <a href="index.htm">inhalt</a>&nbsp;</b>/<b>&nbsp;</b>
</td>
</tr>
</table>
<!-- Tabelle Kopf Ende-->

Dabei wird der Hintergrund der 2. Zeile mit einer Grafik erstellt ("background-image:url(images/bg_gelb.gif)"). Ich habe nun versucht, den Bereich ähnlich darzustellen, nur ohne Grafik, dafür in jede Spalte der 2. Zeile folgendes eingetragen.

<td style="background-color:#E1C45B; border-top:thick; border-
top-style:solid; border-top-width:thin; border-top-color:#060606" 
width="xx%" height="25">

Das hat auch funktioniert. Soweit so gut! Nun möchte ich das ganze in ein Stylesheet auslagern, damit die Datei übersichtlicher wird. Dafür wollte ich um die ganze 2. Zeile in ein<div id="balken"> setzten und dann die ganzen Farb- und Rahmenangaben in ein Stylesheet packen. So wie folgt:

<div id="balken">
</tr>
<tr>
<td style="background-color:#E1C45B; border-top:thick; border-top-style:solid; border-top-width:thin; border-top-color:#060606" width="93%" height="25">
<div align="right"><a href="#">impressum</a> :: <a href="#">feedback</a> ::&nbsp;<a href="#">forum</a>&nbsp;::
<a href="#">newsletter</a>&nbsp;::&nbsp;</div></td>
<td style="background-image:url(images/bg_gelb.gif)" width="1%">&nbsp;</td>
<td style="background-image:url(images/bg_gelb.gif)" width="6%">
<!-- Buttons rechts/links - home -->
<div align="right"> <a href="index.htm"><img src="images/bu_home.gif" width="42" height="15" border="0" alt=""></a></div></td>
</tr>
</div>

CSS:

div#balken    {background-color:#E1C45B;
                    border-top:thick;
                    border-top-style:solid;
                    border-top-width:thin;
                    border-top-color:#060606;
}

Das klappt aber nicht. Alles, was passiert ist, dass eine dünne Linie über der "ersten" Zeile, die garnicht vom <div> umspannt wird, gezeichnet wir. - Kann mir jemand sagen, warum? Ich kann euch auch gerne den ganzen Quelltext posten, dachte nur, dass es sowieso schon so viel ist.

Vielen Dank schon mal,
Julian

 

[Loon3y]

Morgen!

Zu erst wäre es ratsam, alle Styleangaben in eine externe CSS-Datei oder zumindesti n den Head-Bereich auszulagern.

Dann ist das ganze nicht so wirklich im Sinne von html. Ein <div> wird verwendet, wenn man mehrere Elemente gruppieren will. Nicht um eine Tabelle zu umschließen oder sonst was.

Desweiteren ist eine Tabelle auch nicht so ganz für das Layout da, sondern für tabellarische Daten. Deshalb soltlest du doch fragen, ob du auch wirklich tabellarische Daten auszeichnest.


Gruß
Loon3y

 

[Efchen]

Hallo zusammen.

Hallo auch!

Um direkt auf die "Frage" im Titel einzugehen: Nein, sowas geht nicht.
Aber sowas ist auch nicht nötig. Eine Tabellenzeile ist mit <tr> ausgezeichnet. Wozu würde man die nochmal in ein Element reinpacken?

Basis meines Problems ist die unten stehende Tabelle

Das ist richtig. Denn wie schon gesagt, sind Tabellen dazu da, tabellarische Daten auszuzeichnen, nicht um damit Layout zu machen.

Nun möchte ich das ganze in ein Stylesheet auslagern, damit die Datei übersichtlicher wird.

Das ist gut. Noch übersichtlicher (und im Sinne von HTML korrekt) wird sie, wenn Du die Layouttabellen rauswirfst.

Ich kann euch auch gerne den ganzen Quelltext posten, dachte nur, dass es sowieso schon so viel ist.

Deswegen ist es auch immer besser, einfach nur einen Link zur Seite zu posten. Da kann man den Quelltext komplett einsehen und die Seite mit Webdeveloper-Tools analysieren und bearbeiten. Und das Forum wird zudem noch geschont :-)

Grüße,
-Efchen

 

[Jules_Rulez]

Hallo ihr beiden!

Tja, die "Profis"auf der de.selfhtm.org-Seite haben das ja so gemacht, dh. Tabellen fürs Layout benutzt. Daher dachte ich, das wäre auch gängig. Ich habe die ganzen Tabellen rausgeschmissen und sie Seite sieht schon ganz gut aus. Danke nochmal für die Antworten.

Gruß,
Julian

 

[Efchen]

Tja, die "Profis"auf der de.selfhtm.org-Seite haben das ja so gemacht, dh. Tabellen fürs Layout benutzt. Daher dachte ich, das wäre auch gängig.

Tja. Leider ist die aktuelle Version von SelfHTML schon ziemlich veraltet. Das muss man natürlich wissen. Als Referenz, wenn man weiß, was erlaubt ist, was nicht, ist SelfHTML allerdings immer noch sehr zu empfehlen.