HTML Tables

Hoovooloo · 27-Jul-2006, 06:13 AM #1

I'm experimenting with creating rounded corners for tables, using images as the "corners". I've set it all up, as you can see below, but for some reason I have a white edge all around the outside (best seen in the actual corners). I don't have a border set.

Can anyone help me with what I need to add/remove to fix it? Thanks.

I've attached a screen shot, and also include the source code.

Code:

<html>
<head>
<title></title>
</head>
<body bgcolor=#DEDEDE>
<font face=Papyrus, Comic Sans color=#800000>
<center>
<table bgcolor=#ffffff>
<tr>
<td width=10 height=10><center><img src="C:\Documents and Settings\Administrator\My Documents\Websites\corner.jpg"></center></td>
<td width=250 height=10><center>This is a test</center><td>
<td width=10 height=10><img src="C:\Documents and Settings\Administrator\My Documents\Websites\cornerright.jpg"></td>
</tr>
<tr>
<td width=10 height=10><center>left</center></td>
<td width=250 height=250><center>This is a test</center><td>
<td width=10 height=10>right</td>
</tr>
<tr>
<td width=10 height=10><center><img src="C:\Documents and Settings\Administrator\My Documents\Websites\cornerbleft.jpg"></center></td>
<td width=250 height=10><center>This is a test</center><td>
<td width=10 height=10><img src="C:\Documents and Settings\Administrator\My Documents\Websites\cornerbright.jpg"></td>
</tr>



</table>
</center>
</body>
</html>

thecoalman · 27-Jul-2006, 08:10 AM #2

Change:

Code:

<table bgcolor=#ffffff>

to:

Code:

<table cellpadding="0" cellspacing="0" bgcolor="#ffffff">

They may still push out if the content in the other cells does. For example as tested in my editor the word right was larger than the cell so it poushed the cell to the required width.

DrP · 27-Jul-2006, 08:12 AM #3

You'd probably be better using CSS and backgrounds for the corner cells?

Hoovooloo · 27-Jul-2006, 10:21 AM #4

thanks coal, that did it apart from the top left corner for some reason (see attached). any clues?

and DrP, i have no knowledge of css but am happy to learn if you'd be kind enough to instruct.

DrP · 27-Jul-2006, 11:35 AM #5

CSS is a stylesheet supposed to be used for all styling, keeping the html for content only. What you'd do is put a link in your html <head> as so:

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

For your example you'd have the following in your stylesheet:

#round_corners_table { border: 0px; border-collapse: collapse; background-color: #69c; }
#top-row {height: 20px; }
#bottom-row {height: 20px; }
#top_left { width: 18px; background-image: url(img/corner_tl.png); }
#top_right { width: 18px; background-image: url(img/corner_tr.png); }
#bottom_left { background-image: url(img/corner_bl.png); }
#bottom_right { background-image: url(img/corner_br.png); }

Then your html would be like this for your table.

<table id="round_corners_table">

<tr id="top-row">
<td id="top_left"></td>
<td></td>
<td id="top_right"></td>
</tr>

<tr>
<td></td>
<td>table content</td>
<td></td>
</tr>

<tr id="bottom-row">
<td id="bottom_left"></td>
<td></td>
<td id="bottom_right"></td>
</tr>

</table>

I took this from here: http://www.jeox.com/docs/manual/web/...e_corners.html
The advantage of doing it with CSS is that you refer all your pages to the stylesheet and is you want to make changes you only need edit one file.

Hope that helps.

Hoovooloo · 27-Jul-2006, 12:30 PM #6

ah i see - so the css is like a guide for the html so it knows how to display itself.... (layman's terms!! lol)

i'll have a go with that!!

oh actually, how do you save as a css? do you need a particular program?

DrP · 27-Jul-2006, 01:34 PM #7

No special programs needed. This looks like a decent intro: http://www.brainjar.com/css/using/
What are you saving your html in?
In notepad you change the Save as Type to All files then put a .css extension after the filename.
I use Crimson Editor which I got free from somewhere on the web. It's good for the html and the css.

Hoovooloo · 27-Jul-2006, 03:11 PM #8

i either use Notepad or AceHTML, which i also got free from the web.

thanks, and thanks for the link - looks useful

thecoalman · 27-Jul-2006, 05:15 PM #9

Quote:

Originally Posted by Hoovooloo

thanks coal, that did it apart from the top left corner for some reason (see attached). any clues?

The code that you're working with and the code you have pasted must differ, It appears you have a tag missing somewhere. For example the word right should be all the way to the right.

Hoovooloo · 27-Jul-2006, 06:17 PM **#10**

the pasted code was got through "view source" on the page itself.

here it is again.... (i thought it might be the <center> tags, but they are in other cells too.......)

Code:

<html>
<head>
<title></title>
</head>
<body bgcolor=#DEDEDE>
<font face=Papyrus, Comic Sans color=#800000>
<center>
<table cellpadding="0" cellspacing="0" bgcolor=#ffffff>
<tr>
<td width=10 height=10><center><img src="C:\Documents and Settings\Administrator\My Documents\Websites\corner.jpg"></center></td>
<td width=250 height=10><center>This is a test</center><td>
<td width=10 height=10><img src="C:\Documents and Settings\Administrator\My Documents\Websites\cornerright.jpg"></td>
</tr>
<tr>
<td width=10 height=10><center>left</center></td>
<td width=250 height=250><center>This is a test</center><td>
<td width=10 height=10>right</td>
</tr>
<tr>
<td width=10 height=10><center><img src="C:\Documents and Settings\Administrator\My Documents\Websites\cornerbleft.jpg"></center></td>
<td width=250 height=10><center>This is a test</center><td>
<td width=10 height=10><img src="C:\Documents and Settings\Administrator\My Documents\Websites\cornerbright.jpg"></td>
</tr>



</table>
</center>
</body>
</html>

thecoalman · 27-Jul-2006, 11:41 PM **#11**

Ive checked the code you pasted above exactly as pasted and it works fine in both IE and Firefox:

As noted above the word right is pushing the cells on the right out because it is larger than the image. If you remove it there will be no problem. The thing to note on the image you attached is that on the top the first line of text falls below the first TR and the word right is to the left of the TD which is indicative of a missing or extra tag somewhere.

-------------------------------------------

Quote:

oh actually, how do you save as a css? do you need a particular program?

CSS can be added in three ways, directly in the body code
This will add a 2px border to a single image:

Code:

<img style="border: 2px;" src="yourimage.jpg">

Between the head tags, this will add a 2px border to every image on that page:

Code:

<head>
<style type="text/css">
img
{border: 2px}
</style>

Or the most beneficial way linked to a external document, the external doc woulkd have this and saved as your.css:

Code:

img
{border: 2px}

Between the head tags of every HTML doc on your site place this:

Code:

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

That will give every image a 2 px border. What's so greta bout this you ask? Very simple answer, by removing the formatting from the document itself you can change the entire look of the site by editing a single file. My example only applies formatting to a tag but we can apply classes. For example in your HTML document you can have:

Code:

<img class="1" src="yourimage.jpg">
<img class="2" src="yourimage.jpg">

In your external CSS:

Code:

.1
{border: 2px}
.2
{border: 0px}

So if for example you have 1000 images on you site with the .1 class apllied you can edit how they look by changing the CSS instead of editing the code in every single instance where it appears on your site.

For large sites it's essential...

Hoovooloo · 30-Jul-2006, 05:41 AM **#12**

wow thanks!!

i'll have a play about with that soon.

fredman · 03-Aug-2006, 11:58 AM **#13**

Quote:

Originally Posted by Hoovooloo

i either use Notepad or AceHTML, which i also got free from the web.

thanks, and thanks for the link - looks useful

Get free coffeecup html editor and use it (instead of notepad), it's really good (and did I mention it's free ?)

Ayato Kamina · 04-Aug-2006, 05:26 AM **#14**

Seems like a lot of trouble, you could have also just made 1 image then placed the content in it like so. Just place this code into the body.

Quote:

<img src="http://moorganhart.com/fun/RoundBox/roundbox.png" style="height: 202px; left: 203px; position: absolute; top: 188px; width: 219px;">
<div style="left: 217px; position: absolute; top: 202px;">
Content here.
</div></div>

You can change it how ever you like I think you get an idea from what I've sent, you can also make your own image to change the size, and feel free to expirement with the numbers. I've attached an image of what that code looks like. If you need anything else feel free to contact me. The position/place/numbers I chose were random by the way.

Hoovooloo · 13-Aug-2006, 05:40 PM **#15**

thanks

another option!

Search
Search in:
Show Threads Show Posts
Advanced Search

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)