HTML:CSS wie cellspacing, border, bordercolor:?

Status
Nicht offen für weitere Antworten.
A

Alexander Klein

Grünschnabel
Hallo, ich habe schon hier rumgesucht, auch unter Selfhtml, aber irgendwie keine passende Lösung zu meinem Problem finden können.

Ich möchte gern mein Tabellenlayout in HTML in CSS definieren.
In HTML sieht die Sache so aus:

Code: 
<!-- MUSTERLAYOUT -->

<html>
<head>
<title>Tabelle 1</title>
</head>

<body bgcolor="#FFD700">
<font face="Arial">

<table bgcolor="#FFFFFF" align="center" cellspacing=0 border=1 bordercolor="#FF0000">
<tr>
<th>Zeile1</th>
<td>Wert1</td>
<td>Wert2</td>
</tr>

<tr>
<th>Zeile2</th>
<td>Wert1</td>
<td>Wert2</td>
</tr>
</table>

</font>
</body>
</html>

Vgl. dazu gehörigen Anhang (so sollte es auch MIT Stylesheet aussehen!)...
Nun habe ich zum Testen, das Stylesheet in eine andere Seite eingebunden:

Code: 
<!-- IRGENDEINE ANDERE DATEI -->
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.txt"> <! enthält MUSTERLAYOUT -->
<title>Tabelle2</title>
</head>

<body>
<table align="center">
<tr>
<th>Zeile1</th>
<td>Wert1</td>
<td>Wert2</td>
</tr>

<tr>
<th>Zeile2</th>
<td>Wert1</td>
<td>Wert2</td>
</tr>
</table>

</body>
</html>

Das Stylesheet dazu sieht so aus:

Code: 
/* MUSTERLAYOUT */

body
{
background:#FFD700;
font-family:Arial;
font-size:12pt;
}

table
{
background:#FFFFFF;
border-color:#FF0000;
border-width:2px;
border-style:solid;
margin:0;
}

Ich habe schon etliches versucht, komme jedoch auf keinen grünen Zweig.
Das einzige Problem besteht darin, wie ich


HTML
Code: 
<table bgcolor="#FFFFFF" align="center" cellspacing=0 border=1 bordercolor="#FF0000">
in CSS "umwandeln" kann; bgcolor und bordercolor scheinen auch im Stylesheet schon zu funktionieren (vgl. dazu Grafik im nachfolgenden Beitrag "So sieht's mit CSS aus"), doch die Linien werden nicht wie gewünscht dargestellt.

Ich habe nicht allzuviel Erfahrung mit CSS (hatte nur so ein Einsteigerseminar, da lernt man so was aber nicht in 2 Tagen), doch meines Erachtens wäre es nicht im Sinne von CSS, dass man nun jedes <tr>-Element der Tabelle den Rahmen seperat zuweisen muss, oder?

Vielen Dank für eure schnelle Hilfe und verzeiht meine Ausschweifungen. Habe vorsichtshalber alles an Code dazugepackt, damit später keine Fragen nach Code etc. auftauchen und ihr so schneller mein Problem lösen könnt!

Alexander
 

Anhänge

  • tab1.jpg
    tab1.jpg
    7,4 KB · Aufrufe: 161
"So sieht's mit CSS aus"

Hier ist die versprochene Grafik der Seite mit eingebundenem CSS.

Gruß
Alexander
 

Anhänge

  • tab2.jpg
    tab2.jpg
    6,9 KB · Aufrufe: 157
Hallo Alexander,

wenn Du jetz in Deinem StyleSheet noch die Werte für tr und td definierst, sollte es funktionieren.

also:
tr
{
border-width:2px;
border-color:#FF0000;
border-style:solid;
}

und für td das selbe, nur um auf Nummer sicher zu gehn.
 
Hi,

TR's können schon mit CSS formatiert werden, aber eben nur Eigenschaften wie
zum Beispiel die Höhe (Sollte sogar über CSS festgelegt werden!).
Rahmeneigenschaften werden jedoch über TABLE und TD definiert.
Code: 
  TABLE.rahmen{ border-width: 2px 0px 0px 2px;
                border-color: #FF0000;
                border-style: solid;
                border-spacing: 0px;
                border-collapse: collapse;}

  TABLE.rahmen TD{ border-width: 0px 2px 2px 0px;
                	 border-color: #FF0000;
                	 border-style: solid;}
Zunächst wird links und oben um die gesamte Tabelle ein Rahmen gesetzt. Die einzelnen
Zellen bekommen den Rahmen rechts und unten. Damit ist ein einheitlicher Rahmen
gewährleistet.
Die Eigenschaften border-spacing und border-collapse sind mit cellspacing
und cellpadding gleichzusetzen. Es handelt sich hierbei jedoch um CSS2
und wird somit von Browsern der älteren Generation (z.B. IE4) noch nicht richtig
interpretiert.

Das CSS bindest Du wie folgt ein:
Code: 
<table class="rahmen">
  <tr><td> ... </td></tr>
</table>
Ciao
Quaese
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück