Tabellenrand in CSS?

  • Themenstarter Themenstarter GreenThunder
  • Beginndatum Beginndatum
Status
Nicht offen für weitere Antworten.
G

GreenThunder

Hallo,

ich muss für die BS eine Website bauen, in der alle Formatangaben über CSS gemacht werden.
Nun will ich auch einen Rand um meine Tabellen haben. Dies habe ich in HTML folgendermaßen gemacht:

<table border="1" bordercolor="#00005F">
Zum Vergrößern anklicken....

Gibts ein Möglichkeit das in CSS zu erreichen? Hab bisher nix gefunden, was ähnlich aussah.

Danke im vorraus.
 
Ja, das hab ich auch gefunden, aber die Rahmen, die ich möchte ist nicht dabei!
 
Ok, ich hab mal eine Beispielseite hochgeladen:

http://www.fanclub-phoenix2001.de/tutorials/inhalt.html

Ich möchte also diesen Doppelrahmen, so wie er hier zu sehen ist.

HTML-Code:
<html>
<head>
<title>inhalt</title>
<link rel="stylesheet" href="format.css" type="text/css">
</head>
<body></body>

<table border="1" bordercolor="#00005F">
<tr><td class="ueberschrift">Warum diese Seite?</td></tr>
<tr>
<td class="text"><p >TESTTEXT</p>
</td>
</tr>
</table>

</body>
</html>
Zum Vergrößern anklicken....

CSS-Code:
body {
background-color:#FFFFFF;
margin-top:10;
margin-left:5;
font-size:10pt;
font-family: ARIAL,HELVETICA;
color:#0000FF;
}

td {
font-size:10pt;
font-family: ARIAL,HELVETICA;
color:#0000FF;
}

.ueberschrift {
font-size:10pt;
font-weight:bold;
font-family: ARIAL,HELVETICA;
text-align:center;
background-color:#00C0FF;
margin-bottom:0pt
}

.text {
font-size:10pt;
font-family: ARIAL,HELVETICA;
color:#0000FF;
padding:10pt;
text-align: justify;
}
Zum Vergrößern anklicken....
 
Hi,
du mußt den Tabellenrahmen im CSS Code mit angeben.

CSS- Code
PHP: 
body {
background-color:#FFFFFF;
margin-top:10;
margin-left:5;
font-size:10pt;
font-family: ARIAL,HELVETICA;
color:#0000FF;
}

table {
border-color: #00005F;
border-style: solid;
border-width: 1px;
}

td {
border-color: #00005F;
border-style: solid;
border-width: 1px;
font-size:10pt;
font-family: ARIAL,HELVETICA;
color:#0000FF;
}

.ueberschrift {
font-size:10pt;
font-weight:bold;
font-family: ARIAL,HELVETICA;
text-align:center;
background-color:#00C0FF;
margin-bottom:0pt
}

.text {
font-size:10pt;
font-family: ARIAL,HELVETICA;
color:#0000FF;
padding:10pt;
text-align: justify;
}

HTML- Code
PHP: 
<html>
<head>
<title>inhalt</title>
<link rel="stylesheet" href="format.css" type="text/css">
</head>
<body></body>

<table >
<tr><td class="ueberschrift">Warum diese Seite?</td></tr>
<tr>
<td class="text"><p >TESTTEXT</p>
</td>
</tr>
</table>

</body>
</html>

gruss xollo
 
Womit wir bei dem Problem wären, dass ein CSS border:1px solid #farbe (ich habe das jetzt mal in dem Sammel Attribut zusammengefasst) nicht das gleiche ist wie ein HTML border=1.

Während du bei HTML um jede Zelle einen Rahmen hast, sorgt das CSS Border lediglich dafür, dass das gesamte Element, in diesem Falle die Tabelle, weil in <table> positioniert, mit einer 1px dicken Linie umgeben wird.

Die HTML border=1 Linie ist aber weder nur 1px dick, noch nur aussen um die Tabelle herum.

Somit möchte ich behaupten, dass eine adequate 1 zu 1 Darstellung der HTML Border mit CSS nicht zu realisieren ist.

//edit: ich stelle gerade fest, dass mein Vorredner doch schon die Idee mit dem border für table und td aufgegriffen hatte, da bei ihm jedoch der Aspekt des paddings im table-tag fehlt, der für den Abstand zwischen äusserer und innere border sorgt, lasse ich die folgende Ausführung als Ergänzung trotzdem mal online

Wenn du allerdings an einer nicht-adequaten, schweinemäßig aufwendingen Lösung interessiert bist, dann spiele mal mit folgendem Gedanken.
Code: 
<table style="width:200px; height:100px; padding:3px; border:1px solid #000000;">
<tr>
    <td style="border:1px solid #000000;">&nbsp;</td>
</tr>
<tr>
    <td style="border:1px solid #000000;">&nbsp;</td>
</tr>
</table>
Jetzt musst du nur noch für den tollen "3D Effekt" der oberen und linken Border eine andere Farbe geben als der rechten und unteren. Das lässt sich dann über Klassen machen und tja ... dann hätten wir das Problem gelöst, aber wenn ich scharf auf HTML-Border-lookalike Rahmen bin, dann mache ich halt einfach border="1" in den Table Tag und frimmel mir da nicht 'nen Wolf in CSS.
 
Tim Comanns hat gesagt.:
... aber wenn ich scharf auf HTML-Border-lookalike Rahmen bin, dann mache ich halt einfach border="1" in den Table Tag und frimmel mir da nicht 'nen Wolf in CSS.
Zum Vergrößern anklicken....

Ja, so sehe ich das auch, aber mein Lehrer in der Berufsschule will halt ALLE Formatangaben im CSS haben. :mad:


*edit*
@ Xollo

Danke, das hat mir geholfen! Es stellt mich nun zwar an andere Stelle vor Probleme, aber ich krieg das sicher schon hin ;-)
 
Zuletzt bearbeitet von einem Moderator:
Original geschrieben von GreenThunder
Ja, so sehe ich das auch, aber mein Lehrer in der Berufsschule will halt ALLE Formatangaben im CSS haben. :mad:
Zum Vergrößern anklicken....
Dann schau dir doch mal meine längere Ausführung und die von xollo an. So sollte es eigentlich zu lösen sein.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück