[Tutorial] Creating Table BBCodes

New BBCodes, tips and tricks, hacks and MODs for the BBCode system

[Tutorial] Creating Table BBCodes

Postby Highway of Life » 05 Aug 2006, 03:32

The following tutorial will lead you through the process of creating a Table BBCode that will match both subSilver2 AND prosilver styles.
We are going to make a BBCode table look like this:
This is a header
This is the left cellThis is the right cell
This is another rowThis is the second cell


The first thing we need to do is make sure it looks nice in prosilver, to do that, we need to use the corners-top/bottom and the inner classes along with a pair of Divs and spans.
Here is what prosilver uses everywhere:
Code: Select all
<div class="some class names">
    <
div class="inner">
        <
span class="corners-top"><span></span></span>
        
CONTENT
        
<span class="corners-bottom"><span></span></span>
    </
div>
</
div>    
So we first create a "Corners" BBCode:
Code: Select all
[corners={TEXT1}]{TEXT2}[/corners]

HTML Replacement
Code: Select all
<div class="{TEXT1}">
    <
div class="inner">
        <
span class="corners-top"><span></span></span>
        {
TEXT2}
        <
span class="corners-bottom"><span></span></span>
    </
div>
</
div>    


Now create the table... prosilver generally uses "table1" for the tables, and subSilver2 users tablebg, so we use both:
Code: Select all
[table={TEXT1}]{TEXT2}[/table]

HTML Replacement
Code: Select all
<table class="{TEXT1}" cellspacing="1" width="100%">
{
TEXT2}
</
table>    


We need some rows:
Code: Select all
[tr={TEXT1}]{TEXT2}[/tr]

HTML Replacement:
Code: Select all
<tr class="{TEXT1}">
{
TEXT2}
</
tr>    


Code: Select all
[td={NUMBER},{TEXT1}]{TEXT2}[/td]
Number MUST be specified. TEXT1 (class) is optional, the comma following the NUMBER is *required*.
HTML Replacement:
Code: Select all
<td class="{TEXT1}" colspan="{NUMBER}">{TEXT2}</td>    


Code: Select all
[th={NUMBER}]{TEXT}[/th]
Number MUST be specified.
HTML Replacement:
Code: Select all
<th colspan="{NUMBER}">{TEXT}</th>    


So now an the above example looks like this:
This is a header
This is the left cellThis is the right cell
This is another rowThis is the second cell

Notice how we took out any newlines between the BBCodes, this is so that it stays where you put it, as each return (newline) turns into a break, which can make a table move to the bottom of your page.
Code: Select all
[corners=forumbg forumbg-table][table=tablebg table1][tr=][th=2]This is a header[/th][/tr][tr=bg1][td=1,]This is the left cell[/td][td=1,]This is the right cell[/td][/tr][tr=bg2][td=1,]This is another row[/td][td=1,]This is the second cell[/td][/tr][/table][/corners]

This is pretty good for a basic table, but we don?t really like the look of the header, so we?ll add the <thead> tag, and the <tbody> for the heck of it -- okay, not really for the "heck" of it, but the border color. ;)
Code: Select all
[thead]{TEXT}[/thead]
Code: Select all
<thead>{TEXT}</thead>  


Code: Select all
[tbody]{TEXT}[/tbody]
Code: Select all
<tbody>{TEXT}</tbody>  


Now it looks like this:
This is a header
This is the left cellThis is the right cell
This is another rowThis is the second cell

Much better!
Code: Select all
[corners=forumbg forumbg-table][table=tablebg table1][thead][tr=][th=2]This is a header[/th][/tr][/thead][tbody][tr=bg1][td=1,]This is the left cell[/td][td=1,]This is the right cell[/td][/tr][tr=bg2][td=1,]This is another row[/td][td=1,]This is the second cell[/td][/tr][/tbody][/table][/corners]

Good luck!
Watch out! I might do a code wheelie!

User avatar
Highway of Life    
STG Jedi Master
STG Jedi Master
 
Posts: 10458
Joined: 08 May 2006, 05:23
Location: Beware of Programmers carrying screwdrivers
Gender: Male
phpBB Knowledge: 10


Re: [Tutorial] Creating Table BBCodes

Postby Highway of Life » 05 Aug 2006, 03:58

Since using styles from the default stylesheet might trouble you a little bit, trust me, it is a hurdle to face, here are some pointers.

Grab a stylesheet and pen and jot this down.

Create a new style:
.tablebg2
Just so that you know it's based off of the tablebg class.

Now give it something like: {width:90%; margin-left:auto; margin-right:auto; border-spacing:1px 1px;}
That will span most, but not all of the post table, while making it fluid, and floating in the middle, i.e. align-center.
The border-spacing is critical, otherwise it looks fat and stupid.

Now the <th> tag does not need a style, as it is already set by the stylesheet, so don't worry about that one.

<td> could use some work though.
First, we know that everytime we want to use row3, we want the text to be small!
With CSS, no problem.
Create a new style
.row32 or .row3-2
So that you know what class it came from.
Now give it these styles:
{font-size:10px; height: 12px; padding: 4px; display:table-cell; background-color: #C0C8D0;}
That should do it, although I did not implement that in my example above, which is why you see the padding and height are too big.

Now row2 and row1 are fine, so you can just use those for the table cells, but you might want to specify a new class for aligning center.
for example, new class:
.center
And apply the styles: {text-align:center} Thats all, so when you are using the td tags, do this:
Code: Select all
[td=row2 center,1]your text here[/td]

That gives the cell both classes row2 AND center, then the "1" is for the colspan.

All in all, here are the new styles we used:
Spoiler:
Code: Select all
.tablebg2 {
    width:90%;
    margin-left:auto;
    margin-right:auto;
    border-spacing:1px 1px;
}
.row3-2 {
    font-size:10px;
    height: 12px;
    padding: 4px;
    display:table-cell;
    background-color: #C0C8D0;
}
.center {
    text-align:center;
}
Watch out! I might do a code wheelie!

User avatar
Highway of Life    
STG Jedi Master
STG Jedi Master
 
Posts: 10458
Joined: 08 May 2006, 05:23
Location: Beware of Programmers carrying screwdrivers
Gender: Male
phpBB Knowledge: 10

Re: [Tutorial] Creating Table BBCodes

Postby LEW21 » 15 Aug 2006, 13:54

The most user-friendly table bbcode system:

BBCode:
Code: Select all
[table]{TEXT}[/table]

HTML Replacement:
Code: Select all
<table><tr><td>{TEXT}</td></tr></table>


BBCode:
Code: Select all
[separator]

HTML Replacement:
Code: Select all
</td><td>


BBCode:
Code: Select all
[newline]

HTML Replacement:
Code: Select all
</td></tr><tr><td>


Example:

Code: Select all
[table]
A1[separator]A2[separator]A3[newline]
B1[separator]B2[separator]B3[newline]
C1[separator]C2[separator]C3
[/table]

will output
Code: Select all
<table><tr><td>
A1</td><td>A2</td><td>A3</td></tr><tr><td>
B1</td><td>B2</td><td>B3</td></tr><tr><td>
C1</td><td>C2</td><td>C3
</td></tr></table>
phpBB3.PL - User-friendly Polish phpBB 3.0 support
LEW21    
Translator
Translator
 
Posts: 901
Joined: 01 Jun 2006, 03:51
Location: Warsaw, Poland
Gender: Male
phpBB Knowledge: 10

Re: [Tutorial] Creating Table BBCodes

Postby Synaptic Anarchy » 04 Sep 2006, 08:06

Let's have a tut on setting permissions for them, now.

Moderator boxes, for example.
It's winter.
User avatar
Synaptic Anarchy    
Lieutenant Commander
Lieutenant Commander
 
Posts: 351
Joined: 02 Jul 2006, 02:39
Favorite Team: Starfleet Design :P
Gender: Male

Re: [Tutorial] Creating Table BBCodes

Postby LEW21 » 04 Sep 2006, 08:49

phpBB3.PL - User-friendly Polish phpBB 3.0 support
LEW21    
Translator
Translator
 
Posts: 901
Joined: 01 Jun 2006, 03:51
Location: Warsaw, Poland
Gender: Male
phpBB Knowledge: 10

Re: [Tutorial] Creating Table BBCodes

Postby Handyman » 04 Sep 2006, 23:37

The problem with that is phpBB has all tables aligned left, so making a new style for them would be very nice... I also like to select my class for backgrounds and such.
Please contact me if you have any news to submit to SCOFF News.
SCOFFing at the candidates while you sleep.
My Mods || My Mod Queue
Image
User avatar
Handyman    
Rear Fleet Admiral
Rear Fleet Admiral
 
Posts: 7459
Joined: 08 May 2006, 04:45
Location: Where no man has gone before!
Favorite Team: Seattle Seahawks
Gender: Male

Re: [Tutorial] Creating Table BBCodes

Postby Highway of Life » 04 Sep 2006, 23:41

I did create a new style... BTW, for my tables...

Code: Select all
.bbtable {
   background-color:#A9B8C2;
   border-spacing:1px 1px;
}


So now when you use the table BBCode, do something like...
Code: Select all
[table=bbtable]....
Watch out! I might do a code wheelie!

User avatar
Highway of Life    
STG Jedi Master
STG Jedi Master
 
Posts: 10458
Joined: 08 May 2006, 05:23
Location: Beware of Programmers carrying screwdrivers
Gender: Male
phpBB Knowledge: 10

Re: [Tutorial] Creating Table BBCodes

Postby b3rx » 05 Feb 2007, 00:54

why is it when trying to use your table bbcode i have many spaces in my post before the tables show up?

please see attached file
Attachments
spaces.PNG
b3rx    
Ensign
Ensign
 
Posts: 83
Joined: 05 Feb 2007, 00:48
Gender: Male
phpBB Knowledge: 2

Re: [Tutorial] Creating Table BBCodes

Postby Highway of Life » 05 Feb 2007, 08:27

You have to take out all newlines in the table bbcode... for example, if you have this:
Code: Select all
[table]
[tr]
[td]stuff[/td]
[/tr]
[tr]
[td]stuff[/td]
[/tr]
[/table]

You are going to end up with a lot of newlines like your screenshot above.
the way to get rid of the spaces is to do this:
Code: Select all
[table][tr][td]stuff[/td][/tr][tr][td]stuff[/td][/tr][/table]

I recommend writing it out as my first example, then using a text editor find and replace all:
Code: Select all
]
[
to:
Code: Select all
][

That's the easiest way to do it IMO.
Watch out! I might do a code wheelie!

User avatar
Highway of Life    
STG Jedi Master
STG Jedi Master
 
Posts: 10458
Joined: 08 May 2006, 05:23
Location: Beware of Programmers carrying screwdrivers
Gender: Male
phpBB Knowledge: 10

Re: [Tutorial] Creating Table BBCodes

Postby b3rx » 05 Feb 2007, 08:38

thanks! that did help.
b3rx    
Ensign
Ensign
 
Posts: 83
Joined: 05 Feb 2007, 00:48
Gender: Male
phpBB Knowledge: 2

Next

Return to BBCode System

Who is online

Users browsing this forum: No registered users and 1 guest