Tables as Lines - Page 3

This is a neat trick, and very reliable. The regular HTML code for a horizontal line (or rule) is <HR>, but that gives us something dull and colorless like so:

You can create a colored line using a table and filling its single cell with a transparent gif, then adding a background color. This works in all the main browsers.

And here's the code for the line above.

    <table border	= "0" 
	width		= "50%"
    	cellpadding	= "0" 
	cellspacing	= "0"
    	bgcolor		= "#FF6666"> 

    <tr> <td>
    <img src	= "clear.gif" 
	width	= "200"
    	height	= "2">
    </td> </tr> </table>

Using Nested Tables for Borders

There are many table attributes that you can specify to create fancy table borders, but you'll rarely see them used, again because Explorer and Navigator interpret them in entirely different ways. One of the biggest issues is show-through, meaning that a color placed on top of another in a border may merge with the color below or may not, depending on the browser.

Here's an extreme example:

Believe it or not, these two screengrabs are for an identical table, the top one as rendered by Explorer, and the bottom one by Netscape. Here's the code in the table tag: <table border="20" width="200" bgcolor="#CCFF66" bordercolor="#33CC66" bordercolorlight="#996666" bordercolordark="#663300">

But this example is extreme. You can often get table borders to look similar in Netscape and Explorer, though rarely identical.

If you want an identical border in all browsers, the easiest method is to use nested tables. Simply put one table inside another, slightly larger and add a background color to this larger table.

Here's an example from a real site, that includes an extra nested table for the text on the right:

.co.uk Internet Wildflower

The border looks identical in Explorer and Navigator. And here's the code:

    <table 
	bgcolor		= "#ef7aa0" 
	border		= "0"
    	cellpadding	= "2" 
	cellspacing	= "0"
    	width		= "470"> 
    <tr> <td> 

	<table bgcolor	= "#000000"
    		border		= "0"
    		cellpadding	= "0" 
		cellspacing	= "0"
    		width		= "466"> 
	<tr> <td width	= "216">
    		<img src	= "foxwritesm.gif"
    			height	= "60" 
			width	= "211">
	</td>
    	<td 	width	= "246" 
		valign	= "middle"
    		align	= "left"> 

		<table width		= "240"
    			border		= "0" 
			cellspacing	= "0"
    			cellpadding	= "0"> 
		<tr> <td width	= "102"
    			height		= "39"
    			valign		= "middle">

		<font color		= "#ef7aa0"
    			face		= "Arial, Helvetica, sans-serif"
    			size		= "3"><b>.co.uk
    		</b></font>
	</td> <td width	= "102"
    			height		= "39" 
			valign		= "middle">
		<font
    			color		= "#ef7aa0" 
			face		= "Arial, Helvetica, sans-serif"
    			size		= "3">

			<b>Internet<br>Wildflower</b>
    		</font></td> </tr> </table>
    	</td> </tr> </table> </td> </tr>
    </table>

The cell widths haven't been matched up perfectly in the code, but then it is a real-world example.

Cells Too Narrow - Page 2
Advanced HTML Tables
Hanging Tables with Wrapping Text - Page 4