nicht angemeldet
Tabelle
hi,
wie kann man mit CSS einen farbigen Rahmen um eine Tabelle legen und auch waagrechte Tabellenlinien einblenden aber keine vertikalen Linien?
Hab in selfhtml nachgesehn habe aber irgendwie nicht das passende gefunden :((
Thorsten
-
Hi Thorsten,
entweder findest du hier: http://selfhtml.teamone.de/css/eigenschaften/rahmen.htm#border alles was dein Herz begehrt (zumindest bzgl. dieser Problematik...), oder ich verstehe dich völlig miss.
Gruss,
Daniel-
Hi Thorsten,
entweder findest du hier: http://selfhtml.teamone.de/css/eigenschaften/rahmen.htm#border alles was dein Herz begehrt (zumindest bzgl. dieser Problematik...), oder ich verstehe dich völlig miss.
Gruss,
Danielja damit komme ich doch nicht klar.
Ein einfaches Bsp wäre gut. Danke.-
Hallo,
entweder findest du hier: http://selfhtml.teamone.de/css/eigenschaften/rahmen.htm#border alles was dein Herz begehrt (zumindest bzgl. dieser Problematik...), oder ich verstehe dich völlig miss.
ja damit komme ich doch nicht klar.
Ein einfaches Bsp wäre gut. Danke.Gehen wir von einer HTML-Tabelle aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Tabellen mit HTML</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<h1>Die Standard-Tabelle mit HTML</h1>
<table border="1" width="400" cellpadding="5" cellspacing="5">
<colgroup>
<col width="150">
<col width="150">
<col width="100">
</colgroup>
<tr>
<th>Name</th>
<th>Vorname</th>
<th>Betrag in EUR</th>
</tr>
<tr>
<td>Maier</td>
<td>Klaus</td>
<td align="right">2.500,00</td>
</tr>
<tr>
<td>Schulze</td>
<td>Marion</td>
<td align="right">240,00</td>
</tr>
</table>
</body>
</html>und versuchen diese genau deckungsgleich mit CSS zu formatieren, dann tritt zunächst das Problem auf, dass mit dem Attribut cellpadding eigentlich das Padding der TD- bzw. TH-Elemente beeinflusst wird. Diese Angabe muss also im CSS für diese Elemente gesetzt werden. Außerdem haben wir das Problem, dass der IE mit der CSS-Angabe für cellspacing (border-spacing http://selfhtml.teamone.de/css/eigenschaften/tabellen.htm#border_spacing) nichts anfangen kann. Wir bekommen die Deckungsgleichheit also nur für bestimmte Browser hin:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Tabellen mit CSS</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
table {width:400px; border:1px outset black; border-spacing:5px; border-collapse:separate;}
th, td {border:1px inset black; padding:5px;}
#col1, #col2 {width:150px;}
#col3 {width:100px;}
td.number {text-align:right;}
-->
</style>
</head>
<body>
<h1>Die Standard-Tabelle mit CSS</h1>
<table>
<colgroup>
<col id="col1">
<col id="col2">
<col id="col3">
</colgroup>
<tr>
<th>Name</th>
<th>Vorname</th>
<th>Betrag in EUR</th>
</tr>
<tr>
<td>Maier</td>
<td>Klaus</td>
<td class="number">2.500,00</td>
</tr>
<tr>
<td>Schulze</td>
<td>Marion</td>
<td class="number">240,00</td>
</tr>
</table>
</body>
</html>Allerdings wird es häufig die Aufgabe sein, das cellspacing ganz abzuschalten. Das wiederum kann auch der IE mit der entsprechenden Angabe von border-collapse http://selfhtml.teamone.de/css/eigenschaften/tabellen.htm#border_collapse im CSS.
HTML-Code wie oben nur:
<style type="text/css">
<!--
table {width:400px; border:1px solid black; border-spacing:0; border-collapse:collapse;}
th, td {border:1px solid black; padding:5px;}
#col1, #col2 {width:150px;}
#col3 {width:100px;}
td.number {text-align:right;}
-->
</style>Wenn man nun noch weiß, dass der Rahmen für das gesamte TABLE-Element und für die TD- bzw. TH-Elemente, getrennt in obere, rechte, untere und linke Rahmenlinie in unterschiedlichen Strichstärken, -farben und -stilen festgelegt werden kann http://selfhtml.teamone.de/css/eigenschaften/rahmen.htm#border, dann sind der Kreativität doch fast keine Grenzen mehr gesetzt ;-))
viele Grüße
Axel
-
-
-
Hallo!
wie kann man mit CSS einen farbigen Rahmen um eine Tabelle legen und auch waagrechte Tabellenlinien einblenden aber keine vertikalen Linien?
Betreffend der Farben kannst Du mit Border (top/left/right/bottom) richtig Leonardo sein (zb. border-bottom:1px #003366 solid).
Betreffend Tabellenlinien kannst Du ebenfalls die Borders verwenden (zb. border-bottom:none).
Klassen für verschiedene Zelleabschnitte sind mitunter hilfreich.Beste Grüße
Viennamade