# Tabellenecken abrunden?!



## iLu_is_a_loser (20. Mai 2005)

Hallo kann man mit HTML oder wenn möglich auch mit CSS die Ecken einer Tabelle abrunden? So das ein kleiner Radius in den Ecken is....

 Oder kann man das anhand von Grafiken realiesieren, wenn ja bitte wie?

 greetz iLu


----------



## versuch13 (20. Mai 2005)

Hi,

 hier mal ein Link um das ganze ohne Grafiken zu realisieren. Habe es mir selbst noch nicht angesehen, daher keine Erklärung. 

http://www.stunicholls.myby.co.uk/boxes/snazzy.html


 gruß


----------



## iLu_is_a_loser (20. Mai 2005)

ja erstmal danke...

 bloß dieses "Tutorial" hat mir ned richtig geholfen...hat jemadn vielleicht sowas auch in deutsch (oder anders erklärt) oder kann mir das auch jemand so sagen?


 gruß


----------



## aTa (20. Mai 2005)

Schau dir halt den Quellcode an!
Ansonsten machst du es halt mir Grafiken und in jede Ecke eben eine Grafik rein.


----------



## iLu_is_a_loser (21. Mai 2005)

Aus dem Quellcode kann ich nichts entnehmen... ich wollt wohl gern irgendwie ne kleine Erklärung dazu...

 Und mit Graiken wollt ich das nicht machen wnen es auch so geht....

 gruß


----------



## versuch13 (21. Mai 2005)

hey,

  also, ich habe mir das jetzt mal angesehen und dir ein wenig auseinander genommen.
  Hier mal der Code:


```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
 <head>
 <style type="text/css">
 
 #xsnazzy p {margin:0 10px; letter-spacing:1px;}
 #xsnazzy {background: transparent;}
 
 .xtop, .xbottom {display:block; background:transparent; font-size:1px;}
  .xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
  .xb1, .xb2, .xb3 {height:1px;}
  .xb2, .xb3, .xb4 {background:#eca; border-left:1px solid #fff; border-right:1px solid #fff;}
  .xb1 {margin:0 5px; background:#fff;}
  .xb2 {margin:0 3px; border-width:0 2px;}
  .xb3 {margin:0 2px;}
  .xb4 {height:2px; margin:0 1px;}
  
 .xboxcontent {display:block;  background:#eca; border:0 solid #fff; border-width:0 1px;}
 
 #info {background:#ddd; padding:2em;}
 
 </style>
 </head>
 
 <body>
 
 
 <div id="info">
 
 
 <div id="xsnazzy">
 
<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
 
 <div class="xboxcontent">
 
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
   euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
   ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
   ut aliquip ex ea commodo consequat.</p>
 
 </div>
 
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
 
 </div>
 
  </div>
 
 
 
 </body>
 </html>
```
 
 Ich denke die Rot markierten Bereiche sind das auschlaggebende.
 Aber ehrlich gesagt so richtig durchgestiegen wie das jetzt funktioniert bin ich grad auch noch nicht, hab jetzt auch nicht viel Zeit.


 gruß


----------

