Raeschen's button layout

For an easier to read version click here http://pastebin.com/sxnUe4cG

<!-- START OF BUTTONS --> <!-- COLORS OF BUTTONS ARE SHOWN. WIDTH, BACKGROUND-COLOR, BORDER COLOR, AND JUST 'COLOR' (FOR TEXT COLOR IN BUTTON) ARE ALL EDITABLE. THEY USE HEX CODES. GOOGLE IT. --> <!-- TO USE THIS CODE, YOU MUST DISABLE AUTO-FORMATTING. THIS MEANS YOU WILL HAVE TO CREATE NEW PARAGRAPHS/LINES WITH A SERIES OF <BR> TAGS INSTEAD OF SIMPLY PRESSING RETURN/ENTER. EACH <BR> TAG IS ONE PRESS OF 'RETURN' --> <!-- YOU CAN HAVE AN INVISIBLE TABLE FOR THE BUTTONS IF YOU WANT. CHANGE BORDER="1" TO BORDER="0" --> <table width="1000" border="1" align="center"> <tr> <td width="250" align="center" bgcolor="#000000"> <!-- Button 1 --> <button title="Button1" type="button" style="font-size:12px; font-weight:bold; color:#d3d3d3; width:200px; background-color:#8702ca; border-style:outset; border-color:#8702ca;"onClick=" {document.getElementById('button2') .style.display='none'} {document.getElementById('button3') .style.display='none'} {document.getElementById('button4') .style.display='none'} {document.getElementById('default') .style.display='none'} if(document.getElementById('button1') .style.display=='none') {document.getElementById('button1') .style.display=''} else{{document.getElementById('button1') .style.display='none'}{document.getElementById('default') .style.display=''}}"> <!-- Name of button 1 --> <b><u>- Button 1; -</u></b> </button> </td> <td width="250" align="center" bgcolor="#000000"> <!-- Button 2 --> <button title="Button2" type="button" style="font-size:12px; font-weight:bold; color:#d3d3d3; width:200px; background-color:#8702ca; border-style:outset; border-color:#8702ca;"onClick=" {document.getElementById('button1') .style.display='none'} {document.getElementById('button3') .style.display='none'} {document.getElementById('button4') .style.display='none'} {document.getElementById('default') .style.display='none'} if(document.getElementById('button2') .style.display=='none') {document.getElementById('button2') .style.display=''} else{{document.getElementById('button2') .style.display='none'}{document.getElementById('default') .style.display=''}}"> <!-- Name of button 2 --> <b><u>- Button 2; -</u></b> </button> </td> <td width="250" align="center" bgcolor="#000000"> <!-- Button 3 --> <button title="Button3" type="button" style="font-size:12px; font-weight:bold; color:#d3d3d3; width:200px; background-color:#8702ca; border-style:outset; border-color:#8702ca;"onClick=" {document.getElementById('button2') .style.display='none'} {document.getElementById('button1') .style.display='none'} {document.getElementById('button4') .style.display='none'} {document.getElementById('default') .style.display='none'} if(document.getElementById('button3') .style.display=='none') {document.getElementById('button3') .style.display=''} else{{document.getElementById('button3') .style.display='none'}{document.getElementById('default') .style.display=''}}"> <!-- Name of button 3 --> <b><u>- Button 3; -</u></b> </button> </td> <td width="250" align="center" bgcolor="#000000"> <!-- Button 4 --> <button title="Button4" type="button" style="font-size:12px; font-weight:bold; color:#d3d3d3; width:200px; background-color:#8702ca; border-style:outset; border-color:#8702ca;"onClick=" {document.getElementById('button2') .style.display='none'} {document.getElementById('button3') .style.display='none'} {document.getElementById('button1') .style.display='none'} {document.getElementById('default') .style.display='none'} if(document.getElementById('button4') .style.display=='none') {document.getElementById('button4') .style.display=''} else{{document.getElementById('button4') .style.display='none'}{document.getElementById('default') .style.display=''}}"> <!-- Name of button 4 --> <b><u>- Button 4; -</u></b> </button> </td> </tr> </table> <!-- HERE ARE THE CONTENT OF THE BUTTONS. WHEN YOU PRESS A BUTTON, THE CORRESPONDING DATA WILL SHOW IN THE DIV TAG WITH THE APPROPRIATE ID. FEEL FREE TO MAKE A TABLE WITH A BORDER, USE FONT TAGS FOR FONT COLOR, BOLD, ITALIC, UNDERLINE. USE <BR> FOR LINE BREAKS. YOU CAN CHANGE THE BGCOLOR OF THE TABLE TOO. --> <div id="default" style="display:inherit"> <!-- CONTENT OF DEFAULT. THIS SHOWS BY DEFAULT WHEN PAGE IS OPENED. PRESSING A BUTTON A SECOND TIME WILL CLOSE IT AND RE-SHOW DEFAULT --> <table width="400" border="1" align="center"> <tr> <td width="400" align="center" bgcolor="#ffffff"> <br /><br /> Default content. Put stuff here. <br /><br /> </td> </tr> </table> </div> <div id="button1" style="display:none"> <!-- CONTENT OF BUTTON 1 --> <table width="400" border="1" align="center"> <tr> <td width="400" align="center" bgcolor="#ffffff"> <br /><br /> Button 1 content. Put stuff here. <br /><br /> </td> </tr> </table> </div> <div id="button2" style="display:none"> <!-- CONTENT OF BUTTON 2 --> <table width="400" border="1" align="center"> <tr> <td width="400" align="center" bgcolor="#ffffff"> <br /><br /> Button 2 content. Put stuff here. <br /><br /> </td> </tr> </table> </div> <div id="button3" style="display:none"> <!-- CONTENT OF BUTTON 3 --> <table width="400" border="1" align="center"> <tr> <td width="400" align="center" bgcolor="#ffffff"> <br /><br /> Button 3 content. Put stuff here. <br /><br /> </td> </tr> </table> </div> <div id="button4" style="display:none"> <!-- CONTENT OF BUTTON 4 --> <table width="400" border="1" align="center"> <tr> <td width="400" align="center" bgcolor="#ffffff"> <br /><br /> Button 4 content. Put stuff here. <br /><br /> </td> </tr> </table> </div> <!-- END OF BUTTONS -->