If I want to have 3 colums on a page with vertical lines seperating the middle column from the outer ones what is the best way to write this.
I was thinking of setting up a table with 5 columns and making the second and fourth with say 2 pixel width and then putting a line gif in each. Is there an easier or better way?
Make a one pixel table cell in the middle with the BGCOLOR tag set to the color of the line and insert a 1x1 pixel gif in the cell. Make sure it looks like this:
and notCode:<td width="1" bgcolor="#000000"><img src="pix.gif" width="1" height="1"></td>
Because spaces will screw it up.Code:<td width="1" bgcolor="#000000"> <img src="pix.gif" width="1" height="1"> </td>
Nick
Thanks Nick
I was using something similar but your line gives me a thicker line than I want. Your line is correct but it is effected by some other code in my html. I can't see what though. Not the border ="1" I put that in temp to see the outline.
I have posted below
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF">
<table width="35%" border="1" height="100">
<tr>
<td>-</td>
</tr>
</table>
-
<table width="760" border="1" height="800" align="center">
<tr valign="top">
<td>
-
<table width="760" border="1" height="700" cellpadding="2" align="center">
<tr>
<td valign="top" width="213">-
<table width="100%" border="1" height="12">
<tr>
<td height="27">-</td>
</tr>
</table>
<table width="100%" border="1" height="12">
<tr>
<td height="27">-</td>
</tr>
</table>
<table width="100%" border="1" height="12">
<tr>
<td height="27">-</td>
</tr>
</table>
<table width="100%" border="1" height="12">
<tr>
<td height="27">-</td>
</tr>
</table>
<table width="100%" border="1" height="12">
<tr>
<td height="27">-</td>
</tr>
</table>
<table width="100%" border="1" height="12">
<tr>
<td height="27">-</td>
</tr>
</table>
</td>
<td width="1" bgcolor="#808080"><img src="spacer.gif" width="1" height="1"> </td>
<td width="318" valign="top"> This is just a test to see what the alignment
is going to be like
<hr>
</td>
<td width="1" bgcolor="#808080"><img src="spacer.gif" width="1" height="1"> </td>
<td width="213" valign="top">-
<table width="100%" border="1" height="100">
<tr>
<td>-</td>
</tr>
</table></td>
</tr>
</table>
-
</td>
</tr>
</table>
-
</body>
</html>
Simple answer: cellpadding.
Cellpadding has to be cellpadding="0" for this effect. Use cellspacing="2" cellpadding="0" to get around this.
Nick
Wonderful, that was the problem.
Thanks
No problem, glad to be of some help
Nick
Posting Permissions
Bookmarks