XF 1 - Advanced Table BBcode XF1

XenForo Default Editor does not usually provide for you to "creating table" as you use in Word files. If you really need this function of your site, here is our solution for that.

Advanced Table BBCode has a main task that is providing you a code paragraph to add into your site. The Table function will display on the taskbar and you could do anything you want with the Table.

Some main features:
- Can create, edit and delete a table.
- Can add or delete single rows or columns, define headers etc.
- Can copy and paste a table, add-on will render to table BBcode.
- Support all BBCODE tags (example IMG, MEDIA, COLOR ...) inside table BBcode.
- Support changing properties of table, row and cell via form (easy to use)
- Support following tag:
table: Define a table
th: Define a header cell in a table
td: Define a cell in a table
tr: Define a row in a table
caption: Define a table caption
colgroup: Specify a group of one or more columns in a table for formatting
col: Specify column properties for each column within a <colgroup> element
thead: Group the header content in a table
tbody: Group the body content in a table
tfoot: Group the footer content in a table
- Support following attributions in a table BBcode
width: Specify the width of a table
align: Specify the alignment of a table according to surrounding texts
border: Specify whether the table cells should have borders or not
border-color: Specify the border color
- Support following attribution in a td BBcode
width: Specify the width of a cell
colspan: Specify the number of columns should be spanned
rowspan: Set the number of rows should be spanned
bgcolor: Specify background color of a cell
align: Align the content in a cell
- Support following attribution in a BBcode table
bgcolor: Specify a background color for a table row
- And will support almost attributions of table tag in the future.

INSTALLATION:
Please follow the installation instructions as noted in README.txt

EXAMPLE:

Basic table

Code:

[TABLE][TBODY][TR][TH]Month[/TH]
[TH]Savings[/TH][/TR]
[TR][TD]January[/TD]
[TD]$100[/TD][/TR]
[TR][TD]February[/TD]
[TD]$80[/TD][/TR][/TBODY][/TABLE]

Table with headers & Vertical headers

Code:

[TABLE][TBODY][TR][TH]Name[/TH]
[TH]Telephone[/TH][/TR]
[TR][TD]Bill Gates[/TD]
[TD]555 77 854[/TD][/TR][/TBODY][/TABLE]

[TABLE][TBODY][TR][TH]First Name:[/TH]
[TD]Bill Gates[/TD][/TR]
[TR][TH]Telephone:[/TH]
[TD]555 77 854[/TD][/TR][/TBODY][/TABLE]

Table with empty cell

Code:

[TABLE][TBODY][TR][TD]Some text[/TD]
[TD]Some text[/TD][/TR]
[TR][TD] [/TD]
[TD]Some text[/TD][/TR][/TBODY][/TABLE][/code)
[LIST]
[*]Table with tags inside
[/LIST]
[Code]
[TABLE][TBODY][TR][TD]This is a paragraph
[COLOR=#ff0000]This is another paragraph[/COLOR]
[/TD]
[TD]This cell contains a table:
[TABLE][TBODY][TR][TD]A[/TD]
[TD]B[/TD][/TR]
[TR][TD]C[/TD]
[TD]D[/TD][/TR][/TBODY][/TABLE][/TD][/TR]
[TR][TD]This cell contains a list
[LIST]
[*]apples
[*]bananas
[*]pineapples
[/LIST][/TD]
[TD="align: center"][CENTER][B]HELLO[/B][/CENTER][/TD][/TR][/TBODY][/TABLE]

Table with colspan and rowspan

Code:

[SIZE=3][B]Cell that spans two columns:[/B][/SIZE]
[TABLE][TBODY][TR][TH]Name[/TH]
[TH="colspan: 2"]Telephone[/TH][/TR]
[TR][TD]Bill Gates[/TD]
[TD]555 77 854[/TD]
[TD]555 77 855[/TD][/TR][/TBODY][/TABLE]
[SIZE=3][B]Cell that spans two rows:[/B][/SIZE]
[TABLE][TBODY][TR][TH]First Name:[/TH]
[TD]Bill Gates[/TD][/TR]
[TR][TH="rowspan: 2"]Telephone:[/TH]
[TD]555 77 854[/TD][/TR]
[TR][TD]555 77 855[/TD][/TR][/TBODY][/TABLE]

Table with full supported tags and attributes

Code:

[TABLE][THEAD][TR][TD] Header 01[/TD]
[TD] Header 02[/TD]
[TD] Header 03[/TD][/TR][/THEAD]
[TFOOT][TR][TD]Footer 1[/TD]
[TD]Footer 2[/TD]
[TD]Footer 2[/TD][/TR][/TFOOT]
[TBODY][TR][TD]This is td[/TD]
[TD]This is td[/TD]
[TD]This is td[/TD][/TR]
[TR][TD][TABLE][TBODY][TR][TD]Table 2[/TD]
[TD]Table inside[/TD][/TR]
[TR][TD]code inside table[/TD]
[TD]smiles inside table[/TD][/TR]
[TR][TD][PHP]<?php
echo 'Hello World!';
?>[/PHP][/TD]
[TD]:(:mad::cool::D[/TD][/TR][/TBODY][/TABLE][/TD]
[TD]img tag inside table
[IMG]http://demo.brivium.com/121/styles/default/xenforo/avatars/avatar_male_m.png[/IMG][/TD]
[TD]media tag inside table
[media=youtube]fac0q5r7F98[/media][/TD][/TR]
[TR][TD="width: 200"]Cell with width attribute[/TD]
[TD="bgcolor: #ff0"][RIGHT]Cell with bgcolor attribute[/RIGHT][/TD]
[TD="align: right"][RIGHT]Cell with algin attribute[/RIGHT][/TD][/TR][/TBODY][/TABLE]

SCREENCAST:

NOTES:
This addon only supported on XenForo's default editor (Redactor).

XF 1 Advanced Table BBcode XF1 MOVED

More resources from Katheryn

Latest updates

MOVED

Similar resources

Settings Notifications

Options