|
 Author | Topic: Index Of HTML Tables [2/03/09] (Read 274,709 times) |
Ross
Part of the Furniture
Beware the ever changing head
member is offline
If a tree falls in the forest, do the other tress laugh at it?
![[homepage]](http://s4.images.proboards.com/buttons/www_sm.gif)
Joined: Nov 2004
Gender: Male 
Posts: 19,034
Location: Surrey, UK
|  | Index Of HTML Tables [2/03/09]
« Thread Started on Oct 26, 2005, 1:25pm » | |
Index of Tables
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
|
Free Image Randomizers
Website Hosting by Big Wet Fish |
|
Ross
Part of the Furniture
Beware the ever changing head
member is offline
If a tree falls in the forest, do the other tress laugh at it?
Joined: Nov 2004
Gender: Male
Posts: 19,034
Location: Surrey, UK
| | Three Column Table
« Reply #1 on Oct 26, 2005, 1:25pm » | |
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>
Preview: Click Here
|
Free Image Randomizers
Website Hosting by Big Wet Fish |
|
Ross
Part of the Furniture
Beware the ever changing head
member is offline
If a tree falls in the forest, do the other tress laugh at it?
Joined: Nov 2004
Gender: Male
Posts: 19,034
Location: Surrey, UK
| | Two Column Table
« Reply #2 on Oct 26, 2005, 1:25pm » | |
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">
<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>
Preview: Click Here
|
Free Image Randomizers
Website Hosting by Big Wet Fish |
|
Ross
Part of the Furniture
Beware the ever changing head
member is offline
If a tree falls in the forest, do the other tress laugh at it?
Joined: Nov 2004
Gender: Male
Posts: 19,034
Location: Surrey, UK
| | On/Off Icon Legend
« Reply #3 on Oct 26, 2005, 1:26pm » | |
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="http://proboards8.com/v4images/on.gif" alt="[*]" />
<br />New Posts</font>
</td>
<td width="50%" class="windowbg" vAlign="top" align="center">
<font size=2>
<img src="http://proboards8.com/v4images/off.gif" alt="[ ]" />
<br />No New Posts</font>
</td>
</tr>
</table>
Preview: Click Here
|
Free Image Randomizers
Website Hosting by Big Wet Fish |
|
Ross
Part of the Furniture
Beware the ever changing head
member is offline
If a tree falls in the forest, do the other tress laugh at it?
Joined: Nov 2004
Gender: Male
Posts: 19,034
Location: Surrey, UK
| | Single Cell Table
« Reply #4 on Oct 26, 2005, 1:26pm » | |
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>
Preview: Click Here
|
Free Image Randomizers
Website Hosting by Big Wet Fish |
|
Ross
Part of the Furniture
Beware the ever changing head
member is offline
If a tree falls in the forest, do the other tress laugh at it?
Joined: Nov 2004
Gender: Male
Posts: 19,034
Location: Surrey, UK
| | Basic Box
« Reply #5 on Oct 26, 2005, 1:27pm » | |
The simplest table possible
<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>
Preview: Click Here
|
Free Image Randomizers
Website Hosting by Big Wet Fish |
|
Ross
Part of the Furniture
Beware the ever changing head
member is offline
If a tree falls in the forest, do the other tress laugh at it?
Joined: Nov 2004
Gender: Male
Posts: 19,034
Location: Surrey, UK
| | Side Menu (Left)
« Reply #6 on Oct 26, 2005, 1:27pm » | |
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>
Preview: Click Here
|
Free Image Randomizers
Website Hosting by Big Wet Fish |
|
Ross
Part of the Furniture
Beware the ever changing head
member is offline
If a tree falls in the forest, do the other tress laugh at it?
Joined: Nov 2004
Gender: Male
Posts: 19,034
Location: Surrey, UK
| | Side Menu (Right)
« Reply #7 on Oct 26, 2005, 1:27pm » | |
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
|
Free Image Randomizers
Website Hosting by Big Wet Fish |
|
Ross
Part of the Furniture
Beware the ever changing head
member is offline
If a tree falls in the forest, do the other tress laugh at it?
Joined: Nov 2004
Gender: Male
Posts: 19,034
Location: Surrey, UK
| | Side Menu (Both)
« Reply #8 on Oct 26, 2005, 1:28pm » | |
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%">
<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>
Preview: Click Here
|
Free Image Randomizers
Website Hosting by Big Wet Fish |
|
Ross
Part of the Furniture
Beware the ever changing head
member is offline
If a tree falls in the forest, do the other tress laugh at it?
Joined: Nov 2004
Gender: Male
Posts: 19,034
Location: Surrey, UK
| | Affiliate Table
« Reply #9 on Nov 7, 2005, 9:39am » | |
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
</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>
|
Free Image Randomizers
Website Hosting by Big Wet Fish |
|
Ross
Part of the Furniture
Beware the ever changing head
member is offline
If a tree falls in the forest, do the other tress laugh at it?
Joined: Nov 2004
Gender: Male
Posts: 19,034
Location: Surrey, UK
| | Affiliate Table (With Text Box)
« Reply #10 on Nov 25, 2005, 2:57pm » | |
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>
|
Free Image Randomizers
Website Hosting by Big Wet Fish |
|
Ross
Part of the Furniture
Beware the ever changing head
member is offline
If a tree falls in the forest, do the other tress laugh at it?
Joined: Nov 2004
Gender: Male
Posts: 19,034
Location: Surrey, UK
| | Icon Legend
« Reply #11 on Jul 21, 2007, 5:44pm » | |
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="http://s4.images.proboards.com/on.gif" /> - New Post
<br />
<img src="http://s4.images.proboards.com/locked.gif" /> - Locked Thread
<br />
<img src="http://s4.images.proboards.com/sticky.gif" /> - Sticky Thread
<br />
<img src="http://s4.images.proboards.com/hotthread.gif" /> - Hot Thread
</td>
<td width="50%" class="windowbg">
<img src="http://s4.images.proboards.com/off.gif" /> - Old Post
<br />
<img src="http://s4.images.proboards.com/stickylock.gif" /> - Sticky and <br /> Locked Thread
<br />
<img src="http://s4.images.proboards.com/veryhotthread.gif" /> - Very Hot Thread
</td>
</tr>
</table>
Preview: Click Here
|
Free Image Randomizers
Website Hosting by Big Wet Fish |
|
|
![[Home]](http://s4.images.proboards.com/menu/home.gif)
![[Help]](http://s4.images.proboards.com/menu/help.gif)
![[Search]](http://s4.images.proboards.com/menu/search.gif)
![[Login]](http://s4.images.proboards.com/menu/login.gif)
![[Register]](http://s4.images.proboards.com/menu/register.gif)
![[Search This Thread]](http://s4.images.proboards.com/search2.gif)
![[Send Topic To Friend]](http://s4.images.proboards.com/buttons/sendtopic.gif)
![[Print]](http://s4.images.proboards.com/buttons/print.gif)
![[image]](http://s3.images.proboards.com/new.gif)
Logged