nicht angemeldet
Tabellen mit CSS formatieren
Guten Morgen,
ich versuche gerade eine Tabelle mit CSS zu formatieren. Nach meinen Informationen ist das CLASS-Attribut auch im COL-Tag erlaubt, demnach sollte bei dem folgenden Code die rechte Spalte rechtsbündig ausgerichtet sein, und einen linken Rahmen sowie einen gelben Hintergrund haben.
TABELLE.CSS
body {
Color: #000000;
Background-Color: #efefef;
margin: 0em;
padding: 0em;
font-size: 101%;
Font-Family: Verdana, Arial, Helvetica;
Font-Variant: normal;
Font-Weight: normal;
Font-Style: normal;
Line-Height: normal;
}
col {
display: table-column;
}
.rot {
background-color: #ff0000;
padding: 1em;
}
.gelb {
background-color: #ffff00;
text-align: right;
padding: 1em;
border: 2px solid black;
}
TABELLE.HTM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="GENERATOR" content="PPWIZARD version 04.051 on WIN98, FREE tool for Windows, OS/2, DOS and UNIX by Dennis Bareis (http://www.labyrinth.net.au/~dbareis/ppwizard.htm)">
<title>Pecunia non olet</title>
<link rel="stylesheet" href="../formate/tabelle.css" type="text/css" />
</head>
<body>
<p> </p>
<table border="0" width="80%" cellspacing="0" cellpadding="0">
<colgroup>
<col class="rot" />
<col class="gelb" />
</colgroup>
<tr>
<td>Erste Spalte</td>
<td>Zweite Spalte</td>
</tr>
</table>
</body>
</html>
Das ist leider nicht der Fall, wie Ihr hier sehen könnt.
http://www.jho64.de/pecunia/test/tabelle.htm
Kann mir jemand erklären wie es funktioniert?
Vielen Dank und einen schönen Sonntag
Josh
P.S.: An alle fußballbegeisterten Griechen - Viel Glück! ;-))
-
Hallo,
ich versuche gerade eine Tabelle mit CSS zu formatieren. Nach meinen Informationen ist das CLASS-Attribut auch im COL-Tag erlaubt, demnach sollte bei dem folgenden Code die rechte Spalte rechtsbündig ausgerichtet sein, und einen linken Rahmen sowie einen gelben Hintergrund haben.
col {
display: table-column;
}Was soll mit dem Setzen dieser Eigenschaft erreicht werden?
Der IE interpretiert, bis auf den Rahmen, alle CSS-Eigenschaften, die Du verwenden willst, auch für COL-Elemente. Gecko-Browser haben hier einen Bug. Der Rahmen allerdings, kann nicht interpretiert werden, weil dieser _keine_ Eigenschaft der Spalte, sondern eine der Zelle ist.
Für Gecko-Broser und den neuen Opera kannst Du folgende CSS-Selectoren verwenden:
tr>td {
background-color: #ff0000;
padding: 1em;
}tr>td+td {
background-color: #ffff00;
text-align: right;
padding: 1em;
border: 2px solid black;
}Diese sprechen dann wirklich die Zellen an, so dass auch der Rahmen funktioniert. Der IE kann das allerdings wieder nicht, weil er CSS2 nicht vollständig implementiert hat. Du musst also die COL-Formatierung für den IE stehen lassen und bei ihm auf den Rahmen verzichten oder diesen per Klasse im TD-Element setzen.
Das Thema hatten wir hier auch schon einmal http://forum.de.selfhtml.org/archiv/2003/11/62591/#m354209.
viele Grüße
Axel
-
Hi,
col {
display: table-column;
}
.rot {
background-color: #ff0000;
padding: 1em;
}
.gelb {
background-color: #ffff00;
text-align: right;
padding: 1em;
border: 2px solid black;
}Setz für die Tabelle noch border-collapse:collapse, dann könnte es ggf. mit dem Rahmen klappen.
Aber so richtig wird col/colgroup meines Wissens eh nicht unterstützt (was z.B. das Weitergeben des padding und text-align angeht)In Deinem Fall könnte aber zumindest für moderne Browser auch folgendes helfen:
tr :first-child
{
background-color: #ff0000;
padding: 1em;
}tr :first-child+*
{
background-color: #ffff00;
text-align: right;
padding: 1em;
border: 2px solid black;
}Ein Problem dürfte der IE sein...
cu,
Andreas--
MudGuard? Siehe http://www.Mud-Guard.de/
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.-
Hi,
Aber so richtig wird col/colgroup meines Wissens eh nicht unterstützt (was z.B. das Weitergeben des padding und text-align angeht)
OK, das ziehe ich nach Vinzenz Posting zurück ;-)
cu,
Andreas--
MudGuard? Siehe http://www.Mud-Guard.de/
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
-
Hallo Josh,
Guten Morgen,
ich versuche gerade eine Tabelle mit CSS zu formatieren. Nach meinen Informationen ist das CLASS-Attribut auch im COL-Tag erlaubt, demnach sollte bei dem folgenden Code die rechte Spalte rechtsbündig ausgerichtet sein, und einen linken Rahmen sowie einen gelben Hintergrund haben.
http://www.w3.org/TR/CSS21/tables.html#q4 ist eine hilfreiche Lektüre, ich zitiere auf eine Auflistung verkürzt:
<zitat>
The following properties apply to column and column-group elements:'border'
'background'
'width'
'visibility'
</zitat>Daraus folgt:
rechte Spalte
- rechtsbündig ausrichten geht nicht mit col
- linker (eher dicker) Rahmen geht mit col
beachte hier dass
table { border-collapse: collapse; }
erforderlich ist.
- Hintergrund sollte mit col gehen, beachte auch
http://www.w3.org/TR/CSS21/tables.html#table-layers
hat bei mir Firefox nicht so interpretiert.Das ist leider nicht der Fall, wie Ihr hier sehen könnt.
http://www.jho64.de/pecunia/test/tabelle.htmTipp: Links kannst Du hier mit [ link: http://www.jho64.de/pecunia/test/tabelle.htm ]
setzen, Leerzeichen dabei weglassen.Kann mir jemand erklären wie es funktioniert?
table {
border-collapse: collapse;
}einfügen
Um den Text in der rechten Spalte rechtsbündig auszurichten, kannst Du eine td-Klasse erstellen. In die habe ich noch die Hintergrundfarbe integriert, da meine Browser die Hintergrundfarbe einer Spalte nicht dargestellt haben :-(
Freundliche Grüsse,
Vinzenz