Reference Tables guide

[Kyng]

Over on ZetaBoards, you may remember having the ability to put tables into your posts. This ability exists over here as well; however, the syntax is quite different, so I thought I should stick a guide up. 

The new code is designed to function similarly to HTML. It consists of four key tags: 

table - produces a table; 
tr - marks rows in the table; 
th - marks header cells in the table;
td - marks regular cells in the table. 

Here's a simple example:

Code:

[table]
[tr]
[th]Header Column 1[/th]
[th]Header Column 2[/th]
[th]Header Column 3[/th]
[th]Header Column 4[/th]
[/tr]
[tr]
[td]Row 1 Column 1[/td]
[td]Row 1 Column 2[/td]
[td]Row 1 Column 3[/td]
[td]Row 1 Column 4[/td]
[/tr]
[tr]
[td]Row 2 Column 1[/td]
[td]Row 2 Column 2[/td]
[td]Row 2 Column 3[/td]
[td]Row 2 Column 4[/td]
[/tr]
[tr]
[td]Row 3 Column 1[/td]
[td]Row 3 Column 2[/td]
[td]Row 3 Column 3[/td]
[td]Row 3 Column 4[/td]
[/tr]
[tr]
[td]Row 4 Column 1[/td]
[td]Row 4 Column 2[/td]
[td]Row 4 Column 3[/td]
[td]Row 4 Column 4[/td]
[/tr]
[/table]

Typing the above will yield the following table:

Header Column 1	Header Column 2	Header Column 3	Header Column 4
Row 1 Column 1	Row 1 Column 2	Row 1 Column 3	Row 1 Column 4
Row 2 Column 1	Row 2 Column 2	Row 2 Column 3	Row 2 Column 4
Row 3 Column 1	Row 3 Column 2	Row 3 Column 3	Row 3 Column 4
Row 4 Column 1	Row 4 Column 2	Row 4 Column 3	Row 4 Column 4

---

Now, sadly, there isn't an automatic table generator, like there was on ZetaBoards . However, there are a couple of other options for customising your tables, which we didn't have in ZB: 

colspan - If you want one of your cells to run across multiple columns, then just use the 'colspan' attribute to specify how many columns you want it to run across. This works for both the 'th' and 'td' tags, and it's very useful for producing a title bar which runs across all columns. Here it is in action: 

Code:

[table]
[tr]
[th colspan=4]Header Column 1[/th]
[/tr]
[tr]
[td]Row 1 Column 1[/td]
[td]Row 1 Column 2[/td]
[td]Row 1 Column 3[/td]
[td]Row 1 Column 4[/td]
[/tr]
[tr]
[td colspan=2]Row 2 Columns 1 and 2[/td]
[td]Row 2 Column 3[/td]
[td]Row 2 Column 4[/td]
[/tr]
[tr]
[td]Row 3 Column 1[/td]
[td]Row 3 Column 2[/td]
[td]Row 3 Column 3[/td]
[td]Row 3 Column 4[/td]
[/tr]
[tr]
[td]Row 4 Column 1[/td]
[td colspan=3]Row 4 Columns 2, 3, and 4[/td]
[/tr]
[/table]

Header Column 1
Row 1 Column 1	Row 1 Column 2	Row 1 Column 3	Row 1 Column 4
Row 2 Columns 1 and 2		Row 2 Column 3	Row 2 Column 4
Row 3 Column 1	Row 3 Column 2	Row 3 Column 3	Row 3 Column 4
Row 4 Column 1	Row 4 Columns 2, 3, and 4

---

width - Inside the 'table' tag, you can specify the width of your table. You can do this either as a raw number of pixels (by adding 'px'), or as a percentage (by adding '%'). 

For example, the following table will be 40% of the width of your post: 

Code:

[table width=40%]
[tr][th colspan=2]Header Row[/th][/tr]
[tr][td]Row 1 Column 1[/td][td]Row 1 Column 2[/td][/tr]
[tr][td]Row 2 Column 1[/td][td]Row 2 Column 2[/td][/tr]
[/table]

40% table
Row 1 Column 1	Row 1 Column 2
Row 2 Column 1	Row 2 Column 2

And the following table will be 200 pixels wide. We only recommend this route for small tables (e.g. less than 250 pixels wide), because large-width tables aren't going to show up well on mobiles!

Code:

[table width=200px]
[tr][th colspan=2]200 pixel table[/th][/tr]
[tr][td]Row 1 Column 1[/td][td]Row 1 Column 2[/td][/tr]
[tr][td]Row 2 Column 1[/td][td]Row 2 Column 2[/td][/tr]
[/table]

200 pixel table
Row 1 Column 1	Row 1 Column 2
Row 2 Column 1	Row 2 Column 2

---

I hope that makes it clear how to use tables on here. If you still have any questions, ask away !