Table border images help needed

johnyccc

johnyccc

johnyccc

Associate
Joined
24 Sep 2006
Posts
1,267
Hi,
I am looking to make a simple site, with the main content inside a table.
I hope to use images for it's border, for shadow/rounded edges etc.
However - Having put the top left corner and left side images into their respective cells, I find that a cell outline is created, thus ruining the effect.
Example 1: Link
I am using frontpage, as I only plan on making the one site and it doesn't need to be anything special.
I specified in table properties the border value to be "0".
But this doesn't seem to help.
The code is as follows:
Code: 
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 2</title>
</head>

<body bgcolor="#014695">

<div align="center">
	<table border="0" width="55%" id="table1" height="66%" bgcolor="#FFFFFF" bordercolorlight="#000000" bordercolordark="#000000">
		<!-- MSTableType="layout" -->
		<tr>
			<td width="36" height="22" background="r_corner.jpg">&nbsp;</td>
			<td rowspan="2">&nbsp;</td>
			<td height="22" width="6">&nbsp;</td>
		</tr>
		<tr>
			<td width="4" background="r_b2.jpg">&nbsp;</td>
			<td width="6">&nbsp;</td>
		</tr>
		<tr>
			<td width="4" height="23">&nbsp;</td>
			<td height="23">&nbsp;</td>
			<td height="23" width="6">&nbsp;</td>
		</tr>
	</table>
</div>

</body>

</html>

Many thanks for any help :D
 
You can use border-collapse in CSS. If you want this to apply to any table in your page add this in the <head> section of your code:

Code: 
<style type="text/css">
	table {
		border-collapse: collapse;	
	}
</style>

Alternatively you could use a class/id or just inline style the table element:

Code: 
<table border="0" style="border-collapse: collapse;" ......

If you are interested in learning a bit more about HTML and CSS you can get the same layout without using tables. Tables should really only be used for tabular data.

If you wanted to stick with tables but tidy the code up a bit you could have a CSS rule such as:

Code: 
<style type="text/css">
#table1 {
width: 55%;
border: 0;
border-collapse: collapse;
background-color: white;
}
</style>
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom