Go Back   vb.org Archive > vBulletin Article Depository > Read An Article > vBulletin 3 Articles
Reload this Page Create your own vBulletin tables
FAQ Community Calendar Today's Posts Search

Reply
Page 2 of 2 1 2
 
Thread Tools
Create your own vBulletin tables
Triky's Avatar
Triky
Join Date: Mar 2007
Posts: 728

Here on vB.org I was Klaymen TK/TM, Mr Pink, and now I'm Triky. I'm a beginner, so I need to know, I love knowledge, and I want to know all about vBulletin coding. Lol.

[Italy]
Show Printable Version Email this Page Subscription
Triky Triky is offline 05-23-2007, 10:00 PM
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.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:
  1. Attachment 64670
  2. Attachment 64671
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/
Reply With Quote
  #12  
Old 12-13-2007, 12:42 AM
Brandon Sheley's Avatar
Brandon Sheley Brandon Sheley is offline
 
Join Date: Mar 2005
Location: Google Kansas
Posts: 4,678
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
good tut
Reply With Quote
  #13  
Old 01-18-2008, 07:16 PM
Snake's Avatar
Snake Snake is offline
 
Join Date: Mar 2005
Location: Cleveland, OH
Posts: 3,832
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
What a great and useful article! Thank you very much.
Reply With Quote
  #14  
Old 02-22-2008, 04:05 AM
AUtigers350z AUtigers350z is offline
 
Join Date: Feb 2008
Posts: 11
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Thanks for the write up! Great job
Reply With Quote
  #15  
Old 02-26-2008, 09:39 AM
Jase2 Jase2 is offline
 
Join Date: Dec 2007
Location: USA
Posts: 1,575
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Thanks, great article!

Regards Jason
Reply With Quote
  #16  
Old 02-26-2008, 11:29 AM
Triky's Avatar
Triky Triky is offline
 
Join Date: Mar 2007
Location: [Italy]
Posts: 728
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Thank you.
Reply With Quote
  #17  
Old 03-26-2008, 08:27 PM
Demon Child Demon Child is offline
 
Join Date: May 2007
Posts: 80
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
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
Reply With Quote
  #18  
Old 03-30-2008, 05:42 PM
Triky's Avatar
Triky Triky is offline
 
Join Date: Mar 2007
Location: [Italy]
Posts: 728
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Hi Demon Child, can you explain your request with an image, please?
Reply With Quote
  #19  
Old 04-12-2008, 12:35 PM
sdavis2702 sdavis2702 is offline
 
Join Date: Apr 2008
Posts: 116
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Awesome.... saved to my favorites. My imagination is flowing now
Reply With Quote
  #20  
Old 09-08-2008, 11:31 AM
mmoore5553 mmoore5553 is offline
 
Join Date: Aug 2008
Posts: 530
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
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 ?
Reply With Quote
  #21  
Old 11-23-2008, 11:38 PM
mmoore5553 mmoore5553 is offline
 
Join Date: Aug 2008
Posts: 530
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
thanks but i finally figured it out
Reply With Quote
Reply
Page 2 of 2 1 2

« Previous Thread | Next Thread »

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT. The time now is 06:36 PM.

Contact Us - Archive - Top

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.04498 seconds
  • Memory Usage 2,326KB
  • Queries Executed 28 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (2)bbcode_code
  • (3)bbcode_html
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_article
  • (1)navbar
  • (4)navbar_link
  • (120)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (1)pagenav_pagelink
  • (11)post_thanks_box
  • (11)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (11)post_thanks_postbit_info
  • (10)postbit
  • (11)postbit_onlinestatus
  • (11)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 
Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.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/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • fetch_musername
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete