Wed, 2004-11-10 15:26
I am trying to create a table with rounded cellcorners. It is possible to do this with html only but this creates an enormous amount of code. Therefore I would like to use css and a very simple html table.
This is the code I have created so far:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Rounded Corner Test Using CSS</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.header {
font-weight: bold;
color: #FFFFFF;
background-color: #666666;
background-image: url(dot_br.gif);
background-position: left top;
background-repeat: no-repeat;
}
.light {
background-color: #CCCCCC;
background-image: url(dot_br.gif);
background-position: left top;
background-repeat: no-repeat;
}
.dark {
background-color: #999999;
background-image: url(dot_br.gif);
background-position: left top;
background-repeat: no-repeat;
}
.rounded {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
}
-->
</style>
</head>
<body>
<table width="75%" border="0" cellspacing="1" cellpadding="3" class="rounded">
<tr class="header">
<td colspan="3">Title</td>
</tr>
<tr class="light">
<td>Text</td>
<td>More text </td>
<td>Contents</td>
</tr>
<tr class="dark">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="light">
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
And this is the result:
As you can see, using the css background property I can only place a pixel in one cellcorner at the time and I need to have them in all corners.
Does anybody have an idea how to do this without making the html code too complicated?
Wed, 2004-11-10 15:37
#1
Created rounded cellcorners using css and simple html table
http://cssvault.com/tutorials/rounded_corners_without_images.php
http://aspnet.4guysfromrolla.com/articles/072804-1.aspx
http://www.virtuelvis.com/gallery/css/rounded/
http://www.markschenk.com/cssexp/roundedbox/arrows.html
http://www.literarymoose.info/=/synopsis/rounded-corners.xhtml
http://www.albin.net/CSS/roundedCorners/
Wed, 2004-11-10 16:45
#2
Created rounded cellcorners using css and simple html table
Oh, yes, I have been Googleing all day and I found most of the links you provided me with (thank you). I should have explained my problem a bit better...
My problem is that the tabular data will be inserted by absolute html n00bs in the WYSIWYG editor in the Vignette V7 CMS.
Unfortunately this excludes the fancy table-less layouts that use div's.
What I need is a table that is easy to construct using the WYSIWYG editor in the CMS. The code used to make the table fancy can then go into the stylesheet.
All I want is to put four 1 pixel gif's in all four corners of the cells of my table, but it seems to be impossible to do this. The background attribute can only allocate one image and because the table needs to be flexible I need to use 1 pixel gif's.
Ideas anyone?