Welcome Guest ( Log In | Register )


Check out the FREE chatroom mod for IPB 3.x


> [IPBr] [BBCode] Tables
Written By Cointreau (Show All Tutorials)
Posted On: Jul 21 2006, 10:33 AM
Rated: ***** - 3 vote(s)
Hello ladies and gentlemen smile2.gif

Franswurst asked me by PM to make a Table BBCode, and since I had some free time this morning, here they are.
Yes, they. Because to add tables I had to add four Custom BBCodes to my board: [table], [th], [tr] and [td]. So, you and your members will have the same work to add BBCode tables as you would if you add HTML tables - I mean, add a [table] tag, then a [tr] tag, then a [td] tag, etc... - the only advantage here is that your members with some knowledge may do it without the need of HTML code wink.gif

The tables have limited options - only 100% width, no colspan or rowspan, default colors, etc. - and I do not plan to make these BBCodes better. However, you may play around and try to figure how to add some of these options, if you wish wink.gif

Well, let's do it smile2.gif


Table BBCodes
_________________________________________________________________________

1 - ACP -> Management -> Add New BBCode:

Add these BBCodes:

Table
    Custom BBCode Title: Table
    Custom BBCode Description: This BBCode will add the HTML tag <table> to your posts.
    Custom BBCode Example: [table=Table title][tr][td=width]This is a table cell![/td][/tr][/table]
    Custom BBCode Tag: table
    Use Option in tag?: Yes
    Custom BBCode Replacement:
    CODE
    <div class="borderwrap"><div class="maintitle">{option}</div><table cellpadding="4" cellspacing="1" width="100%">{content}</table></div>
Table header
    Custom BBCode Title: Table header
    Custom BBCode Description: This BBCode will add the HTML tag <th> to your posts.
    Custom BBCode Example: [table=Table title][th]This is a table header![/th][/table]
    Custom BBCode Tag: th
    Use Option in tag?: No
    Custom BBCode Replacement:
    CODE
    <th class="table-header" style="padding: 4px">{content}</th>
Table row
    Custom BBCode Title: Table row
    Custom BBCode Description: This BBCode will add the HTML tag <tr> to your posts.
    Custom BBCode Example: [table=Table title][tr][td=width]This is a table cell![/td][/tr][/table]
    Custom BBCode Tag: tr
    Use Option in tag?: No
    Custom BBCode Replacement:
    CODE
    <tr>{content}</tr>
Table cell
    Custom BBCode Title: Table cell
    Custom BBCode Description: This BBCode will add the HTML tag <td> to your posts.
    Custom BBCode Example: [table=Table title][tr][td=width]This is a table cell![/td][/tr][/table]
    Custom BBCode Tag: td
    Use Option in tag?: Yes
    Custom BBCode Replacement:
    CODE
    <td width="{option}" class="row2" valign="top">{content}</td>
2 - ACP -> Look and Feel -> Edit Stylesheet (CSS Advanced Mode):
Add this to the bottom of your CSS:
CODE
.table-header {
    background: url(style_images/1/tile_cat.gif);
    border-bottom: 1px solid #5176B5;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    margin: 0px;
    padding: 8px;
}


And you're done!

Now go to a post and test your tables, using the same structure as you would if you were adding HTML tables.
Examples. This:
CODE
[table=Testing custom BBCodes to create tables in posts][th][b]This is the first column[/b][/th][th][b]This is the second column[/b][/th][tr][td=50%]This is the first column of the first row[/td][td=50%]And this is the second column of the first row[/td][/tr][tr][td=50%]This is the first column of the second row[/td][td=50%]And this is the second column of the second row[/td][/tr][tr][td=50%]This is the first column of the third row and I'm using images on it, how you can see below:
[img]http://www.ipbrasil.com/forum/test/2p1/style_images/1/logo4.gif[/img][/td][td=50%]And this is the second column of the third row and I'm using smilies on it:
:)  :lol:  :P  B) [/td][/tr][/table]

Will add this:
IPB Image

Important!
You can't hit Enter in the middle of the code or you'll have problems, since the code will have lots of <br /> on it.
Example. If you add this:
CODE
[table=Testing custom BBCodes to create tables in posts]
[th][b]This is the first column[/b][/th][th][b]This is the second column[/b][/th]
[tr]
[td=50%]This is the first column of the first row[/td][td=50%]And this is the second column of the first row[/td]
[/tr]
[tr][td=50%]This is the first column of the second row[/td][td=50%]And this is the second column of the second row[/td]
[/tr]
[tr][td=50%]This is the first column of the third row and I'm using images on it, how you can see below:
[img]http://www.ipbrasil.com/forum/test/2p1/style_images/1/logo4.gif[/img][/td][td=50%]And this is the second column of the third row and I'm using smilies on it:
:)  :lol:  :P  B) [/td]
[/tr]
[/table]

You'll have this:
IPB Image

So, I suggest you to add the BBCodes with spaces and break lines to make it easy to edit, but then remove all spaces between the tags, like in the first example.

I know this is not the clever way to add a table to your posts using BBCode, but I didn't want to do it editing source files, so that's why I did it like this smile2.gif

Feel free to visit my Test Board to see it working (login with test / test)

Any problems let me know thumbsup.gif
Discussion Topic

 

Powered by TutorialIt 1.0.7 © 2007 InvisionMint
RSS Lo-Fi Version Time is now: 2nd September 2010 - 09:14 AM

Search Engine Keywords
Invision Skins · IPB Skins