[Tutorial] Creating Table BBCodes

[Highway of Life]

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 cell	This is the right cell
This is another row	This 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 cell	This is the right cell
This is another row	This 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 cell	This is the right cell
This is another row	This 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!

[Highway of Life]

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;
}

[LEW21 Janusz]

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>


[Synaptic Anarchy Syn]

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

Moderator boxes, for example.

[LEW21 Janusz]

http://www.phpbb.com/support/documentat ... sions.html

[Handyman]

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.

[Highway of Life]

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

[b3rx Bertrand]

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

[Highway of Life]

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.

[b3rx Bertrand]

thanks! that did help.