vb.org Archive - Create your own vBulletin tables

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 64666

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:

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

Table class: tcat. Td class: alt2:
Attachment 64668

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

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

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:

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/

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01765 seconds Memory Usage 1,745KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (2)bbcode_code_printable (3)bbcode_html_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (10)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: