vBulletin LTS

Create your own vBulletin tables

by Triky 24 May 2007

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:

&d=1180021734" rel="Lightbox_1253869" id="attachment64666

Code used:

HTML Code:

 <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!

Code:

 <table class="tcat" ...

Result:

&d=1180021734" rel="Lightbox_1253869" id="attachment64667

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:
&d=1180021734" rel="Lightbox_1253869" id="attachment64666

Table class: tcat. Td class: alt2:
&d=1180021734" rel="Lightbox_1253869" id="attachment64668

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

&d=1180021734" rel="Lightbox_1253869" id="attachment64669

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:

HTML Code:

 <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:

HTML Code:

 <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..

Code:

 <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:

&d=1180021734" rel="Lightbox_1253869" id="attachment64670
&d=1180021754" rel="Lightbox_1253869" id="attachment64671

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 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/

vblts.ru supports vBulletin®, 2022-2024