Index Of HTML Tables [2/03/09]

[Ross]

Index of Tables

• Dynamically Tabbed Table (Now has a working generator.)
  
  
• Smangii's Side Tables
  
  
• Three Column Table
  
  
• Two Column Table
  
  
• On/Off Icon Legend Table
  
  
• Posts/Threads Icon Legend Table
  
  
• Single Cell Table
  
  
• Basic Box
  
  
• Side Menu (Left)
  
  
• Side Menu (Right)
  
  
• Side Menu (Both)
  
  
• Affiliate Table
  
  
• Affiliate Table (With Text Box)
  
  
• Icon Legend
  

---

Positioning

The majority of these tables can be positioned anywhere you like. Header or Footer. Main or Board. The ones that require special positioning, will say so in the post.

---

Editing

All of these tables are free to be edited in any way. To help you find the parts that usually require editing, they have been color coded.

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

There are a number of types of content which can be used in the table, in fact you can use almost any HTML coding. Here are some of the most frequently requested tags:

To place a link use: <a href="URL">Text to Display</a>

To place an image use: <img src="Image URL" />

To use an image as a link, use: <a href="URL"><img src="Image URL" /></a>

To make something move use: <marquee direction="down">Content to Move</marquee>
Where the purple is the direction (up, down, left, right)

More marquee tricks
<marquee direction="up" scrollamount="1" height="120" onmouseover=this.stop() onmouseout=this.start()>Content to move</marquee>
Speed is controlled by 'scrollamount' 1 is slowest
this one will stop when you put your mouse over.

If you wish to start a new line or leave a blank line, just use: <br />

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;">

---

Useful Links

Frufrus Table Generator

Other Affiliate Codes

All Seeing Eyes Table Forum

[Ross]

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">
<strong>Table Title</strong>
</td>
</tr>
<tr>
<td width="20%" class="windowbg" vAlign="top">
Contents of Left Box
</td>
<td width="60%" class="windowbg" vAlign="top">
Contents of Center Box
</td>
<td width="20%" class="windowbg" vAlign="top">
Contents of Right Box
</td>
</tr>
</table>


Preview: Click Here

[Ross]

Similar to the Three Column table but with only two columns

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

Preview: Click Here

[Ross]

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">
<strong>Icon Legend</strong>
</td>
</tr>
<tr>
<td width="50%" class="windowbg" vAlign="top" align="center">
<img src="http://proboards8.com/v4images/on.gif" alt="[/li][li]" />
<br />New Posts
</td>
<td width="50%" class="windowbg" vAlign="top" align="center">
<img src="http://proboards8.com/v4images/off.gif" alt="[ ]" />
<br />No New Posts
</td>
</tr>
</table>[/size]


Preview: Click Here

[Ross]

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%" align="center">
<strong>Table Title</strong>
</td>
</tr>
<tr>
<td width="100%" class="windowbg2" vAlign="top" align="center">
Contents of Table Here
</td>
</tr>
</table>


Preview: Click Here

[Ross]

The simplest table possible


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


Preview: Click Here

[Ross]

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%">
Menu
</td>
</tr>
<tr>
<td class="windowbg" align="center">
Top Box Content
</td>
</tr>
<tr>
<td class="windowbg2" align="center">
<font size=2>Middle Box Content</font>
</td>
</tr>
<tr>
<td class="windowbg" align="center">
Bottom Box Content
</td>
</tr>
</table>
</td>
<td width="80%" align="center" vAlign="top">


Footer Section

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


Preview: Click Here

[Ross]

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>


Preview: Click Here

[Ross]

This table adds a side menu 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%">
Left Menu
</td>
</tr>
<tr>
<td class="windowbg" align="center">
Left Top Box Content
</td>
</tr>
<tr>
<td class="windowbg" align="center">
Left Middle Box Content
</td>
</tr>
<tr>
<td class="windowbg" align="center">
Left Bottom Box Content
</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%">
Right Menu
</td>
</tr>
<tr>
<td class="windowbg" align="center">
Right Top Box Content
</td>
</tr>
<tr>
<td class="windowbg" align="center">
Right Middle Box Content
</td>
</tr>
<tr>
<td class="windowbg" align="center">
Right Bottom Box Content
</td>
</tr>
</table>
</td>
</tr>
</table>


Preview: Click Here

[Ross]

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


<table width="92%" cellspacing="1" cellpadding="4" class="bordercolor" align="center">
<tr>
<td class="catbg" colspan="2">
<strong>Affiliates</strong>
</td>
</tr>
<tr>
<td width="79%" class="windowbg" valign="top">
<marquee onmouseover="this.stop()" onmouseout="this.start()" direction="left" scrollamount="3">

Affiliate Banners Go Here

</marquee>
</td>
<td width="21%" valign="top" class="windowbg" align="center">
<img src="URL of Your MiniBanner" alt="" /><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" alt="" /></a>

[Ross]

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">
<strong>Affiliates</strong>
</td>
</tr>
<tr>
<td width="74%" class="windowbg" 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="windowbg" align="center">
<img src="URL of Your MiniBanner" alt="" />
<textarea rows="4" cols="15">
<a href="Your Forum URL" target="_blank"><img src="URL of Your MiniBanner" alt="Your Forum Name" border="0" /></a>
</textarea>
</td>
</tr>
</table>

[Ross]

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">
<strong>Icon Legend</strong>
</td>
</tr>
<tr>
<td width="50%" class="windowbg">
<img src="http://s4.images.proboards.com/on.gif" alt="" /> - New Post
<br />
<img src="http://s4.images.proboards.com/locked.gif" alt="" /> - Locked Thread
<br />
<img src="http://s4.images.proboards.com/sticky.gif" alt="" /> - Sticky Thread
<br />
<img src="http://s4.images.proboards.com/hotthread.gif" alt="" /> - Hot Thread
</td>
<td width="50%" class="windowbg">
<img src="http://s4.images.proboards.com/off.gif" alt="" /> - Old Post
<br />
<img src="http://s4.images.proboards.com/stickylock.gif" alt="" /> - Sticky and <br /> Locked Thread
<br />
<img src="http://s4.images.proboards.com/veryhotthread.gif" alt="" /> - Very Hot Thread
</td>
</tr>
</table>


Preview: Click Here