Hello ladies and gentlemen 
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 
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 
Well, let's do it 
Table BBCodes _________________________________________________________________________
1 - ACP -> Management -> Add New BBCode: Add these BBCodes:
TableCustom 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 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 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:

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:

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 
Feel free to visit my Test Board to see it working (login with test / test)
Any problems let me know  |