Header Table Tutorial

[Tessa]

This is the entire Code:

<script type="text/javascript">
<!--

/*
* Dynamically Tabbed Welcome Table v2
* Created By Jordan a.k.a. Triad
* support.proboards.com
*/

var DTT = {

selected:
{
id: "stats",
listItem: {}
},

$: function(id)
{
if(id)
return document.getElementById(id);
return false;
},

init: function()
{
var tCookie = this.getCookie();

if(tCookie.tab)
{
this.toggleTab(tCookie.tab);
}

if(tCookie.show == "0")
{
this.$("pro_collapse").style.display = "none";
}
},

setCookie: function(tab, show)
{
var tTab = "";
var tShow = "";
var tCookie = this.getCookie();

if(tab)
tTab = tab;
else
tTab = (tCookie.tab) ? tCookie.tab : this.selected.id;

if(show)
tShow = show;
else
tShow = (tCookie.show) ? tCookie.show : "1";

document.cookie = "DTTData=tab=" + encodeURI(tTab) + "|show=" + encodeURI(tShow) + ";expires=Sat, 20 Jan 3000 12:12:12 UTC; path=/;";
},

getCookie: function()
{
if(document.cookie.match(new RegExp("DTTData=(.+?)($|","gi")))
{
var data = decodeURI(RegExp.$1);

return {
tab: data.split("=")[1].split("|")[0],
show: data.split("=")[2]
};
}

return false;
},

toggleTab: function(id)
{
var newID = id.substr(4);

if(this.selected.id != newID && this.$(id))
{
if(this.$("nav_" + this.selected.id))
{
this.$("nav_" + this.selected.id).className = "welcometablebg";
this.$("pro_" + this.selected.id).style.display = "none";
}

this.selected.id = newID;
this.$("nav_" + this.selected.id).className = "welcometablehover";
this.$("pro_" + this.selected.id).style.display = "";

this.setCookie(id, false);
}
},

toggleTable: function()
{
if(this.$("pro_collapse").style.display == "")
{
this.$("pro_collapse").style.display = "none";
this.setCookie(false, "0");
}
else
{
this.$("pro_collapse").style.display = "";
this.setCookie(false, "1");
}
},

toggleListItem: function(id, name)
{
if(this.selected.listItem[id])
{
if(this.selected.listItem[id].name == name)
{
if(this.selected.listItem[id].object.style.display == "")
{
this.selected.listItem[id].object.style.display = "none";
this.$("pro_" + id + "_default").style.display = "";
}
else
{
this.$("pro_" + id + "_default").style.display = "none";
this.selected.listItem[id].object.style.display = "";
}
return true;
}
else
this.selected.listItem[id].object.style.display = "none";
}

this.selected.listItem[id] = {
name: name,
object: this.$("pro_" + id + "_" + name)
};

this.$("pro_" + id + "_default").style.display = "none";
this.selected.listItem[id].object.style.display = "";
}
};

//-->
</script>

<style type="text/css"><!--

.welcometablebg {
background-color: #dadada;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
}

.welcometablehover {
background-color: #efefef;
border-bottom: 1px solid #efefef;
border-right: 1px solid #000000;
}

#pro_tabs td, #pro_sidebar td {
font-size: 10pt;
font-weight: bold;
text-align: center;
}

#pro_tabs td {
width: 50%;
cursor: pointer;
}

#pro_content {
font-size: 10pt;
padding: 10px;
}

#pro_threads {
font-size: 10pt;
font-weight: bold;
line-height: 1.5em;
text-align: left;
}

--></style>

<table width="92%" align="center" cellspacing="1" cellpadding="0" class="bordercolor">
<tr>
<td class="titlebg" align="center" colspan="2" style="padding: 4px; cursor: pointer;" onclick="DTT.toggleTable();">
<font size="2">
The Pure Bloods
</font>
</td>
</tr>
<tr id="pro_collapse" style="display:;">
<td width="70%" align="center" class="windowbg" valign="top" height="100%">
<table width="100%" cellspacing="0" cellpadding="4">
<tr id="pro_tabs">
<td class="welcometablehover" onclick="DTT.toggleTab(this.id);" id="nav_stats">Stats</td>
<td class="welcometablebg" onclick="DTT.toggleTab(this.id);" id="nav_ranks" style="border-right: none;">Ranks</td>
</tr>
<tr>
<td class="windowbg" id="pro_content" colspan="2">
<div id="pro_stats">
<center><b>Member Count</b><br>
Males:
<br> Females:
<br>
Pups:
<br>
Pregnant Mothers:
<br>
Elders:
<br>

</center>
<br><br>
<center><b>Random Event</b><br>
To be posted by Mother Nature
</center>

</div>
<div id="pro_ranks" style="display: none;">
<p style="text-align: center; font-weight: bold; margin: 10px;">
<a href="Javascript:void(0);" onclick="DTT.toggleListItem('ranks','firstalpha')"><font size="2">Chase Devilo</font></a> ::
<a href="Javascript:void(0);" onclick="DTT.toggleListItem('ranks','secondincommand')"><font size="2">Second Alpha</font></a>
</p>
<div id="pro_ranks_default" style="text-align: center; margin-top: 35px; display:;">
Select a pack member to gain their scent.
</div>
<div id="pro_ranks_firstalpha" style="display: none;">
<p> <center><br><a href="http://theforsakenisles.proboards.com/index.cgi?action=viewprofile&user=admin" target="_blank"><img src="http://i509.photobucket.com/albums/s333/Busstuck_McGee/Krystal___5_by_EquestrianStock-2.jpg" border="0" alt="Photobucket"></a></center></p>
<p><b>Pack Rank:</b> First Alpha</p>
<p><b><i>OOC RPer Name</i>:</b> Tessa</p>
<div style="margin-left: 10px;">
<p>My name is Chase. I am the head Alpha of this pack. You learn that right quick, and we'll get along just fine. Aye?</p>
</div>
</div>
<div id="pro_ranks_secondincommand" style="display: none;">
<p>image goes here</p>
<p><b>Pack Rank:</b> Second In command </p>
<p><b><i>Your Site Name</i>:</b> TBA</p>
<div style="margin-left: 10px;">
<p>The Second Alpha is second in command. If chase is killed, this canine will take his place.</p>
</div>
</div>
</div>
</td>
</tr>
</table>
</td>
<td width="30%" class="windowbg" valign="top" height="100%">
<table width="100%" cellspacing="0" cellpadding="4">
<tr id="pro_sidebar">
<td align="center" class="welcometablebg" style="border-right: none;">
Important Links
</td>
</tr>
<tr>
<td class="windowbg" valign="top">
<div id="pro_threads">
<a href="http://theforsakenisles.proboards.com">Home already?</a>
<div style="margin: 5px 0px 0px 20px;">
- <a href="/">Link One</a><br />
- <a href="/">Link Two</a><br />
- <a href="/">Link Three</a><br />
- <a href="/">Link Four</a><br />
- <a href="/">Link Five</a><br />
- <a href="/">Link Six</a>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>


<script type="text/javascript">
<!--

DTT.init();

//-->
</script>


What YOU need to worry about are the red highlighted areas.

[Tessa]

For this Part:

Males:
<br> Females:
<br>
Pups:
<br>
Pregnant Mothers:
<br>
Elders:
<br>

You just add a number underneath by putting <br> (break) on either side of the number. So it would look like this:

Males:
<br> 4<br>
Females:
<br>
Pups:
<br>
Pregnant Mothers:
<br>
Elders:
<br>

However in the code, as you can see above, it will be all over the place, but as long as you put <br> on either side of the number it should work all the same.

[Tessa]

This one looks more difficult, but really is simpler. Just fill in the fields. (you can find these sections by usinf CTRL+F and searching for key words like Pack Rank and things):

<p> <center><br><a href="http://theforsakenisles.proboards.com/index.cgi?action=viewprofile&user=admin" target="_blank"><img src="http://i509.photobucket.com/albums/s333/Busstuck_McGee/Krystal___5_by_EquestrianStock-2.jpg" border="0" alt="Photobucket"></a></center></p>
<p><b>Pack Rank:</b> First Alpha</p>
<p><b><i>OOC RPer Name</i>:</b> Tessa</p>
<div style="margin-left: 10px;">
<p>My name is Chase. I am the head Alpha of this pack. You learn that right quick, and we'll get along just fine. Aye?</p>
</div>
</div>
<div id="pro_ranks_secondincommand" style="display: none;">

<p>image goes here</p>
<p><b>Pack Rank:</b> Second In command </p>
<p><b><i>Your Site Name</i>:</b> TBA</p>
<div style="margin-left: 10px;">
<p>The Second Alpha is second in command. If chase is killed, this canine will take his place.</p>





To add images you must put the image code as such:

<img src="image url here">

To make the image a link as well you must do this:

<a href="url"><img src="image url here"></a>

[Tessa]

This code is even simpler. Just remove these: / from <br/> and <a href= "/">


- <a href="/">Link One</a><br />
- <a href="/">Link Two</a><br />
- <a href="/">Link Three</a><br />
- <a href="/">Link Four</a><br />
- <a href="/">Link Five</a><br />
- <a href="/">Link Six</a>
</div>

So it LOOKs like:


- <a href="url">Joining (or whatever you want the link to say)</a><br >
- <a href="url">Link Two</a><br >
- <a href="url">Link Three</a><br >
- <a href="url">Link Four</a><br >
- <a href="url">Link Five</a><br >
- <a href="url">Link Six</a>

[Tessa]

generate your own!