Tabelle optisch trennen :)

  • Tabelle optisch trennen :)

    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" ^^

  • Quellcode

    1. <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">
    3. <html>
    5. <head>
    7. <style type="text/css">
    8. tr.my_row td {
    9. border-width: 0px 0px 1px 0px;
    10. border-style: solid;
    11. border-color: black;
    12. }
    13. </style>
    15. <title>Tabelle mit Trennlinien</title>
    17. </head>
    19. <body>
    21. <table cellspacing="0" summary="Tabelle mit Trennlinien">
    23. <tr class="my_row">
    24. <td>Artikelbild</td>
    25. <td>Beschreibung</td>
    26. <td>Warenkorb</td>
    27. </tr>
    29. <tr class="my_row">
    30. <td>Artikelbild</td>
    31. <td>Beschreibung</td>
    32. <td>Warenkorb</td>
    33. </tr>
    35. <tr>
    36. <td>Artikelbild</td>
    37. <td>Beschreibung</td>
    38. <td>Warenkorb</td>
    39. </tr>
    41. </table>
    43. </body>
    45. </html>
    Alles anzeigen

  • 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

    1. <html>
    2. <head>
    3. <title>Warenliste chinesische Tees</title>
    4. <meta name="author" content="">
    5. <STYLE TYPE="text/css">
    6. BODY
    7. {
    8. font-size: 1em; /*Schriftgröße*/
    9. font-family: Arial; /*Schriftart*/
    10. color: black; /*Schriftfarbe*/
    11. }
    12. </STYLE>
    14. <script src="../skripts/WarenEinkauf.js" type="text/javascript"></script>
    15. </head>
    17. <body text="#000000" bgcolor="#E8FFDD" link="#FF0000" alink="#FF0000" vlink="#FF0000">
    19. <table border=0 cellspacing=0 cellpadding=2>
    20. <H3>Auswahl von chinesischen Tees</H3>
    21. <br>
    22. <br>
    24. <tr>
    25. <td>
    26. <IMG SRC="./gesBilder/gunpowder.jpg" width="150" BORDER="1" ALT="Gunpowder">
    27. </td>
    29. <td>
    31. Artikelnr: 1
    32. <br>
    33. <b>Special Gunpowder - Temple of Heaven</b>
    34. <br><br><br>
    35. Dieser Tee zeichnet sich dadurch aus, dass er sehr kr&auml;ftig im Geschmack ist
    36. </td>
    37. <td>
    38. <FORM>
    39. Menge Anzahl
    40. <br>
    41. <SELECT NAME="Selected">
    42. <OPTION>Bitte w&auml;hlen</OPTION>
    43. <OPTION VALUE="50"> 100 Gramm 3.99 &euro;</OPTION>
    44. <OPTION VALUE="100">250 Gramm 8.45 &euro;</OPTION>
    45. <OPTION VALUE="250">500 Gramm 16.89 &euro;</OPTION>
    46. </SELECT>
    47. <INPUT TYPE="TEXT" NAME="Anzahl" SIZE=1 VALUE="1">
    49. <INPUT TYPE="IMAGE" src="../gesBilder/warenkorb.gif" VALUE="1" width="25" onClick="setProdukt(1,this.form.Selected.selectedIndex,Anzahl.value)">
    53. </FORM>
    54. </td>
    55. </tr>
    57. <tr><td><td><td></td></td></td></tr>
    58. <tr><td><td><td></td></td></td></tr>
    60. <tr>
    61. <td bgcolor=#C0C0C0><img src="transpixel.gif" alt="" border="0" height="0" width="149"><br></td>
    62. <td bgcolor=#C0C0C0><img src="transpixel.gif" alt="" border="0" height="0" width="149"><br></td>
    63. <td bgcolor=#C0C0C0><img src="transpixel.gif" alt="" border="0" height="0" width="149"><br></td>
    64. </tr>
    66. <tr><td><td><td></td></td></td></tr>
    67. <tr><td><td><td></td></td></td></tr>
    69. <tr>
    70. <td>
    72. <IMG SRC="./gesBilder/sweetO.jpg" width="150" BORDER="1" ALT="SweetO">
    75. </td>
    77. <td>
    79. Artikelnr: 2
    80. <br>
    81. <b>Sweet Osmanthus</b>
    82. <br><br><br>
    83. Dieser Gr&uuml;ntee aus der Provinz "Guanxi" ist versetzt mit Osmanthusbl&uuml;ten und zeichnet sich durch einen leicht s&uuml;sslichen Geschmack aus
    85. </td>
    87. <td>
    88. <FORM>
    89. Menge Anzahl
    90. <br>
    91. <SELECT NAME="Selected">
    92. <OPTION>Bitte w&auml;hlen</OPTION>
    93. <OPTION VALUE="50"> 100 Gramm 4.40 &euro;</OPTION>
    94. <OPTION VALUE="100">250 Gramm 10.80 &euro;</OPTION>
    95. <OPTION VALUE="250">500 Gramm 19.85 &euro;</OPTION>
    96. </SELECT>
    97. <INPUT TYPE="TEXT" NAME="Anzahl" SIZE=1 VALUE="1">
    99. <INPUT TYPE="IMAGE" src="../gesBilder/warenkorb.gif" VALUE="1" width="25" onClick="setProdukt(2,this.form.Selected.selectedIndex,Anzahl.value)">
    103. </FORM>
    104. </td>
    105. </tr>
    106. <tr><td><td><td></td></td></td></tr>
    107. <tr><td><td><td></td></td></td></tr>
    108. <tr>
    109. <td bgcolor=#C0C0C0><img src="transpixel.gif" alt="" border="0" height="0" width="149"><br></td>
    110. <td bgcolor=#C0C0C0><img src="transpixel.gif" alt="" border="0" height="0" width="149"><br></td>
    111. <td bgcolor=#C0C0C0><img src="transpixel.gif" alt="" border="0" height="0" width="149"><br></td>
    112. </tr>
    114. <tr><td><td><td></td></td></td></tr>
    115. <tr><td><td><td></td></td></td></tr>
    116. <tr>
    117. <td>
    119. <IMG SRC="./gesBilder/Lung.jpg" width="150" BORDER="1" ALT="Lung">
    122. </td>
    124. <td>
    126. Artikelnr: 3
    127. <br>
    128. <b>Lung Ching</b>
    129. <br><br><br>
    130. Lung Ching gilt unumstritten als der beste Gr&uuml;ntee in China.
    131. </td>
    132. <td>
    133. <FORM>
    134. Menge Anzahl
    135. <br>
    136. <SELECT NAME="Selected">
    137. <OPTION>Bitte w&auml;hlen</OPTION>
    138. <OPTION VALUE="50"> 100 Gramm 15.99 &euro;</OPTION>
    139. <OPTION VALUE="100">250 Gramm 31.99 &euro;</OPTION>
    140. <OPTION VALUE="250">500 Gramm 62.99 &euro;</OPTION>
    141. </SELECT>
    142. <INPUT TYPE="TEXT" NAME="Anzahl" SIZE=1 VALUE="1">
    144. <INPUT TYPE="IMAGE" src="../gesBilder/warenkorb.gif" VALUE="1" width="25" onClick="setProdukt(3,this.form.Selected.selectedIndex,Anzahl.value)">
    148. </FORM>
    149. </td>
    150. </tr>
    152. </table>
    157. <a href="kasse.html">ab zur Kasse</a><br>
    159. </body>
    160. </html>
    Alles anzeigen


    MfG

    One ^^

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von One ()

  • 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

  • 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