HTML Tips & Tricks
CONTENTS
HTML Colors
Tables
Examples of setting border, cellpadding, and cellspacing
Nested tables
Page Breaks for Printing
Dynamically Controlling Visibility of Sections
Fixing Excessive Padding in IE Buttons
Defining the Source Viewer for IE

HTML Colors

Here's the standard HTML colors (the ones that pretty much all browsers are guaranteed to display without dithering):
Click on a color to copy its value from this here text field:
to top

Tables

Examples of setting border, cellpadding, and cellspacing

The following examples show single tables with different border, cellpadding and cellspacing values. The general form is:
<table border='b' cellpadding='cp' cellspacing='cs'> <tr> <td bgcolor='lightgreen'>A</td> <td bgcolor='lightgreen'>B</td> <td bgcolor='lightgreen'>C</td> </tr> <tr> <td bgcolor='lightgreen'>D</td> <td bgcolor='lightgreen'>E</td> <td bgcolor='lightgreen'>F</td> </tr> </table>
The values indicated below each table are the replacments for b, cp and cs in the <table> element.
A B C
D E F

b=0 cp=0 cs=0
A B C
D E F

b=0 cp=5 cs=0
A B C
D E F

b=0 cp=0 cs=5
A B C
D E F

b=0 cp=5 cs=5
A B C
D E F

b=2 cp=0 cs=0
A B C
D E F

b=2 cp=5 cs=0
A B C
D E F

b=2 cp=0 cs=5
A B C
D E F

b=2 cp=5 cs=5
A B C
D E F

b=5 cp=0 cs=0
A B C
D E F

b=5 cp=5 cs=0
A B C
D E F

b=5 cp=0 cs=5
A B C
D E F

b=5 cp=5 cs=5

Nested tables

The following examples show more interesting effects that can be achieved by nesting one table inside another. The general format is:
A B C
D E F
A B C
D E F

b1=0 cp1=0 cs1=0 bg=red
b2=0 cp2=5 cs2=5
A B C
D E F

b1=0 cp1=0 cs1=0 bg=black
b2=0 cp2=5 cs2=2
A B C
D E F

b1=0 cp1=0 cs1=0 bg=black
b2=0 cp2=5 cs2=1
 
to top

Page Breaks for Printing

Ever wonder how to arrange for page breaks when your HTML page is printed? Just add the following:
<div style="page-break-after:always"></div>
to top

Dynamically Controlling Visibility of Sections

It's sometimes useful to make sections of a page hideable. Here's how to do it. First add the following JavaScript:
<script language="JavaScript"> var ie = (navigator.appName == "Microsoft Internet Explorer"); function toggle(targetId) { var obj; if (ie) { obj = eval('document.all.' + targetId); } else { obj = document.getElementById(targetId); } obj.style.display = (obj.style.display == '') ? 'none' : ''; } </script>
This works for Internet Explorer, Netscape and Mozilla, at least. Then you can call toggle() to change the visibility of HTML elements. The document will be reformatted so that when the element is hidden, it's screen space is filled in by the other page elements. Here's how to do it from a link:
<a href="#" onclick="javascript:toggle('part1');">Toggle Part 1 Visibility</a> <div id="part1" style="display:none"> ... contents to be toggled ... </div>
Note that the part1 div starts off hidden.
to top

Fixing Excessive Padding in IE Buttons

IE makes the padding proportional to the button width. Looks totally stupid, IMHO. Here's how to fix it. Just add "class='normal'" to all your buttons and submits.
input.normal { padding: 0 .25em; width: 0; overflow: visible; } input.normal[class] { /*ie ignores this*/ width: auto; }
to top

Defining the Source Viewer for IE

By default, IE uses the retarded Notepad as a viewer. Here's how to change it.
c:\bin\sourceviewer.exe "\"%1 %2 %3 %4 %5 %6 %7 %8 %9\""
to top