[How to] Create your own vBulletin tables

[|Norman|]

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:


(attachment)

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:


(attachment)

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:
• • 
  (attachment)

• Table class: tcat. Td class: alt2:
• • 
  (attachment)

More usefull question, now, could be: how do I do a table like the follow?


(attachment)

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%">
[B]<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>[/B]
<div style="text-align: center;">
New Table Title
</div>
</td>
[B]<tbody id="collapseobj_my_table" style="$vbcollapse[collapseobj_my_table]">[/B]
</tr>

<tr>

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

</tr>
</table>

Result:

1. 
   (attachment)
2. 
   (attachment)

With 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 on vB.org if you have more and specific questions.



Sorry for my bad english, I doing my best!


Best regards,
Norman
Web City Forum Online

http://www.web-city.it/