Kleine Tabellen-Frage

CSS, Java Script u.s.w

Moderator: HTML-Laie

Antworten
Benutzeravatar
npage-user
Webmaster Alt Meister
Webmaster Alt Meister
Beiträge: 1277
Registriert: Sa 19. Feb 2011, 08:53
Mein Vorname: Michael
Wohnort: Haßloch (Rheinland-Pfalz)
Kontaktdaten:

Kleine Tabellen-Frage

Beitrag von 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 ...

Bild

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>
Benutzeravatar
Jasko
Globaler Moderator
Globaler Moderator
Beiträge: 3277
Registriert: Di 21. Feb 2012, 06:59
Mein Vorname: Herr Jasmin ;)
Wohnort: Rheinland-Pfalz
Kontaktdaten:

Re: Kleine Tabellen-Frage

Beitrag von Jasko »

Du kannst das ganze im CSS so gestallten:

Code: Alles auswählen

td {
	border-bottom: 1px dashed green;
}
MfG
Benutzeravatar
npage-user
Webmaster Alt Meister
Webmaster Alt Meister
Beiträge: 1277
Registriert: Sa 19. Feb 2011, 08:53
Mein Vorname: Michael
Wohnort: Haßloch (Rheinland-Pfalz)
Kontaktdaten:

Re: Kleine Tabellen-Frage

Beitrag von 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! ;)
Benutzeravatar
Jasko
Globaler Moderator
Globaler Moderator
Beiträge: 3277
Registriert: Di 21. Feb 2012, 06:59
Mein Vorname: Herr Jasmin ;)
Wohnort: Rheinland-Pfalz
Kontaktdaten:

Re: Kleine Tabellen-Frage

Beitrag von 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
Antworten

Zurück zu „Fragen zu HTML & Programmiersprachen“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 11 Gäste