Kleine Tabellen-Frage

[npage-user]

Hallo mal wieder alle zusammen!

Da man ja immer mal wieder was besser machen möchte, will ich momentan unter anderem die Kurz-Info-Tabellen überarbeiten. Jetzt will ich aber zur besseren Übersichtlichkeit zwischen den einzelnen Zeilen so eine ganz fein gestrichelte Linie machen, weiß aber nicht, wie das geht, weil wenn ich für <tr> oder <td> diese Angaben mache, dann habe ich am Ende eine fast komplett gestrichelte Tabelle. Ich will das aber so haben ...



Weiß jemand wie das geht, dass das wirklich nur, ja man könnte eigentlich "unterstrichen" sagen, wobei es ja nicht direkt am Text kleben soll, sondern halt so wie im Bild.

Zur Orientierung hier noch der aktuelle Quellcode der Kurz-Info-Tabelle.

Code: Alles auswählen

<h3>Kurz-Info</h3>
<table width="680" cellspacing="1" cellpadding="1" border="0">
<tbody>
<tr>
<td width="173"><b>Art</b></td>
<td width="495">Wasser-Stuntshow</td>
</tr>
<tr>
<td width="173"><b>Jahr</b></td>
<td width="495">2013</td>
</tr>
<tr>
<td width="173"><b>Dauer</b></td>
<td width="495">ca.  30  Minuten</td>
</tr>
<tr>
<td width="173"><b>Ort</b></td>
  <td width="495"><a href="aquastadion-holiday-park-see.html">Aquastadion</a></td>
</tr>
<tr>
<td width="173"><b>Themenbereich</b></td>
  <td width="495"><a href="tb-maritimerthemenbereich.html">Maritimer  Themenbereich</a></td>
</tr>
</tbody>
</table>

[Jasko]

Du kannst das ganze im CSS so gestallten:

Code: Alles auswählen

td {
	border-bottom: 1px dashed green;
}

MfG

[npage-user]

Danke, Jasko!

Ich musste das aber in den HTML-Code als style-Tag reinmachen, denn wenn ich das in den CSS-Teil mache, gilt das für alle Tabellen auf der gesamten Seite und das soll ja nicht sein. Aber ich hab's hingekriegt!

[Jasko]

Man kann das ganze mit einer Klasse verbinden, so kann man den Code in der CSS Datei lassen und hat später einen einfacharen Code zu schreiben da dieser ja ewentuell wiederholt werden wird, vor allem in einer Tabelle, muss man das ganze dan sicher mehr mals rein machen. Mit der Klasse sieht der Code so aus:

In der CSS:

Code: Alles auswählen

table.kurz-info td {
	border-bottom: 1px dashed green;
}

Im HTML:

Code: Alles auswählen

<table width="680" cellspacing="1" cellpadding="1" border="0" class="kurz-info">
    <tbody>
    <tr>
    <td width="173"><b>Art</b></td>
    <td width="495">Wasser-Stuntshow</td>
    </tr>
    <tr>
    <td width="173"><b>Jahr</b></td>
    <td width="495">2013</td>
    </tr>
    <tr>
    <td width="173"><b>Dauer</b></td>
    <td width="495">ca.  30  Minuten</td>
    </tr>
    <tr>
    <td width="173"><b>Ort</b></td>
      <td width="495"><a href="aquastadion-holiday-park-see.html">Aquastadion</a></td>
    </tr>
    <tr>
    <td width="173"><b>Themenbereich</b></td>
      <td width="495"><a href="tb-maritimerthemenbereich.html">Maritimer  Themenbereich</a></td>
    </tr>
    </tbody>
    </table>

So bekommen nur die Tabellen die mit der Klasse kurz-info markiert sind die Strichal, und man kann leichter und schneller Programmieren, den es ist einfacher sich an den selbst bestimmten Namen der Klasse zu errinern und nur einmal zu schreiben als jedes mal die Wurst an Code für den Border in jeden td-Tag zu schreiben.

MfG