CSS Table BBCode

[BBCode Bot]

CSS Table BBCode

Author: Stoker
Description: The CSS Table BBCode lets You insert CSS styled tables in the posts.
This Table BBCode looks just the same in all styles.
You need to create 4 bbcodes to make the table bbcode work.

File edits: Insert the following css code in Your stylesheet. For prosilver based styles it is colours.css and for subsilver2 based styles it is stylesheet.css
Feel free to edit the colors.
If You dont want the hover effect, just delete the hover code.

Code: Select all

  table.stoker 
{
text-align: center;
font-size: 14px;
color: #fff;
width: auto;
margin-left: auto;
margin-right: auto;
background-color: #666;
border: 0px;
border-collapse: collapse;
border-spacing: 0px;
}

table.stoker td.headline 
{
background-color: #005501;
color: #fff;
padding: 4px;
text-align: center;
border-bottom: 2px #fff solid;
font-size: 18px;
font-weight: bold;
} 

table.stoker td.headline:hover 
{
background-color: #005501;
color: #fff;
text-decoration: none;
} 

table.stoker td 
{
background-color: #CCC;
color: #000;
padding: 4px 20px 4px 20px;
text-align: left;
border: 1px #fff solid;
}

table.stoker td:hover 
{
background-color: #556b2f;
color: #FFF;
text-decoration: underline;
}

---

Table:
BBCode:

Code: Select all

[table]{TEXT}[/table]

HTML:

Code: Select all

<table class="stoker" cellspacing="0">
{TEXT}
</table>

---

Tr:
BBCode:

Code: Select all

[tr]{TEXT}[/tr]

HTML:

Code: Select all

<tr>{TEXT}</tr>

---

Td Headline:
BBCode:

Code: Select all

[tdo={NUMBER}]{TEXT}[/tdo]

HTML:

Code: Select all

<td class="headline" colspan="{NUMBER}">{TEXT}</td>

---

Td:
BBCode:

Code: Select all

[td]{TEXT}[/td]

HTML:

Code: Select all

<td>{TEXT}</td>

---

To make this bbcode work, You have to combine them the right way.
When You have added above BBCodes in ACP, You can use this examplecode on Your own board:

Code: Select all

[table][tr][tdo=5]Styled CSS table[/tdo][/tr][tr][td][b]Some text[/b][/td][td][b]Stoker[/b][/td][td][b]Nerdy[/b][/td][td][b]Peters[/b][/td][td][b]BBCode Bot[/b][/td][/tr][tr][td][b]Home:[/b][/td][td]test[/td][td]test[/td][td]test[/td][td]test[/td][/tr][tr][td][b]1 - 2:[/b][/td][td]test[/td][td]test[/td][td]test[/td][td]test[/td][/tr][tr][td][b]3 - 4:[/b][/td][td]test[/td][td]test[/td][td]test[/td][td]test[/td][/tr][tr][td][b]5 - 6:[/b][/td][td]test[/td][td]test[/td][td]test[/td][td]test[/td][/tr][tr][td][b]7 - 8:[/b][/td][td]test[/td][td]test[/td][td]test[/td][td]test[/td][/tr][tr][td][b]9 - 10:[/b][/td][td]test[/td][td]test[/td][td]test[/td][td]test[/td][/tr][/table]

Demo:
[table][tr][tdo=5]Styled CSS table[/tdo][/tr][tr][td]Some text[/td][td]Stoker[/td][td]Nerdy[/td][td]Peters[/td][td]BBCode Bot[/td][/tr][tr][td]Home:[/td][td]test[/td][td]test[/td][td]test[/td][td]test[/td][/tr][tr][td]1 - 2:[/td][td]test[/td][td]test[/td][td]test[/td][td]test[/td][/tr][tr][td]3 - 4:[/td][td]test[/td][td]test[/td][td]test[/td][td]test[/td][/tr][tr][td]5 - 6:[/td][td]test[/td][td]test[/td][td]test[/td][td]test[/td][/tr][tr][td]7 - 8:[/td][td]test[/td][td]test[/td][td]test[/td][td]test[/td][/tr][tr][td]9 - 10:[/td][td]test[/td][td]test[/td][td]test[/td][td]test[/td][/tr][/table]