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:
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.
b=0 cp=0 cs=0 |
b=0 cp=5 cs=0 |
b=0 cp=0 cs=5 |
b=0 cp=5 cs=5 |
||||||||||||||||||||||||
b=2 cp=0 cs=0 |
b=2 cp=5 cs=0 |
b=2 cp=0 cs=5 |
b=2 cp=5 cs=5 |
||||||||||||||||||||||||
b=5 cp=0 cs=0 |
b=5 cp=5 cs=0 |
b=5 cp=0 cs=5 |
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:
|
b1=0 cp1=0 cs1=0 bg=red b2=0 cp2=5 cs2=5 |
b1=0 cp1=0 cs1=0 bg=black b2=0 cp2=5 cs2=2 |
b1=0 cp1=0 cs1=0 bg=black b2=0 cp2=5 cs2=1 |
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>
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.
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;
}
Defining the Source Viewer for IE
By default, IE uses the retarded Notepad as a viewer.
Here's how to change it.
- Open up the registry (Start, Run, regedit)
- Navigate to the following key: HKEY_LOCAL_MACHINE\ Software\ Microsoft\ Internet Explorer\
- Here you need to create a new key (folder) called "View Source Editor" (Right click the "Internet Explorer" key in the left hand window and choose NEW key).
- Inside the "View Source" Key create another key (folder) called "Editor Name"
- Now with the "Editor Name" selected, in the right hand panel change the "default" value to the path of your program (e.g. c:\bat\viewsource.bat)
- Here's viewsource.bat:
c:\bin\sourceviewer.exe "\"%1 %2 %3 %4 %5 %6 %7 %8 %9\""