2 replies [Last post]
spocky
Offline
newbie
Last seen: 11 years 31 weeks ago
Joined: 2004-11-10
Posts: 3
Points: 0

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>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
  </tr> 
  <tr class="light"> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</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?

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 2 years 16 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

Created rounded cellcorners using css and simple html table

spocky
Offline
newbie
Last seen: 11 years 31 weeks ago
Joined: 2004-11-10
Posts: 3
Points: 0

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?