• Howdy! Welcome to our community of more than 130.000 members devoted to web hosting. This is a great place to get special offers from web hosts and post your own requests or ads. To start posting sign up here. Cheers! /Peo, FreeWebSpace.net
managed wordpress hosting

vertical line - how to

Status
Not open for further replies.
G

gthorley

New Member
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:

Code: 
<td width="1" bgcolor="#000000"><img src="pix.gif" width="1" height="1"></td>

and not

Code: 
<td width="1" bgcolor="#000000"> <img src="pix.gif" width="1" height="1"> </td>

Because spaces will screw it up.
 
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.
 
Status
Not open for further replies.
Back
Top