Tabelle nur mit einem Rand außen

retnüg

Hallo,
ich will eine Tabelle gestalten, bei der aber nur außen ein Rand sein soll, die Zellen uind Zeilen jedoch nicht. Wie lautet der Html code (oder auch css-code)?

threadi

HTML

<table style="border: 1px solid #000000;"></table>

Quelle (über Google-Suche gefunden):
http://www.html.de/threads/nur-aussenrahmen-anzeigen.24209/

retnüg

Zitat von threadi
HTML
<table style="border: 1px solid #000000;"></table>
Quelle (über Google-Suche gefunden):
http://www.html.de/threads/nur-aussenrahmen-anzeigen.24209/

Hat bei mir leider nicht funktioniert.

threadi

Zeig einen Link zu deiner Seite, dann kann dir evtl. geholfen werden.

retnüg

Zitat von threadi

Zeig einen Link zu deiner Seite, dann kann dir evtl. geholfen werden.

http://www.guenter-leipfinger.de/photoalben/photoalben.html

threadi

Lass die HTML-Attribute bei der Tabelle weg. Gestaltung macht man mit CSS, nicht mit HTML. Dann kannst Du im CSS ergänzen:

Code

table { border: 1px solid #000; }
td { border: 0; }

retnüg

Kannst Du mir das bitte etwas genauer erklären, mit CSS habe ich keine Erfahrung. Muß da denn nicht ein Verweis auif CSS ins script?

threadi

Siehe: http://de.selfhtml.org/css/formate/einbinden.htm

retnüg

sorry, ich blicke immer noch nicht durch. Meinst Du etwa so?
Soll ich folgende Zeilen in das html-script einbinden?

Zitat

</style><link rel="stylesheet" type="text/css" href="formate.css">
<style type="text/css">
...
</style>

threadi

HTML

<link rel="stylesheet" type="text/css" href="formate.css">

reicht völlig aus - siehe Link oben und die vielen anderen Beispiele dazu im Netz.

retnüg

Vielen Dank für die Mühe. Aber ich denke, ich muß mich erst in die Materie des CSS besser einarbeiten.

djheke

Zitat von retnüg

Vielen Dank für die Mühe. Aber ich denke, ich muß mich erst in die Materie des CSS besser einarbeiten.

Wichtiger ist glaube ich HTML und dann CSS. Hier mal eine Beispiel deiner Seite.

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Meine Fotoalben</title>
<style type="text/css">


* {
 margin:0;
 padding:0;
 outline:none;
 list-style:none;
 text-decoration: none;
}


h1 a {
 color:#000;
 font-size:210%;
 font-weight:bold;
 text-decoration:underline;
}


h2 {
 font-size:large;
 margin-top:50px;
}
a:hover, a:focus {
 color: #F90;
}


body {
 background-color: #CDC1C5;
 font:100% Arial sans-serif;
}


#wrapper {
 margin:10px auto;
 width:60%;
 text-align:center;
}


ul {
 width:50%;
 margin:10px auto;
 border-bottom:1px solid #000;


}
 
li a {
 display:block;
 padding:20px;
 font-size:2em;
 font-weight:bold;
 border-left:1px solid #000;
 border-right:1px solid #000;
 background:#BCA9F5;
}






li h3 {
 margin-top:50px;
 border-bottom:1px solid #000;
}
</style>
</head>


<body>
<div id="wrapper">
  <h1><a href="http://www.guenter-leipfinger.de/photoalben/photoalben.html">Photoalben</a></h1>   
  <h2>Hier finden Sie jeweils aktuelle Photoalben</h2>


  <ul>
    <li><h3>Im Augenblick:</h3></li>
    <li><a href="http://www.guenter-leipfinger.de/photoalben/Herbst/album/index.html">Herbst</a></li>
    <li><a href="http://www.guenter-leipfinger.de/photoalben/Pilze/album/index.html">Pilze</a></li>
    <li><a href="http://www.guenter-leipfinger.de/photoalben/Nebel/album/index.html">Nebel</a></li>
    <li><a href="http://www.guenter-leipfinger.de/photoalben/orchideen/album/index.html">Orchideen</a></li>
  </ul>   
</div>
</body></html>

Alles anzeigen

Kopieren und Testen.

retnüg

Danke, nicht schlecht, nur wie bekomme ich den Rand dicker?
edit:
ist schon gelöst.

Nur der Abstand nach 'im Augenblick' ist mir zu klein. <p> zeigt seltsamerweise keine Wirkung.
habe ich nun auch gelöst mit '
<p style="line-height: 150%">.....</p>

djheke

Wozu hast du noch ein P-Element eingeführt? So hätte es doch gereicht.
li h3 {
margin-top:50px;
padding-bottom:0.75em; /* oder 12px */
border-bottom:1px solid #000;
}

retnüg

So wie Du es schreibst, weiß ich nicht genau, wie ich es ändern soll. Bitte schreibe mir
a)was ersetzt werden soll
b)durch welchen code

ich bin kein Fachmann; den code, den ich eingesetzt habe, fand ich im web.

Tags