Tabelle optisch trennen :)

One · 13. Dezember 2006, 10:22

Ich hab eine Tabelle mit Artikeldaten drin

Das sieht wie folgt aus:

Artikelbild Beschreibung Warenkorb
Artikelbild Beschreibung Warenkorb
Artikelbild Beschreibung Warenkorb

Wie ihr seht mit 3 Artikeln

Jetzt will ich aber eine Linie zwischen den Artikeln haben... nur irgendwie geht das nicht... Es soll dann so aussehen:

Artikelbild Beschreibung Warenkorb

-----------------------------------------------------------

Artikelbild Beschreibung Warenkorb

------------------------------------------------------------

Artikelbild Beschreibung Warenkorb

Ich hab mir gerade überlegt ob es sinnvoll wäre, wenn ich einfach neue unsichtbare Tabellenzeilen hinzufüge und da einfach ein Linienbild reinklatsche Wäre das in Ordnung? *am Kopf kratz* Oder gibts ne elegantere Lösung?

MfG

One

//edit
Ok die Überschrift ist dumm gewählt

Es müsste heißen: "Tabellenzeilen optisch trennen"

Marcus Gnaß · 13. Dezember 2006, 12:04

Quellcode

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">
<html>
<head>
<style type="text/css">
tr.my_row td {
border-width: 0px 0px 1px 0px;
border-style: solid;
border-color: black;
}
</style>
<title>Tabelle mit Trennlinien</title>
</head>
<body>
<table cellspacing="0" summary="Tabelle mit Trennlinien">
<tr class="my_row">
<td>Artikelbild</td>
<td>Beschreibung</td>
<td>Warenkorb</td>
</tr>
<tr class="my_row">
<td>Artikelbild</td>
<td>Beschreibung</td>
<td>Warenkorb</td>
</tr>
<tr>
<td>Artikelbild</td>
<td>Beschreibung</td>
<td>Warenkorb</td>
</tr>
</table>
</body>
</html>

Alles anzeigen

One · 13. Dezember 2006, 12:14

Also ich hab es jetzt irgendwie doch selber hinbekommen, aber auf eine etwas andere Art glaub ich *am Kopf kratz*

Geht das auch, oder wäre da was zu verbessern?

Quellcode

<html>
<head>
<title>Warenliste chinesische Tees</title>
<meta name="author" content="">
<STYLE TYPE="text/css">
BODY
{
font-size: 1em; /*Schriftgröße*/
font-family: Arial; /*Schriftart*/
color: black; /*Schriftfarbe*/
}
</STYLE>
<script src="../skripts/WarenEinkauf.js" type="text/javascript"></script>
</head>
<body text="#000000" bgcolor="#E8FFDD" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<table border=0 cellspacing=0 cellpadding=2>
<H3>Auswahl von chinesischen Tees</H3>
<br>
<br>
<tr>
<td>
<IMG SRC="./gesBilder/gunpowder.jpg" width="150" BORDER="1" ALT="Gunpowder">
</td>
<td>
Artikelnr: 1
<br>
<b>Special Gunpowder - Temple of Heaven</b>
<br><br><br>
Dieser Tee zeichnet sich dadurch aus, dass er sehr kräftig im Geschmack ist
</td>
<td>
<FORM>
Menge Anzahl
<br>
<SELECT NAME="Selected">
<OPTION>Bitte wählen</OPTION>
<OPTION VALUE="50"> 100 Gramm 3.99 €</OPTION>
<OPTION VALUE="100">250 Gramm 8.45 €</OPTION>
<OPTION VALUE="250">500 Gramm 16.89 €</OPTION>
</SELECT>
<INPUT TYPE="TEXT" NAME="Anzahl" SIZE=1 VALUE="1">
<INPUT TYPE="IMAGE" src="../gesBilder/warenkorb.gif" VALUE="1" width="25" onClick="setProdukt(1,this.form.Selected.selectedIndex,Anzahl.value)">
</FORM>
</td>
</tr>
<tr><td><td><td></td></td></td></tr>
<tr><td><td><td></td></td></td></tr>
<tr>
<td bgcolor=#C0C0C0><img src="transpixel.gif" alt="" border="0" height="0" width="149"><br></td>
<td bgcolor=#C0C0C0><img src="transpixel.gif" alt="" border="0" height="0" width="149"><br></td>
<td bgcolor=#C0C0C0><img src="transpixel.gif" alt="" border="0" height="0" width="149"><br></td>
</tr>
<tr><td><td><td></td></td></td></tr>
<tr><td><td><td></td></td></td></tr>
<tr>
<td>
<IMG SRC="./gesBilder/sweetO.jpg" width="150" BORDER="1" ALT="SweetO">
</td>
<td>
Artikelnr: 2
<br>
<b>Sweet Osmanthus</b>
<br><br><br>
Dieser Grüntee aus der Provinz "Guanxi" ist versetzt mit Osmanthusblüten und zeichnet sich durch einen leicht süsslichen Geschmack aus
</td>
<td>
<FORM>
Menge Anzahl
<br>
<SELECT NAME="Selected">
<OPTION>Bitte wählen</OPTION>
<OPTION VALUE="50"> 100 Gramm 4.40 €</OPTION>
<OPTION VALUE="100">250 Gramm 10.80 €</OPTION>
<OPTION VALUE="250">500 Gramm 19.85 €</OPTION>
</SELECT>
<INPUT TYPE="TEXT" NAME="Anzahl" SIZE=1 VALUE="1">
<INPUT TYPE="IMAGE" src="../gesBilder/warenkorb.gif" VALUE="1" width="25" onClick="setProdukt(2,this.form.Selected.selectedIndex,Anzahl.value)">
</FORM>
</td>
</tr>
<tr><td><td><td></td></td></td></tr>
<tr><td><td><td></td></td></td></tr>
<tr>
<td bgcolor=#C0C0C0><img src="transpixel.gif" alt="" border="0" height="0" width="149"><br></td>
<td bgcolor=#C0C0C0><img src="transpixel.gif" alt="" border="0" height="0" width="149"><br></td>
<td bgcolor=#C0C0C0><img src="transpixel.gif" alt="" border="0" height="0" width="149"><br></td>
</tr>
<tr><td><td><td></td></td></td></tr>
<tr><td><td><td></td></td></td></tr>
<tr>
<td>
<IMG SRC="./gesBilder/Lung.jpg" width="150" BORDER="1" ALT="Lung">
</td>
<td>
Artikelnr: 3
<br>
<b>Lung Ching</b>
<br><br><br>
Lung Ching gilt unumstritten als der beste Grüntee in China.
</td>
<td>
<FORM>
Menge Anzahl
<br>
<SELECT NAME="Selected">
<OPTION>Bitte wählen</OPTION>
<OPTION VALUE="50"> 100 Gramm 15.99 €</OPTION>
<OPTION VALUE="100">250 Gramm 31.99 €</OPTION>
<OPTION VALUE="250">500 Gramm 62.99 €</OPTION>
</SELECT>
<INPUT TYPE="TEXT" NAME="Anzahl" SIZE=1 VALUE="1">
<INPUT TYPE="IMAGE" src="../gesBilder/warenkorb.gif" VALUE="1" width="25" onClick="setProdukt(3,this.form.Selected.selectedIndex,Anzahl.value)">
</FORM>
</td>
</tr>
</table>
<a href="kasse.html">ab zur Kasse</a><br>
</body>
</html>

Alles anzeigen

MfG

One

Marcus Gnaß · 13. Dezember 2006, 12:21

Zum einen ist die Verwendung von CSS anstelle von Graphiken für diesen Zweck sinnvoller und zum anderen erzeugt dein Code ne Menge Warnungen:

Zeile 1 Zeichen 1 - Warnung: missing <!DOCTYPE> declaration
Zeile 19 Zeichen 1 - Warnung: <h3> isn't allowed in <table> elements
Zeile 19 Zeichen 1 - Warnung: <br> isn't allowed in <table> elements
Zeile 19 Zeichen 1 - Warnung: <br> isn't allowed in <table> elements
Zeile 57 Zeichen 29 - Warnung: discarding unexpected </td>
Zeile 57 Zeichen 34 - Warnung: discarding unexpected </td>
Zeile 58 Zeichen 29 - Warnung: discarding unexpected </td>
Zeile 58 Zeichen 34 - Warnung: discarding unexpected </td>
Zeile 66 Zeichen 29 - Warnung: discarding unexpected </td>
Zeile 66 Zeichen 34 - Warnung: discarding unexpected </td>
Zeile 67 Zeichen 29 - Warnung: discarding unexpected </td>
Zeile 67 Zeichen 34 - Warnung: discarding unexpected </td>
Zeile 106 Zeichen 29 - Warnung: discarding unexpected </td>
Zeile 106 Zeichen 34 - Warnung: discarding unexpected </td>
Zeile 107 Zeichen 29 - Warnung: discarding unexpected </td>
Zeile 107 Zeichen 34 - Warnung: discarding unexpected </td>
Zeile 114 Zeichen 29 - Warnung: discarding unexpected </td>
Zeile 114 Zeichen 34 - Warnung: discarding unexpected </td>
Zeile 115 Zeichen 29 - Warnung: discarding unexpected </td>
Zeile 115 Zeichen 34 - Warnung: discarding unexpected </td>
Zeile 19 Zeichen 1 - Warnung: <table> lacks "summary" attribute
Zeile 38 Zeichen 1 - Warnung: <form> lacks "action" attribute
Zeile 49 Zeichen 1 - Warnung: <input> proprietary attribute "width"
Zeile 88 Zeichen 1 - Warnung: <form> lacks "action" attribute
Zeile 99 Zeichen 1 - Warnung: <input> proprietary attribute "width"
Zeile 133 Zeichen 1 - Warnung: <form> lacks "action" attribute
Zeile 144 Zeichen 1 - Warnung: <input> proprietary attribute "width"

0 Fehler / 27 Warnungen

One · 13. Dezember 2006, 12:23

in WebCraft gehts

Marcus Gnaß · 13. Dezember 2006, 12:24

"One" schrieb:

in WebCraft gehts

Was immer WebCraft auch ist. Der Code ist nicht valide!

One · 13. Dezember 2006, 13:04

Also WebCraft ist nen ziemlich toller HTML-Editor... Hatte bis jetzt noch nie Probleme. Auch in Darstellung nicht -.-;

Torben Brodt · 13. Dezember 2006, 20:18

ja, aber das bekommst du nieee vernünftig angezeigt.

zwischen einem <table> und einem <tr> dürfen weder <br>'s noch <h3>'s sein.
Dein Code ist also dringendst zu überarbeiten!

Klappstuhl28 · 14. Dezember 2006, 10:15

Hallo One,

schau doch mal, ob es bei deinem Editor nicht die Möglichkeit
gibt, Code W3C-konform umzustellen, bevor er exportiert
wird. WYSIWYG-Editoren generieren odt irgendein Zeugs,
was auf gewissen Browser OS - Konstellationen Ärger macht.

Nur weil es bei dir nicht falsch dargestellt wird, heißt das
nicht, dass ein Opera-Nutzer auf WIN 98 nicht mit großen
Augen vor seiner Kiste sitzt. :shock:

Lars

One · 15. Dezember 2006, 07:44

Ahso, jetzt versteh ichs besser. Werde mich um einige Änderungen kümmern

Danke

MfG

One

Tabelle optisch trennen :)

Tabelle optisch trennen :)

Quellcode

Quellcode

"One" schrieb:

Teilen

Benutzer online 1

Tags