Abbreviated Character Profiles + Hidden Tables


Live Preview: Here



The Whole Code Up-front

<table bgcolor="COLOR" cellpadding=3><tr><td><table background="BG PATTERN URL"><tr><td><img src="MAIN IMAGE URL" border="0" title="PB NAME"></td><td width=35 align=center><font color="COLOR" face="georgia" size="4"><b>N A M E</b></font></td><td width=350 valign=top><div style="background-color:COLOR;"><center><font face="georgia" size="6" color="COLOR"><b><u>CHARACTER NAME</u></b></font></div><div style="height: HEIGHTpx; overflow: hidden;"><div style="height: HEIGHTpx;"><center><a name="TABLE ONE NAME"> </a><a href="#TABLE TWO NAME"><img src="ICON URL" border="0" border="0" title="TABLE TWO TITLE"></a> <a href="#TABLE THREE NAME"><img src="ICON URL" border="0" title="TABLE THREE TITLE"></a> <a href="#TABLE FOUR NAME"><img src="ICON URL" border="0" title="TABLE FOUR TITLE"></a></center> <div style="background-color:COLOR;"><font face="georgia" size="2" color="COLOR"><font size="+1"><u>TABLE ONE</u></font> [STUFF GOES HERE] </font></div></div> <div style="height: HEIGHTpx;"><center><a name="TABLE TWO NAME"> </a><a href="#TABLE ONE NAME"><img src="ICON URL" border="0" border="0" title="TABLE ONE TITLE"></a> <a href="#TABLE THREE NAME"><img src="ICON URL" border="0" title="TABLE THREE TITLE"></a> <a href="#TABLE FOUR NAME"><img src="ICON URL" border="0" title="TABLE FOUR TITLE"></a></center> <div style="background-color:COLOR;"><font face="georgia" size="2" color="COLOR"><font size="+1"><u>TABLE TWO</u></font> [STUFF GOES HERE] </div></div> <div style="height: HEIGHTpx;"><center><a name="TABLE THREE NAME"> </a><a href="#TABLE TWO NAME"><img src="ICON URL" border="0" border="0" title="TABLE TWO TITLE"></a> <a href="#TABLE TWO NAME"><img src="ICON URL" border="0" title="TABLE TWO TITLE"></a> <a href="#TABLE FOUR NAME"><img src="ICON URL" border="0" title="TABLE FOUR TITLE"></a></center> <div style="background-color:COLOR;"><font face="georgia" size="2" color="COLOR"><font size="+1"><u>TABLE THREE</u></font> [STUFF GOES HERE] </div></div> <div style="height: HEIGHTpx;"><center><a name="TABLE FOUR NAME"> </a><a href="#TABLE TWO NAME"><img src="ICON URL" border="0" border="0" title="TABLE TWO TITLE"></a> <a href="#TABLE THREE NAME"><img src="ICON URL" border="0" title="TABLE THREE TITLE"></a> <a href="#TABLE THREE NAME"><img src="ICON URL" border="0" title="TABLE THREE TITLE"></a></center> <div style="background-color:COLOR;"><font face="georgia" size="2" color="COLOR"><font size="+1"><u>TABLE FOUR</u></font> [STUFF GOES HERE] </div></div></div></td></tr></table></td></tr></table>

Customizing

You can customize these by changing the color schemes, the number of pictures/tables, the height of the 'main' image, and probably a number of other things I haven't thought of.

In the code, I've labeled each section of new information as 'TABLE ONE' or 'TABLE THREE', but they aren't tables in the strictest sense. They are just sections that are hidden until you link to them.

Like most tricks with hidden tables, the biggest thing to keep track of is the name of each div space. So long as you include
<a name="TABLE NAME"> </a>
at the start of each section and link to it properly, then you can add an infinite number of sections. Probably.

Happy coding!