There's no such thing as a stupid question, but they're the easiest to answer.
JoinTour
Login
 
Tag Cloud
access audio avg avg 8 bios blue screen boot bsod computer connection cpu crash css dell desktop dma driver drivers dvd email error excel explorer firefox firefox 3 freeze gimp graphics hard drive hardware hijackthis hjt install internet internet explorer itunes keyboard laptop macro malware monitor motherboard network networking outlook outlook 2003 outlook 2007 outlook express pio problem problems router seo server slow sound sp3 spyware trojan usb video virtumonde virus vista vundo windows windows vista windows xp winxp wireless
Web Design & Development
Search
Search in:
 
Advanced Search
Tech Support Guy Forums > Internet & Networking > Web Design & Development >
HTML Tables


HELLO AND WELCOME! Before you can post your question, you'll have to register -- it's completely free! Click here to join today! We highly recommend that you print a copy of our Guide for New Members. Enjoy!

 
Thread Tools
Hoovooloo's Avatar
Computer Specs
Member with 86 posts.
 
Join Date: Aug 2005
Location: UK
Experience: Reasonably Literate
27-Jul-2006, 06:13 AM #1
Unhappy HTML Tables
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>
Attached Thumbnails
html-tables-screen.jpg  
thecoalman's Avatar
Computer Specs
Distinguished Member with 2,503 posts.
 
Join Date: Mar 2006
Location: Pennsylvania
Experience: What's the shiny red button for? <click>
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's Avatar
DrP DrP is offline
Senior Member with 481 posts.
 
Join Date: Jul 2005
Location: UK
Experience: What's a compoota?
27-Jul-2006, 08:12 AM #3
You'd probably be better using CSS and backgrounds for the corner cells?
Hoovooloo's Avatar
Computer Specs
Member with 86 posts.
 
Join Date: Aug 2005
Location: UK
Experience: Reasonably Literate
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.
Attached Thumbnails
html-tables-screen2.jpg  
DrP's Avatar
DrP DrP is offline
Senior Member with 481 posts.
 
Join Date: Jul 2005
Location: UK
Experience: What's a compoota?
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.
__________________
Clive
Hoovooloo's Avatar
Computer Specs
Member with 86 posts.
 
Join Date: Aug 2005
Location: UK
Experience: Reasonably Literate
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's Avatar
DrP DrP is offline
Senior Member with 481 posts.
 
Join Date: Jul 2005
Location: UK
Experience: What's a compoota?
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.
__________________
Clive
Hoovooloo's Avatar
Computer Specs
Member with 86 posts.
 
Join Date: Aug 2005
Location: UK
Experience: Reasonably Literate
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's Avatar
Computer Specs
Distinguished Member with 2,503 posts.
 
Join Date: Mar 2006
Location: Pennsylvania
Experience: What's the shiny red button for? <click>
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's Avatar
Computer Specs
Member with 86 posts.
 
Join Date: Aug 2005
Location: UK
Experience: Reasonably Literate
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's Avatar
Computer Specs
Distinguished Member with 2,503 posts.
 
Join Date: Mar 2006
Location: Pennsylvania
Experience: What's the shiny red button for? <click>
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...
Attached Thumbnails
html-tables-table.gif  
Hoovooloo's Avatar
Computer Specs
Member with 86 posts.
 
Join Date: Aug 2005
Location: UK
Experience: Reasonably Literate
30-Jul-2006, 05:41 AM #12
wow thanks!!

i'll have a play about with that soon.
fredman's Avatar
Senior Member with 201 posts.
 
Join Date: Jul 2002
Location: near salt water
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's Avatar
Computer Specs
Senior Member with 133 posts.
 
Join Date: Oct 2005
Location: San Diego, California, U.S.A.
Experience: Almost Einstein
04-Aug-2006, 05:26 AM #14
Okay
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.
Attached Thumbnails
html-tables-example.png  
__________________
-Ayato Kamina
Hoovooloo's Avatar
Computer Specs
Member with 86 posts.
 
Join Date: Aug 2005
Location: UK
Experience: Reasonably Literate
13-Aug-2006, 05:40 PM #15
thanks another option!
Reply


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

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are Off
Refbacks are Off

You Are Using:
Server ID
Advertisements do not imply our endorsement of that product or service.
All times are GMT -4. The time now is 12:39 AM.
Copyright © 1996 - 2008 TechGuy, Inc. All rights reserved.
Powered by vBulletin, Copyright © 2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.1.0
Powered by Cermak Technologies, Inc.