Rp Tutorials

( Page Layouts )

I'm putting together a game at the moment, and a frequent poster here *cough*advertisemyrp*cough*

So! I bring you a very simple table. You can use it for rules, premises, or FAQs. And I think it is wonder. I could be bias though.



( Useful Table )

Click pics for bigger images.

ONE.	TWO.	THREE.
<table width="350px" bgcolor="FFFFFF" style="border:1px #7B7B7C solid;"><tr><th align="center" colspan="2" bgcolor="C8D8C5" height="100px" width="290px" style="padding:4px;"><font face="Myriad Pro" color="white" size="6"><center><b>SOMETHING HERE?</b></center></font></th></tr> <tr> <td align="left" height="120px" width="120px" bgcolor="C8D8C5" style="padding:4px;"> <font face="Myriad Pro" color="white" size="7"><center><B>?</b> </center></font> </td> <td style="padding: 10px;"><font size="3"><b>Header 1</b></font> <i>Header 2</i></td></tr> <tr><td colspan="2"><p align="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla placerat ornare odio. Integer sit amet odio mollis nisi rutrum vehicula. Vestibulum at odio eget ligula sollicitudin aliquet. Aenean posuere dui vel magna. Praesent ac pede at leo condimentum interdum. Fusce at enim. Vestibulum iaculis diam a purus. Aliquam velit arcu, porta non, feugiat eleifend, suscipit ac, odio. Curabitur gravida dolor ut ante. Maecenas dui. Sed aliquam lectus eu massa. Vivamus interdum tempor metus. Aenean posuere pretium lectus. Nunc sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p></td></tr></table>	<table width="400px" bgcolor="CE3563" style="border:10px #A39F55 solid;" cellspacing="0"><tr><td rowspan="2" width="120px" style="padding:4px;"><font size="7" color="white"><center> Aenean posuere magna.</center></font></td></tr> <tr><td style="border-left:1px #A39F55 solid; padding: 10px;"><font color="white"><p align="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></td></tr> <tr><td colspan="2" style="border-top:1px #A39F55 solid; padding:4px;"><font color="white"><p align="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla placerat ornare odio. Integer sit amet odio mollis nisi rutrum vehicula. Vestibulum at odio eget ligula sollicitudin aliquet. Aenean posuere dui vel magna. Praesent ac pede at leo condimentum interdum. Fusce at enim. Vestibulum iaculis diam a purus. Aliquam velit arcu, porta non, feugiat eleifend, suscipit ac, odio. Curabitur gravida dolor ut ante. Maecenas dui. Sed aliquam lectus eu massa. Vivamus interdum tempor metus. Aenean posuere pretium lectus. Nunc sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p></td></tr> <tr><td colspan="2" style="border-top:1px #A39F55 solid; padding:4px;"><center><font size="4">• <a href=""><font color="white">LINK</font></a> • <a href=""><font color="white">LINK</font></a> • <a href=""><font color="white">LINK</font></a> • <a href=""><font color="white">LINK</font></a> • <a href=""><font color="white">LINK</font></a> • </td></tr></table>	<table width="600px" bgcolor="FFFFFF" style="border:3px #FFFFFF solid;" cellspacing="0"> <tr><td align="center" colspan="2"><img src="http://i41.tinypic.com/4twmbp.png"></td><tr> <tr><th align="center" colspan="2"><font color="B3AAA1" face="georgia" style="letter-spacing: -1.5pt; line-height: 9mm; font-size: 16pt;">the weather is changing and breaking my stride.</th></tr> <tr><td></td><td rowspan="4" bgcolor="828282" width="53px" style="border-top: 2px white solid; border-left: 1px white solid;"><font color="828282">..</font></td></tr> <tr><td style="padding: 10px;" bgcolor="DFDAD3"><font face="georgia" color="#383838" style="line-height: 4pt;"><p align="justify"><b>You plead with me, shout, scream, tell me I'm staying.</b></p> <font style="font-size:14pt; line-height: 4pt;"><center><i>This love isn't good unless it's me and you.</font></i></center><p align="right">The same as I love you, you'll always love me too.</font></p></td></tr> <tr><td style="padding: 5px;"><p align="justify"><font face="georgia" color="#383838" style="line-height: 6pt;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla placerat ornare odio. Integer sit amet odio mollis nisi rutrum vehicula. Vestibulum at odio eget ligula sollicitudin aliquet. Aenean posuere dui vel magna. Praesent ac pede at leo condimentum interdum. Fusce at enim. Vestibulum iaculis diam a purus. Aliquam velit arcu, porta non, feugiat eleifend, suscipit ac, odio. Curabitur gravida dolor ut ante. Maecenas dui. Sed aliquam lectus eu massa. Vivamus interdum tempor metus. Aenean posuere pretium lectus. Nunc sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p></td></tr> <tr> <td style="padding: 10px;" bgcolor="DFDAD3"><font face="georgia" color="#383838"><p align="center"><font size="4">& <a href=""><font color="white">LINK</font></a> & <a href=""><font color="white">LINK</font></a> & <a href=""><font color="white">LINK</font></a> & <a href=""><font color="white">LINK</font></a> & <a href=""><font color="white">LINK</font></a> &</font></p></td></tr></table>
FOUR.	FIVE.	SIX.
<table cellpadding="5" cellspacing="5" bgcolor="#0878A1" width="450" align="center"><tr><td><table cellpadding="5" cellspacing="5" bgcolor="#FAFAFA" width="100%"> <tr><td colspan="3" valign="top"><font face="calibri" size="6" color="#0878A1">Gotta Put Something Here</font> <font face="calibri" size="1" color="#00547A" style="letter-spacing: .5mm;">QUOTE</font></td></tr> <tr><td width="100%" bgcolor="#83CBE6" colspan="3"><font face="georgia" size="1" color="#222222">"<i>MUSIC & LYRICS</i>"</font></td></tr> <tr><td width="10px" bgcolor="#FAFAFA" rowspan="2"></td> <td width="309px" height="95px" bgcolor="#FAFAFA"><font face="arial" size="2" color="#41BCE2"><center><B><font color="222222">B · A · S · I · C · S</font></b></center><p align="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla placerat ornare odio. Integer sit amet odio mollis nisi rutrum vehicula.</td> <td bgcolor="808080" rowspan="2" width="103px" height="189px"></td></tr> <tr><td width="309px" height="95px" bgcolor="#FAFAFA"><font face="arial" size="2" color="#41BCE2"><center><B><font color="222222">T · I · D · B · I · T · S </font></b></center><p align="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla placerat ornare odio. Integer sit amet odio mollis nisi rutrum vehicula. </font></td> </tr> <tr><td width="100%" bgcolor="#83CBE6" colspan="3"><center><font face="arial" size="1" color="#222222"><a href=""><font color="#222222"><u>LINK</u></font></a> · <a href=""><font color="#222222"><u>LINK</u></font></a> · <a href=""><font color="#222222"><u>LINK</u></font></a> · <a href=""><font color="#222222"><u>LINK</u></font></a></font></center></td></tr></table></td></tr></table>	<table width="600" cellspacing="2" cellpadding="5" bgcolor="ffffff" border="0"><tbody><tr><td width="80" rowspan="4" bgcolor="#f2f2f2"><div align="right"><BR><lj user="user"><img src="http://i11.photobucket.com/albums/a165/akaltereego/valesco/btn/vrbv2d.png"><BR><BR><lj user="user"><BR><img src="http://i11.photobucket.com/albums/a165/akaltereego/valesco/btn/vrbv2d.png"></div></td> <td width="1" bgcolor="#67686e" align="top" rowspan="4"> </td></tr> <tr><th colspan="2" align="top"><font size="5" face="trebuchet MS"><i>❝Lorem ipsum dolor❞</i></font></th></tr> <tr><td width="50%" align="top"><font face="cambria" line-height="10"> <p align="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla placerat ornare odio. Integer sit amet odio mollis nisi rutrum vehicula. Vestibulum at odio eget ligula sollicitudin aliquet. Aenean posuere dui vel magna. Praesent ac pede at leo condimentum interdum. Fusce at enim. Vestibulum iaculis diam a purus. Aliquam velit arcu, porta non, feugiat eleifend, suscipit ac, odio. Curabitur gravida dolor ut ante. Maecenas dui. Sed aliquam lectus eu massa. </p></td> <td width="50%" align="top"><font face="cambria" line-height="10"><p align="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla placerat ornare odio. Integer sit amet odio mollis nisi rutrum vehicula. Vestibulum at odio eget ligula sollicitudin aliquet. Aenean posuere dui vel magna. Praesent ac pede at leo condimentum interdum. Fusce at enim. Vestibulum iaculis diam a purus. Aliquam velit arcu, porta non, feugiat eleifend, suscipit ac, odio. Curabitur gravida dolor ut ante. Maecenas dui. Sed aliquam lectus eu massa. </p></td></tr> <tr valign="top"><td colspan="2" align="top"><small><b>; </b><i>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</i>. <b>; </b><i>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</i>. </small> </td></tr></tbody></table>	<table width="620" bgcolor="#8D8D8D" cellpadding="10"><tr><td align="center"><table width="600" cellpadding="4" cellspacing="1" bgcolor="C7C7C7"><tr><th colspan="2" bgcolor="#f0f0f0"><B><FONT SIZE="5">SUPERTITLE</font></b></th></tr> <tr><th bgcolor="#FFFFFF" width="50%">Column ONE</th> <th bgcolor="#FFFFFF" width="50%">Column TWO</th></tr> <tr><th colspan="2" bgcolor="#f0f0f0"><font size="4"><B>TITLE</b></font> <font size="2"><i>subtittle</i></font></th></tr> <tr valign="top"><td bgcolor="#FFFFFF" width="50%" style="padding:10px;"><p align="justify"><font color="black"><i>Morbi in velit. Vivamus sagittis sapien sit amet odio. Morbi ipsum. Vestibulum luctus consequat enim. Fusce tempor auctor libero. Curabitur lorem. Sed et orci ut augue vulputate dignissim. Fusce lorem nibh, gravida ut, molestie volutpat, porttitor a, nisi. Mauris eget odio. Sed sapien. Integer imperdiet pharetra turpis. Maecenas dui. </i></font> </td> <td bgcolor="#FFFFFF" width="50%" style="padding:10px;"><p align="justify"><font color="black"><i>Morbi in velit. Vivamus sagittis sapien sit amet odio. Morbi ipsum. Vestibulum luctus consequat enim. Fusce tempor auctor libero. Curabitur lorem. Sed et orci ut augue vulputate dignissim. Fusce lorem nibh, gravida ut, molestie volutpat, porttitor a, nisi. Mauris eget odio. Sed sapien. Integer imperdiet pharetra turpis. Maecenas dui. </i></font> </td></tr></table></td></tr></table>
SEVEN.
<table width="645px" bgcolor="#CCCCCC" cellspacing="10px" style="border: 4px solid #000000"> <TR><TD><table width="625px" bgcolor="#000000" cellpadding="5px" cellspacing="1px"> <tr><td colspan="3"></td></tr> <tr bgcolor="#D0D0D0"><th colspan="3" align="center" style="border-bottom:4px solid #000000"><B><font size="4">Table Title</font></B></TH></TR> <tr bgcolor="#D0D0D0"><th align="center" bgcolor="#F0F0F0" width="33%">COL1</th> <th align="center" bgcolor="#F0F0F0" width="33%">COL2</th> <th align="center" bgcolor="#F0F0F0" width="33%">COL3</th></tr> <tr bgcolor="#848484"><td colspan="3"> </td></tr> <tr bgcolor="#D0D0D0"><td bgcolor="#F0F0F0" align="center" rowspan="2">Curabitur massa. Nunc gravida ultricies orci. <I>Nulla facilisi.</i> <B></b></td> <td bgcolor="#DD47AF"><div align="right"><font color="white" size=4"><B>Ut eu diam sed mauris</b></font></div> iaculis <B>elementum</b> <u><font color="#000088"></font>; </u> </td><td align="center" bgcolor="#F0F0F0"><img src="http://i11.photobucket.com/albums/a165/akaltereego/valesco/btn/vrbv2d.png"> What You Sayin'</td></tr> <tr bgcolor="#D0D0D0"><td bgcolor="#519CD2"><div align="right"><font color="white" size=4"><B>Ut eu diam sed mauris</b></font></div> iaculis <B>elementum</b> <u><font color="#000088"></font>; </u> </td><td align="center" bgcolor="#F0F0F0"><img src="http://i11.photobucket.com/albums/a165/akaltereego/valesco/btn/vrbv2d.png"> What You Sayin'</td></tr> <tr><td colspan="3"> </td></tr></table></td></tr></table>

( specfics )