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, click here.

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"></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.