Simple HTML Tables

[Nightwalker]

HTML Table Index


Basic Box
One Cell Table
Two Cell Table
Three Cell Table
On/Off Icon Ledgend
Side Table (Left)
Side Table (Right)
Side Table (Both)
Affilate Table
Affiliate Table with Text Box
Icon Legend
[urlhttp://joemaggio.proboards.com/index.cgi?action=display&board=staffboard&thread=20&page=1#41]Additional Information Box[/url]

---

Editing

Content	Areas where you are required to fill in content are red
Width	The overall width of the table is in green
Links	URLs such as links or images are in yellow

Place a link: <a href="URL">Text to Display</a>

Place an Image: <img src="Image URL" />

For an Image that is a Link: <a href="URL"><img src="Image URL" /></a>

Make something move: <marquee direction="down">Content to Move</marquee>

Directions: Up, Down, Left and Right

Marquee tricks:
<marquee direction="up" scrollamount="1" height="120" onmouseover=this.stop() onmouseout=this.start()>Content to move</marquee>

The speed is controlled by scrollamount and 1 is the lowest speed.


To add a scrollbar to a particular cell in the table, use something like this in the 'td' tag: <td width="20%" style="overflow: auto; height: 300px;">

[Nightwalker]

This is the simplest table


<table width="200px" cellpadding="4" cellspacing="1" align="center" class="bordercolor">
<tr>
<td width="100%" class="windowbg2" vAlign="top" align="center">
<font size=2>Contents of Box Here</font>
</td>
</tr>
</table>

[Nightwalker]

A very small table for putting something like a note to members in.

<table width="250px" cellpadding="4" cellspacing="1" align="center" class="bordercolor">
<tr>
<td class="titlebg" width="100%" colspan="2" align="center">
<font size=2><b>Table Title</B></font>
</td>
</tr>
<tr>
<td width="100%" class="windowbg2" vAlign="top" align="center">
<font size=2>Contents of Table Here</font>
</td>
</tr>
</table>

[Nightwalker]

Similar to the One Column table but with an extra column

<table width="92%" cellpadding="4" cellspacing="1" align="center" class="bordercolor">
<tr>
<td class="titlebg" width="100%" colspan="2" height="30" align="center">
<font size=2><b>Table Title</B></font>
</td>
</tr>
<tr>
<td width="50%" class="windowbg" vAlign="top">
<font size=2>Contents of Left Box</font>
</td>
<td width="50%" class="windowbg" vAlign="top">
<font size=2>Contents of Right Box</font>
</td>
</tr>
</table>

[Nightwalker]

Easily the Most Commonly used table

<table width="92%" cellpadding="4" cellspacing="1" align="center" class="bordercolor">
<tr>
<td class="titlebg" width="100%" colspan="3" height="30" align="center">
<font size=2><b>Table Title</B></font>
</td>
</tr>
<tr>
<td width="20%" class="windowbg2" vAlign="top">
<font size=2>Contents of Left Box</font>
</td>
<td width="60%" class="windowbg" vAlign="top">
<font size=2>Contents of Center Box</font>
</td>
<td width="20%" class="windowbg2" vAlign="top">
<font size=2>Contents of Right Box</font>
</td>
</tr>
</table>

[Nightwalker]

This is often used to show which icon represents new posts in a forum and which icon represents no new posts in a forum. Most commonly found in the main footer.


<table width="200px" cellpadding="4" cellspacing="1" align="center" class="bordercolor">
<tr>
<td class="titlebg" width="100%" colspan="2" align="center">
<font size=2><b>Icon Legend</B></font>
</td>
</tr>
<tr>
<td width="50%" class="windowbg" vAlign="top" align="center">
<font size=2>
<img src="proboards8.com/v4images/on.gif" alt="[/li][li]" />
<br />New Posts</font>
</td>
<td width="50%" class="windowbg" vAlign="top" align="center">
<font size=2>
<img src="proboards8.com/v4images/off.gif" alt="[ ]" />
<br />No New Posts</font>
</td>
</tr>
</table>

[Nightwalker]

This table adds a side menu to the left hand side of your forum.

Header Section

<table width="92%" cellpadding="0" cellspacing="1" align="center">
<tr>
<td width="15%" vAlign="top" align="center">
<br />
<br />
<table class="bordercolor" width="91%" cellpadding="4" cellspacing="1">
<tr>
<td class="titlebg" align="center" width="100%">
<font size=2>Menu</font>
</td>
</tr>
<tr>
<td class="windowbg" align="center">
<font size=2>Top Box Content</font>
</td>
</tr>
<tr>
<td class="windowbg2" align="center">
<font size=2>Middle Box Content</font>
</td>
</tr>
<tr>
<td class="windowbg" align="center">
<font size=2>Bottom Box Content</font>
</td>
</tr>
</table>
</td>
<td width="80%" align="center" vAlign="top">


Footer Section

</td>
</tr>
</table>

[Nightwalker]

This table adds a side menu to the right hand side of your forum.

Header Section

<table width="92%" cellpadding="0" cellspacing="1" align="center">
<tr>
<td width="80%" align="center" vAlign="top">


Footer Section

</td>
<td width="15%" vAlign="top" align="center">
<br />
<br />
<table class="bordercolor" width="92%" cellpadding="4" cellspacing="1">
<tr>
<td class="titlebg" align="center" width="100%">
<font size=2>Menu</font>
</td>
</tr>
<tr>
<td class="windowbg" align="center">
<font size=2>Top Box Content</font>
</td>
</tr>
<tr>
<td class="windowbg2" align="center">
<font size=2>Middle Box Content</font>
</td>
</tr>
<tr>
<td class="windowbg" align="center">
<font size=2>Bottom Box Content</font>
</td>
</tr>
</table>
</td>
</tr>
</table>

[Nightwalker]

This adds a side tables to both sides of your forum.

Header Section

<table width="92%" cellpadding="0" cellspacing="1" align="center">
<tr>
<td width="15%" vAlign="top" align="center">
<br />
<br />
<table class="bordercolor" width="92%" cellpadding="4" cellspacing="1">
<tr>
<td class="titlebg" align="center" width="100%">
<font size=2>Left Menu</font>
</td>
</tr>
<tr>
<td class="windowbg" align="center">
<font size=2>Left Top Box Content</font>
</td>
</tr>
<tr>
<td class="windowbg2" align="center">
<font size=2>Left Middle Box Content</font>
</td>
</tr>
<tr>
<td class="windowbg" align="center">
<font size=2>Left Bottom Box Content</font>
</td>
</tr>
</table>
</td>
<td width="60%" align="center" vAlign="top">


Footer Section

</td>
<td width="15%" vAlign="top" align="center">
<br />
<br />
<table class="bordercolor" width="92%" cellpadding="4" cellspacing="1">
<tr>
<td class="titlebg" align="center" width="100%">
<font size=2>Right Menu</font>
</td>
</tr>
<tr>
<td class="windowbg" align="center">
<font size=2>Right Top Box Content</font>
</td>
</tr>
<tr>
<td class="windowbg2" align="center">
<font size=2>Right Middle Box Content</font>
</td>
</tr>
<tr>
<td class="windowbg" align="center">
<font size=2>Right Bottom Box Content</font>
</td>
</tr>
</table>
</td>
</tr>
</table>

[Nightwalker]

This is a basic Affiliate Table. Usually found in the Main Footer


<table width='92%' cellspacing='1' cellpadding='4' class='bordercolor' align='center' style='position: relative; bottom: 14px;'>
<tr>
<td class='catbg' colspan='2'>
<font size='2'><b>Affiliates</b></font>
</td>
</tr>
<tr>
<td width='79%' class='windowbg2' valign='top'>
<marquee onmouseover="this.stop()" onmouseout="this.start()" direction="left" scrollamount="3">

Affiliate Banners Go Here(Go To Bottom For Code)

</marquee>
</td>
<td width='21%' valign='top' class='windowbg2' align='center'>
<img src="URL of Your MiniBanner" /><br />
<a href="URL to Thread/Board where you can affiliate">Click Here to Affiliate!</a>
</td>
</tr>
</table>



Then, the actual code other forums would like so that they can affiliate with you would be

<a href="URL to your Forum" target="_blank"><img src="URL to your Mini Banner" border="0" /></a>

[Nightwalker]

Same as the above code except with a text box which you can put your affiliation code into


<table width="92%" cellspacing='1' cellpadding='4' class='bordercolor' align='center' style='position: relative; bottom: 14px;'>
<tr>
<td class='catbg' colspan='2'>
<font size='2'><b>Affiliates</b></font>
</td>
</tr>
<tr>
<td width='74%' class='windowbg2' valign='top'>
<marquee onmouseover="this.stop()" onmouseout="this.start()" direction="left" scrollamount="3">

Affiliate Banners Go Here

</marquee>
</td>
<td width='26%' valign='top' class='windowbg2' align='center'>
<img src="URL of Your MiniBanner" />
<textarea rows='4' cols='15'>
<a href="Your Forum URL" target="_blank"><img src="URL of Your MiniBanner" alt="Your Forum Name" /></a>
</textarea>
</td>
</tr>
</table>

[Nightwalker]

This is often used to show which icons represent locked/stickied threads and which represet hot/very hot threads. Most commonly found in the global footer or indidual board footers.

<table cellpadding="4" cellspacing="1" width="300px" align="center" class="bordercolor">
<tr>
<td width="100%" class="titlebg" align="center" colspan="2">
<font size="2" class="titletext"><b>Icon Legend</b></font>
</td>
</tr>
<tr>
<td width="50%" class="windowbg">
<img src="s4.images.proboards.com/on.gif" /> - New Post
<br />
<img src="s4.images.proboards.com/locked.gif" /> - Locked Thread
<br />
<img src="s4.images.proboards.com/sticky.gif" /> - Sticky Thread
<br />
<img src="s4.images.proboards.com/hotthread.gif" /> - Hot Thread
</td>
<td width="50%" class="windowbg">
<img src="s4.images.proboards.com/off.gif" /> - Old Post
<br />
<img src="s4.images.proboards.com/stickylock.gif" /> - Sticky and <br /> Locked Thread
<br />
<img src="s4.images.proboards.com/veryhotthread.gif" /> - Very Hot Thread
</td>
</tr>
</table>

[Nightwalker]

Use this code in your headers or footers, whereever you want it to show.



<table border=0 width="92%" cellspacing="0" cellpadding="0" class="bordercolor" align="center" style="position: relative; bottom: 14px;">
<tr>
<td>
<table cellpadding="4" cellspacing="1" border="0" width="100%">
<tr>
<td class="catbg" colspan="2"> <font size="2" class="catbg"><b>Forum Information</b></font></td>
</tr>
<tr>
<td class="windowbg2" width="100%" valign="middle" align="center">
<font size="1">
<table width="98%" cellpadding="3" align="center">
<tr>
<td valign="top" align="left" width="60%">
Administrators - ENTER NAMES OF ADMINS HERE
<br>
Global Moderators - ENTER NAMES OF GLOBAL MODERATORS HERE
<br>
Moderators - ENTER NAMES OF MODERATORS HERE
</td>
<td valign="top" align="left" width="40%">
Total Boards - ENTER NUMBER OF BOARDS HERE
<br>
Total Categories - ENTER NUMBER OF CATEGORIES HERE
<br>
Page Hits - INSERT COUNTER CODE HERE
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="catbg" colspan="2"><font size="2" class="catbg"><b>Top Sites</b></font></td>
</tr>
<tr>
<td class="windowbg2" width="100%" valign="middle" align="center">
PUT TOP SITES CODE HERE
</td>
</tr>
<tr>
<td class="catbg" colspan="2"><font size="2" class="catbg"><b>Links</b></font></td>
</tr>
<tr>
<td class="windowbg2" width="100%" valign="middle" align="center">
PUT MINI BANNERS HERE
</td>
</tr>
</table>
</td>
</tr>
</table>



For linking Administrator, Global Moderator, or Moderator names to profiles, use this html:

<a href="url of profile" target="_blank">Name</a>

For the mini banners. use this:

<a href="url of link" target="_blank"><img src="url of mini banner" width="88" height="31" border="0" /></a>

repeat for each mini banner.