Drawing a Vertical line between two columns (HTML)...

S

sonxEr77

Expert Member
Joined
Oct 22, 2006
Messages
1,809
Reaction score
0
Location
around
Hi, i have a table with 5 rows and two columns. I need to draw a vertical line with color from the top row to the last in between the columns. Any suggestions?
 
There are a few ways, the logical one would be to set the right border for the cells in the left column. (e.g. border-right:1px solid #FFFFFF;)
 
Or what you could do is 'nesting'.

Instead of having one table with two columns and styling each cell in the left column, create a 2 column 1 row table and then inside the left column of that 'parent' table create a 1 column 5 row table and do the same for the right column. That way you only have to apply the border style to the left cell of the parent table.
 
Ah... the good old days of table nesting :p If possible, simply switch to div layouts, much less code to worry about. Another way (if the columns are a set width) would be to apply a simple y-tiling background image, that way the separating line can be a different design and you're not restricted to the border types.
 
DarkStreet said:
Ah... the good old days of table nesting :p If possible, simply switch to div layouts, much less code to worry about. Another way (if the columns are a set width) would be to apply a simple y-tiling background image, that way the separating line can be a different design and you're not restricted to the border types.
Click to expand...

I would have suggested divs as well but from the sound or the OP I think divs might cause more headache than anything.
 
Venom Rush said:
Or what you could do is 'nesting'.

Instead of having one table with two columns and styling each cell in the left column, create a 2 column 1 row table and then inside the left column of that 'parent' table create a 1 column 5 row table and do the same for the right column. That way you only have to apply the border style to the left cell of the parent table.
Click to expand...

Not a bad idea, but depending on the contents of the cells, one may find that they do not line up - the left cells could be out of line with the right cells, and that will rather spoil the layout.
 
Thanx guys, even though code examples would help but will give these a try and make judgments. I noticed though if i try coloring the right border of each cell, i get a dash line, not a solid vertical line.. Maybe i have to play with my cellpadding/cellspacing
 
sonxEr77 said:
Thanx guys, even though code examples would help but will give these a try and make judgments. I noticed though if i try coloring the right border of each cell, i get a dash line, not a solid vertical line.. Maybe i have to play with my cellpadding/cellspacing
Click to expand...

Set cellspacing to 0 and increase cellpadding if needed. If you use Venom Rush's solution this won't happen either.
 
If it's tabular data you should use a table. Especially if you need the rows to line up.
 
You could create a table with 1 row and 2 columns then in the <td> of the left put in your style to put a border-right. Then in the left cell create a table with 1 column and 5 rows and in the right also a table with 1 column with 5 rows. The end result is available for you at http://www.web9.co.za/tutorials/5-rows-2-columns.html you can just view source to see what is going on.
 
You must log in or register to reply here.
Back
Top
Sign up to the MyBroadband newsletter
X