How to: Create tables in posts with BBCode
Posted: April 19th, 2011, 2:48 pm
You may have noticed that there are some oddly named buttons above the message editor labeled "table", "td", "tdo=" and "tr". You can use these to make tables which might be useful if you want to organise a lot of information in a clear way.
To get started with tables, you might find it easier to write your BBCode in a text editor such as Notepad (Windows), TextWrangler/ BBEdit (Mac) or gEdit/ Kate (Linux).
So arm yourself with a text editor and, step by step....
First you need an opening table tag.
Now you need to create the first row for your table. To do this, open a tr (table row) tag immediately after your opening table tag, so your code now looks like this:
Now you need to create the first cell. In HTML these are called table divisions and have the tag td, which is what I have called our BBCode tag. The first cell will be the overall header which I have called tdo. the opening tdo tag needs to specify a text size attribute. I'm going to use size 5 for this example. So now we have opening tags for a table, the first row, and the cell which contains the headline text. The code so far looks like this:
So far so good. Now we are going to enter the headline text and then put the first closing tag in which will come after the headline text. closing tags have / in them.
That's the end of the first row in the new table so we need a closing tag for the tr tag we put in earlier.
Now if we put a table closing tag at the end of that we will have a table of sorts. A pretty useless one but it shows how tables work as a series of nested tags.
Moving swiftly on, delete that closing table tag and set about making something useful. We need a new row, so we put in another opening tr tag.
Now we need cells in the new row. Insert an opening td tag, type the text that the cell will contain and close the td tag. This cell will just contain the word "kit".
Now we'll go across the row and fill in some more cells. Again this is just a case of inserting an opening td tag, typing the text you want the cell to contain, and closing the tag. So for three more cells with the words manufacturer, scale, and price in them:
Now end the row with a closing tr tag:
We'll insert another row of four cells with their text after the closing tr tag. I'm just going to give the code for the table row and its cells.
Looking at the code for a table row and its cells you can see how its made up of a a pair of tr (row) tags with a series of td (cell) tag pairs nested between them. The code so far then looks like this:
Now immediately after all that insert another row:
Finally, one more row:
And so far we have an very nearly complete table for which the code looks like this:
The last thing to do is to close that table tag that we put in right at the start. Very often when your code doesn't appear how you expected it to you will find it's because you missed out a closing tag somewhere so always look through to make sure your tags are in pairs. The finished code then looks like this:
Unfortunately you can't see if you've pulled it off by previewing your post, so you need to submit it and take a look. The edit button is pretty useful sometimes. Use your browser's find function to go through your code looking for tags and see if each opening tag is being closed and vice versa. Stray bits of table code in your message text or scattered to the sides of the table are always down to incomplete tags.
It looks tricky at first glance but really it's just lots of very simple things happening all at once. Practice makes perfect. Hopefully this makes things a little clearer.
To get started with tables, you might find it easier to write your BBCode in a text editor such as Notepad (Windows), TextWrangler/ BBEdit (Mac) or gEdit/ Kate (Linux).
So arm yourself with a text editor and, step by step....
First you need an opening table tag.
Code: Select all
[table]
Code: Select all
[table][tr]
Code: Select all
[table][tr][tdo=5]
Code: Select all
[table][tr][tdo=5]This is my table[/tdo]
Code: Select all
[table][tr][tdo=5]This is my table][/tdo][/tr]
Code: Select all
[table][tr][tdo=5]This is my table][/tdo][/tr][/table]
This is my table |
Code: Select all
[table][tr][tdo=5]This is my table[/tdo][/tr][tr]
Code: Select all
[table][tr][tdo=5]This is my table[/tdo][/tr][tr][td]kit[/td]
Code: Select all
[table][tr][tdo=5]This is my table[/tdo][/tr][tr][td]kit[/td][td]manufacturer[/td][td]scale[/td][td]price[/td]
Code: Select all
[table][tr][tdo=5]This is my table][/tdo][/tr][tr][td]kit[/td][td]manufacturer[/td][td]scale[/td][td]price[/td][/tr]
Code: Select all
[tr][td]F-86 Sabre[/td][td]Airfix[/td][td]1/72[/td][td]£6.99[/td][/tr]
Code: Select all
[table][tr][tdo=5]This is my table[/tdo][/tr][tr][td]kit[/td][td]manufacturer[/td][td]scale[/td][td]price[/td][/tr][tr][td]F-86 Sabre[/td][td]Airfix[/td][td]1/72[/td][td]£6.99[/td][/tr]
Code: Select all
[tr][td]DH Sea Vixen[/td][td]Airfix[/td][td]1/48[/td][td]£34.99[/td][/tr]
Code: Select all
[tr][td]CH-53E Super Stallion[/td][td]Academy[/td][td]1/48[/td][td]£60[/td][/tr]
Code: Select all
[table][tr][tdo=5]This is my table[/tdo][/tr][tr][td]kit[/td][td]manufacturer[/td][td]scale[/td][td]price[/td][/tr][tr][td]F-86 Sabre[/td][td]Airfix[/td][td]1/72[/td][td]£6.99[/td][/tr][tr][td]DH Sea Vixen[/td][td]Airfix[/td][td]1/48[/td][td]£34.99[/td][/tr][tr][td]CH-53E Super Stallion[/td][td]Academy[/td][td]1/48[/td][td]£60[/td][/tr]
Code: Select all
[table][tr][tdo=5]This is my table[/tdo][/tr][tr][td]kit[/td][td]manufacturer[/td][td]scale[/td][td]price[/td][/tr][tr][td]F-86 Sabre[/td][td]Airfix[/td][td]1/72[/td][td]£6.99[/td][/tr][tr][td]DH Sea Vixen[/td][td]Airfix[/td][td]1/48[/td][td]£34.99[/td][/tr][tr][td]CH-53E Super Stallion[/td][td]Academy[/td][td]1/48[/td][td]£60[/td][/tr][/table]
This is my table | ||||
kit | manufacturer | scale | price | |
F-86 Sabre | Airfix | 1/72 | £6.99 | |
DH Sea Vixen | Airfix | 1/48 | £34.99 | |
CH-53E Super Stallion | Academy | 1/48 | £60 |