Forum Table tag

Chokladkakan · Oct 16, 2014

There is now a [table] tag, along with [tr] for table rows, [th] for table headers and [td] for table cells. The way they work is similar to that of ordinary HTML tables:

All tables start and end with [table] and [/table] respectively;

All table rows start and end with [tr] and [/tr] (tr being table row);

Inside table rows there is [th] and [/th] for table headers and [td] and [/td] for table data.

Below is a simple example table.
Code:
[table]
    [tr]
        [th]Number[/th]
        [th]Letter[/th]
    [/tr]
    [tr]
        [td]1[/td]
        [td]a[/td]
    [/tr]
    [tr]
        [td]2[/td]
        [td]b[/td]
    [/tr]
[/table]
Number Letter

1 a

2 b

Note that spaces and newlines between the table components are ignored: feel free to use them in order to help yourself organise your table structure.
All of these tags support some optional arguments:

table:

align: one of left, center or right for the table itself, left being default,

bgcolor: either a colour name (red, blue, et cetera), a hexadecimal colour value or an rgb(0.1, 0.2, 0.3) type value,

width: a percentage between 1% and 100%.

tr:

align: one of left, center or right; this is overridden by th and td alignments,

bgcolor: either a colour name (red, blue, et cetera), a hexadecimal colour value or an rgb(0.1, 0.2, 0.3) type value.

th:

align: one of left, center or right, center being default,

bgcolor: either a colour name (red, blue, et cetera), a hexadecimal colour value or an rgb(0.1, 0.2, 0.3) type value,

colspan: one or more digits describing how many columns the table cell should span,

rowspan: one or more digits describing how many rows the table cell should span,

width: a percentage between 1% and 100%. Works best when used alongside table width.

td:

align: one of left, center or right, left being default,

bgcolor: either a colour name (red, blue, et cetera), a hexadecimal colour value or an rgb(0.1, 0.2, 0.3) type value,

colspan: one or more digits describing how many columns the table cell should span,

rowspan: one or more digits describing how many rows the table cell should span,

width: a percentage between 1% and 100%. Works best when used alongside table width.

The order of arguments doesn't matter. Multiple arguments should be separated with a space. [table="align=right width=30%"], for example, will cause the table to be aligned to the right of the message and to span thirty per cent of the message's width.

There is also a [caption] tag for adding a caption above a table, detailing what it contains. Below are two more advanced examples making use of captions and arguments.
Code:
[table="align=center width=30%"]
    [caption]A Cayley table of the group ℤ[sub]5[/sub][/caption]
    [tr]
        [th]+[/th]
        [th]0[/th]
        [th]1[/th]
        [th]2[/th]
        [th]3[/th]
        [th]4[/th]
    [/tr]
    [tr="align=center"]
        [th]0[/th]
        [td]0[/td]
        [td]1[/td]
        [td]2[/td]
        [td]3[/td]
        [td]4[/td]
    [/tr]
    [tr="align=center"]
        [th]1[/th]
        [td]1[/td]
        [td]2[/td]
        [td]3[/td]
        [td]4[/td]
        [td]0[/td]
    [/tr]
    [tr="align=center"]
        [th]2[/th]
        [td]2[/td]
        [td]3[/td]
        [td]4[/td]
        [td]0[/td]
        [td]1[/td]
    [/tr]
    [tr="align=center"]
        [th]3[/th]
        [td]3[/td]
        [td]4[/td]
        [td]0[/td]
        [td]1[/td]
        [td]2[/td]
    [/tr]
    [tr="align=center"]
        [th]4[/th]
        [td]4[/td]
        [td]0[/td]
        [td]1[/td]
        [td]2[/td]
        [td]3[/td]
    [/tr]
[/table]
A Cayley table of the group ℤ₅
+ 0 1 2 3 4

0 0 1 2 3 4

1 1 2 3 4 0

2 2 3 4 0 1

3 3 4 0 1 2

4 4 0 1 2 3
Code:
[table]
    [tr]
        [th="colspan=2"]Name[/th]
    [/tr]
    [tr]
        [th]Surname[/th]
        [th]First name[/th]
        [th]Age[/th]
    [/tr]
    [tr]
        [td="rowspan=2 bgcolor=lightcoral"]Doe[/td]
        [td]Jane[/td]
        [td]34[/td]
    [/tr]
    [tr]
        [td]John[/td]
        [td]31[/td]
    [/tr]
[/table]
Name

Surname First name Age

Doe Jane 34

John 31
Code:
[table="width=50%"]
    [tr]
        [th="width=60%"]Monster[/th]
        [th]Level[/th]
        [th]Experience[/th]
    [/tr]
    [tr]
        [td]Snail[/td]
        [td]1[/td]
        [td]12[/td]
    [/tr]
    [tr]
        [td]Blue Snail[/td]
        [td]2[/td]
        [td]16[/td]
    [/tr]
    [tr]
        [td]Red Snail[/td]
        [td]5[/td]
        [td]32[/td]
    [/tr]
[/table]
Monster Level Experience

Snail 1 12

Blue Snail 2 16

Red Snail 5 32

Katsuruka · Oct 11, 2014

Nice work, Chok! This is a very welcome feature! =)

DemSheddy · Oct 11, 2014

Wow! This will be a nice feature indeed.
Thanks!

Gi · Oct 11, 2014

Thank you Chok, very nice examples showing the options too. Also noticed [sub][/sub] and [sup][/sup] being added recently. Combined with the [anchor][/anchor] tag these will provide a great base to structure guides!

Matt · Oct 11, 2014

Thank you Chok, and very well explained too!

Eli · Oct 11, 2014

Testing Table

Testing Table

Edit: Yay I got it ^^ ~~ Nice!

caladbolgftw · Oct 11, 2014

ha, I learned that in web design class in college. Looks too similar.

Saxa · Oct 12, 2014

caladbolgftw said: ↑

ha, I learned that in web design class in college. Looks too similar.
Click to expand...

Who the fuck is this?

Also, more on-topic this time, thank you Chok. Very useful.

Nedzad · Oct 12, 2014

This is very neat, good job Chok!

pokemon1188 · Oct 13, 2014

+1 (y) GOOD JOB

Katsuruka · Oct 13, 2014

Testing...

Rank Name Styling Emblem

Administrator Black GM Hat

Assistant Admin Red GM Hat

Out of curiosity, are table cell shading/colours supported?

Chokladkakan · Oct 13, 2014

Katsuruka said: ↑

Out of curiosity, are table cell shading/colours supported?
Click to expand...

It is now, using the bgcolor argument. The opening post has been updated accordingly.

Tommy · Oct 13, 2014

How to Use Tables
___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___

___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___

___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___

___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___

___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___

___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___

___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___

Katsuruka · Oct 13, 2014

Chokladkakan said: ↑

It is now, using the bgcolor argument. The opening post has been updated accordingly.
Click to expand...

Wonderful, thank you very much, Chok!

Chokladkakan · Oct 16, 2014

The [th] and [td] tags now support a width argument, taking a percentage between 1% and 100%. They work best when the table width is specified, and they are sometimes wonky when used in conjunction with colspan. Be wary!

The opening post has been updated in light of this.

Plenty · May 30, 2015

@Chokladkakan
Is there a limit to how many tables/columns you can make at once? I recently ran into a problem where whenever I add another row to the table with images, instead of the image popping up, I got this:

This happened after I went through 17-18 rows. Any thoughts or solution?

Chokladkakan · May 31, 2015

I've no idea. Provide me with more information (or better yet, point me toward the table in question) so that I can have a go at recreating it, please.

Plenty · May 31, 2015

Chokladkakan said: ↑

I've no idea. Provide me with more information (or better yet, point me toward the table in question) so that I can have a go at recreating it, please.
Click to expand...

This is the table in question:
http://royals.ms/forum/#25

If I added like 2-3 more rows, the table won't show images anymore and it'll just post the URL. It might have to do with me not adding the [/tr] code after each row, but I just found it a bit weird.

Also, I've heard some complaints on the resizing of tables and having them stretch too much on mobile and certain browsers. Any suggestions to fix that?

Chokladkakan · Jun 1, 2015

That link does not lead me to anywhere very informative.

Plenty · Jun 1, 2015

Chokladkakan said: ↑

That link does not lead me to anywhere very informative.
Click to expand...

Sorry.
http://royals.ms/forum/threads/dark-knight-guide.28010/#25

Log in or Sign up

Forum Table tag

Chokladkakan Web Developer

Katsuruka Donator

DemSheddy Well-Known Member

Gi Well-Known Member

Matt Administrator

Eli Well-Known Member

caladbolgftw Donator

Saxa Donator

Nedzad Well-Known Member

pokemon1188 Well-Known Member

Katsuruka Donator

Chokladkakan Web Developer

Tommy Well-Known Member

Katsuruka Donator

Chokladkakan Web Developer

Plenty Well-Known Member

Chokladkakan Web Developer

Plenty Well-Known Member

Chokladkakan Web Developer

Plenty Well-Known Member

Share This Page

___	___	___	___	___	___	___	___	___	___	___	___	___	___	___	___	___
___	___	___	___	___	___	___	___	___	___	___	___	___	___	___	___	___
___	___	___	___	___	___	___	___	___	___	___	___	___	___	___	___	___
___	___	___	___	___	___	___	___	___	___	___	___	___	___	___	___	___
___	___	___	___	___	___	___	___	___	___	___	___	___	___	___	___	___
___	___	___	___	___	___	___	___	___	___	___	___	___	___	___	___	___
___	___	___	___	___	___	___	___	___	___	___	___	___	___	___	___	___

___	___	___	___	___	___	___	___	___	___	___	___	___	___	___	___	___
___	___	___	___	___	___	___	___	___	___	___	___	___	___	___	___	___
___	___	___	___	___	___	___	___	___	___	___	___	___	___	___	___	___
___	___	___	___	___	___	___	___	___	___	___	___	___	___	___	___	___
___	___	___	___	___	___	___	___	___	___	___	___	___	___	___	___	___
___	___	___	___	___	___	___	___	___	___	___	___	___	___	___	___	___
___	___	___	___	___	___	___	___	___	___	___	___	___	___	___	___	___

Log in or Sign up

Forum Table tag

Chokladkakan Web Developer

Katsuruka Donator

DemSheddy Well-Known Member

Gi Well-Known Member

Matt Administrator

Eli Well-Known Member

caladbolgftw Donator

Saxa Donator

Nedzad Well-Known Member

pokemon1188 Well-Known Member

Katsuruka Donator

Chokladkakan Web Developer

Tommy Well-Known Member

Katsuruka Donator

Chokladkakan Web Developer

Plenty Well-Known Member

Chokladkakan Web Developer

Plenty Well-Known Member

Chokladkakan Web Developer

Plenty Well-Known Member

Share This Page

Useful Searches

___	___	___	___	___	___	___	___	___	___	___	___	___	___	___	___	___
___	___	___	___	___	___	___	___	___	___	___	___	___	___	___	___	___
___	___	___	___	___	___	___	___	___	___	___	___	___	___	___	___	___
___	___	___	___	___	___	___	___	___	___	___	___	___	___	___	___	___
___	___	___	___	___	___	___	___	___	___	___	___	___	___	___	___	___
___	___	___	___	___	___	___	___	___	___	___	___	___	___	___	___	___
___	___	___	___	___	___	___	___	___	___	___	___	___	___	___	___	___