Making 1 pixel thin vertical separator lines - HTML tricks

Do you want a newspaper kind of layout for your web pages? This tip will show you how to do that using a thin (1 pixel width) vertical separator.

It involves designing pages with fixed sizes and a good working knowledge of the <TABLE> tag. If you want to know more about HTML tables, go to the advanced HTML tutorial.

The layout above consists of a table 301 pixels wide. This table has only one row with three cells. The first and the last cells are 150 pixels wide while the middle one is 1 pixel wide. It's the center cell that makes the vertical separator.

The code is:

<table width="301" cellpadding="0" cellspacing="5" border="0">
<tr>
<td>So you want a newspaper kind of...</td>
<td width="1" bgcolor="#000000"><img src="1-1.gif" width="1"
height="1" border="0" alt="" /></td>
<td>It involves designing pages with...</td>
</tr>
</table>

Important points

• Width of the table is specified in pixel values. This yields a fixed table size. You can use % values in the width attribute but then would have to test the code in both Internet Explorer and Netscape Navigator.
• The cellpadding attribute is set to zero. Any other value will result in thickening of vertical separator.
• Cellspacing will add some space around the text in columns, which indents in from the separator. You can choose any value for this attribute to suit your needs.
• The width of the middle cell determines the thickness of the vertical separator. In this case, its set to 1 because that's what we want.
• The bgcolor of the middle cell is black (#000000). This results in a black colored separator. You can thus change the color of the separator by changing the background color of the table cell.
• The content of the center cell is a 1 X 1 transparent pixel image - 1-1.gif in the code above. Some web developers might use the Netscape Communicator specific <SPACER> tag, but I suppose that this will be dropped in the next version of the browser and is best avoided. The 1 X 1 pixel image is only 49 bytes! You can download its zip file from here. (Note: You cannot leave the center cell empty. You can't use &nbsp; since this will thicken the separator. The best bet is to use a 1 X 1 pixel transparent gif.