help with rounded tables

[CrazyGaz]

I have a code that makes rounded tables, these rounded tables each have 3 rows and 3 columns. would it be possible to use CSS so all I have to do is <td class="upper-left"> or something similar for the top left table (1st cell,1st row)

the code I have at the moment is.


<TABLE BORDER="0" WIDTH="51" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD WIDTH="11" VALIGN="top" ALIGN="right" HEIGHT="11"><IMG SRC="images/table/table-upper-left.gif" WIDTH="11" HEIGHT="11"></TD>
<TD WIDTH="108" BACKGROUND="images/table/table-upper.gif" HEIGHT="11" VALIGN="bottom"></TD>
<TD WIDTH="11" VALIGN="top" ALIGN="left" HEIGHT="11"><IMG SRC="images/table/table-upper-right.gif" WIDTH="11" HEIGHT="11"></TD>
</TR>


<TR>
<TD WIDTH="11" BACKGROUND="images/table/table-left.gif" HEIGHT="40" VALIGN="bottom" ALIGN="center"></TD>
<TD WIDTH="108" HEIGHT="40" BGCOLOR="#C23D3D" VALIGN="center">
HERE IS WHERE I PUT THE TEXT OR IMAGES (i.e - news)
</TD>
<TD WIDTH="11" HEIGHT="40" BACKGROUND="images/table/table-right.gif"></TD>
</TR>


<TR>
<TD WIDTH="11" VALIGN="top" ALIGN="right" HEIGHT="11"><IMG SRC="images/table/table-lower-left.gif" WIDTH="11" HEIGHT="11"></TD>
<TD WIDTH="108" HEIGHT="11" BACKGROUND="images/table/table-lower.gif" VALIGN"TOP"></TD>
<TD WIDTH="11" HEIGHT="11" VALIGN="bottom" ALIGN"LEFT"><IMG SRC="images/table/table-lower-right.gif" WIDTH="11" HEIGHT="11"></TD>
</TR>
</TABLE>

[McGruff]

First, I'm no CSS expert so don't take this as gospel..

Styles with a no-repeat bg image aligned top left, bottom right etc will, I think do what you want.

CSS positioning could even let you get rid of tables altogether.

[toicontien]

Yep.

IN YOUR HTML DOCUMENT HEAD:

<style type="text/css" media="all">
<!--
td.upperLeft, td.upperRight {
width: 11px;
height: 11px;
vertical-align: top;
text-align: right;
}

td.upperMiddle {
width: 108px;
height: auto;
background-image: url("images/table/table-upper.gif");
vertical-align: bottom;
}

td.upperRight {
text-align: left;
}

td.centerLeft {
width: 11px;
height: 40px;
background-image: url("images/table/table-left.gif");
vertical-align: bottom;
text-align: center;
}
-->
</style>

---

IN THE BODY:

<TABLE BORDER="0" WIDTH="51" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD class="upperLeft"><IMG SRC="images/table/table-upper-left.gif" WIDTH="11" HEIGHT="11"></TD>
<TD class="upperMiddle"></TD>
<TD class="upperRight"><IMG SRC="images/table/table-upper-right.gif" WIDTH="11" HEIGHT="11"></TD>
</TR>


<TR>
<TD class="centerLeft"></TD>
<TD class="centerMiddle" WIDTH="108" HEIGHT="40" BGCOLOR="#C23D3D" VALIGN="center">
HERE IS WHERE I PUT THE TEXT OR IMAGES (i.e - news)
</TD>
<TD class="centerRight" WIDTH="11" HEIGHT="40" BACKGROUND="images/table/table-right.gif"></TD>
</TR>


<TR>
<TD WIDTH="11" VALIGN="top" ALIGN="right" HEIGHT="11"><IMG SRC="images/table/table-lower-left.gif" WIDTH="11" HEIGHT="11"></TD>
<TD WIDTH="108" HEIGHT="11" BACKGROUND="images/table/table-lower.gif" VALIGN"TOP"></TD>
<TD WIDTH="11" HEIGHT="11" VALIGN="bottom" ALIGN"LEFT"><IMG SRC="images/table/table-lower-right.gif" WIDTH="11" HEIGHT="11"></TD>
</TR>
</TABLE>

---

I'm not going to give you all the answers. That would take all the fun out of it ;-)

For your second row, middle column, you might want to add -

overflow: scroll;

So that if there is more than 40 pixels in height of content, people can scroll. I know that sort of thing works for the DIV tag. You might even want to wrap your news content in a DIV tag and set it's height to 40 pixels and add the overflow: scroll; element to the DIV tag:
<td class="centerMiddle">
<div class="newsContent">

news stuff, blah blah

</div>
</td>
IN CSS:

div.newsContent {

height: 40px;
overflow: scroll;

}

Then you would remove the overflow element in the td class for the second row, middle column.

But that starts to get into stuff that 5.0 browsers support best. Netscape 4.x doesn't support that overflow: scroll option.

I usually shy away from setting heighs to elements that do not contain images. Mac users can resize text, not matter how you have the text sizes specified (pixels, points, relative, etc).

Check out http://www.w3schools.com/ for more info on CSS.

[CrazyGaz]

thanks mate that is exactly what I was after :)

I have wrote the CSS for the rest, I had to modify your slightly but I got the gist from your code so now my HTML is really short :)
--
<tr>
<td class="upperLeft"></td>
<td class="upperMiddle"></td>
<td class="upperRight"></td>
</tr>
--

thanks a lot

-Gaz-