Create your own vBulletin tables

[Triky]

Hi, this simple tutorial will tech you how to create a table(s) in your vBulletin forum. Step by step you will learn how to use tables, how to edit them and how to adjust them!
Ok, first question: what's a vBulletin table? You must know that vBulletin is mostly composed by tables. A vBulletin table could be this, for example:


64666

Code used:

<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr>
<td class="alt1" width="100%">
<div class="smallfont">Hi, this is a vBulletin table. Table class: <strong>tborder</strong>. Td class: <strong>alt1</strong>. Border: 0. Width: 100%. Align: center.</div>
</td>
</tr>
</table> And now, we can try to change the table class. As you can see, now it's tborder. Let's change it to tcat!

<table class="tcat" ... Result:


64667

Using our vBulletin CSS specifications, we can change the style of our new or existing tables.
Now we'll change the Td class, using the tborder table class and the tcat table class.
Table class: tborder. Td class: alt1:
64666
Table class: tcat. Td class: alt2:
64668More usefull question, now, could be: how do I do a table like the follow?


64669

Simple! Using a Tr. In above examples, we was using just one Tr. Using two Tr, we can do a table like that.

Here the code I've used:

<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr>

<td class="tcat" width="100%">
<div style="text-align: center;">
New Table Title
</div>
</td>

</tr>

<tr>

<td class="alt1" width="100%">
<div class="smallfont">
This is a vBulletin table. Table class: <strong>tborder</strong>. 1st Td class: <strong>tcat</strong>. 1st Td text align: <strong>center</strong>. Second Td class: <strong>alt1</strong>. Border: 0. Width: 100%. Align: center.
</div>
</td>

</tr>
</table> Table class: tborder. 1st Td class: tcat. 1st Td text align: center. Second Td class: alt1. Border: 0. Width: 100%. Align: center.

You could want to have a collapsible vBulletin table. It's simple.
This is the code you're searching:

<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('my_table')"><img id="collapseimg_my_table" src="$stylevar[imgdir_button]/collapse_tcat$vbcollapse[collapseimg_my_table].gif" alt="" border="0" /></a>

<tbody id="collapseobj_my_table" style="$vbcollapse[collapseobj_my_table]"> "Where should I put it?" In your first table Td, usually. Using codes we have used as far as now..

<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr>

<td class="tcat" width="100%">
<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('my_table')"><img id="collapseimg_my_table" src="$stylevar[imgdir_button]/collapse_tcat$vbcollapse[collapseimg_my_table].gif" alt="" border="0" /></a>
<div style="text-align: center;">
New Table Title
</div>
</td>
<tbody id="collapseobj_my_table" style="$vbcollapse[collapseobj_my_table]">
</tr>

<tr>

<td class="alt1" width="100%">
<div class="smallfont">
[snip]
</div>
</td>

</tr>
</table> Result:
64670
64671With tables you can do what you want! vBulletin is a big main table, remember. I hope you've appreciated this little tutorial. Let me know in this thread if you have more and specific questions.


Sorry for my bad english, I doing my best!


Best regards,
Norman

http://www.klayz.com/
http://www.klayz.com/community/

[kaptanblack]

Thanks.. ;)

[Antivirus]

nice job triky!

[Triky]

Glad to help you. :)

[Keesa]

Hi,

Can you tell me which template I would amend to get the table like you have shown it in the last example?

Thanks!

[Triky]

It's on the navbar template. :)

[kiril_cvetkov]

Nice article ;)

[valdet]

thanks for your contribution triky.

[Triky]

If (and when) I can, I do it. :p

[Martell]

Thanks for useful clause.

[Brandon Sheley]

good tut :)

[Snake]

What a great and useful article! Thank you very much. :)

[AUtigers350z]

Thanks for the write up! Great job :D

[Jase2]

Thanks, great article!

Regards Jason :)

[Triky]

Thank you. ;)

[Demon Child]

i know this is a old topic.. but can i put this table code inside of a forum title/description block... i want a fixed sized gradient that won't repeat all over the forum.. i just want it in that area

[Triky]

Hi Demon Child, can you explain your request with an image, please?

[sdavis2702]

Awesome.... saved to my favorites. My imagination is flowing now :)

[mmoore5553]

i know this is older but is it possible to make a table and have it cut in halfs ..i can put a heading on one ..free tutorials and on the second new tutorials and then post pictures and comments about them in there and link it ?

[mmoore5553]

thanks but i finally figured it out