Tutorial How to add tables to your posts

[Forest]

Nope, I don't mean tables and chairs types of tables. I mean tables like this:

This is a header cell	This is a header cell

[TR1][TD]This is a left aligned cell[/TD][TD1]This is a centre aligned cell[/TD1][/TR1][TR2][TD2]This is a right aligned cell[/TD2][TD]Left aligned[/TD][/TR2][TR1][TD1]Centre aligned[/TD1][TD2]Right aligned[/TD2][/TR1]

Most of you won't ever want to add a table to a post, so you can stop reading now.

Still reading? Okay, if you are curious, while it can be a bit overwhelming at first, it's quite learnable if using computers comes reasonably naturally to you.

To make the table above, you just put the following code into the page:

[TABLE][TR][TH]This is a header cell[/TH][TH]This is a header cell[/TH][/TR][TR1][TD]This is a left aligned cell[/TD][TD1]This is a centre aligned cell[/TD1][/TR1][TR2][TD2]This is a right aligned cell[/TD2][TD]Left aligned[/TD][/TR2][TR1][TD1]Centre aligned[/TD1][TD2]Right aligned[/TD2][/TR1][/TABLE]

Yike's that's terrifying! But the truth is that if you break it down into steps, it's actually quite sensible. The code may seem confusing at first, but it is something you can learn if you want to. (Obviously, most people won't want to.)

When looking at it, some abbreviations may help:

• TR stands for "Table Row." "TR" means that you are starting a row and "/TR" means that you are ending it.
• TH stands for "Table Header Cell." Similarly, "TH" means that you are starting a header cell and "/TH" means that you are ending it.
• TD stands for "Table Data." It's for the main cells of the table. As above, a "/" is used to end a main data cell.

The following graphic lays it out in more detail:

The important thing to remember is that you must put the entire table on one continuous line. Don't press enter! In other words, the following will work:

[TABLE][TR][TH]This is a header cell[/TH][TH]This is a header cell[/TH][/TR][TR1][TD]This is a left aligned cell[/TD][TD1]This is a centre aligned cell[/TD1][/TR1][TR2][TD2]This is a right aligned cell[/TD2][TD]Left aligned[/TD][/TR2][TR1][TD1]Centre aligned[/TD1][TD2]Right aligned[/TD2][/TR1][/TABLE]

But the following will break because it isn't one continuous line:

[TABLE]
[TR][TH]This is a header cell[/TH][TH]This is a header cell[/TH][/TR]
[TR1][TD]This is a left aligned cell[/TD][TD1]This is a centre aligned cell[/TD1][/TR1]
[TR2][TD2]This is a right aligned cell[/TD2][TD]Left aligned[/TD][/TR2]
[TR1][TD1]Centre aligned[/TD1][TD2]Right aligned[/TD2][/TR1]
[/TABLE]

If you take the time to understand the above, you'll actually will have learned 50% of how tables are made in all web pages. The big difference is simply that instead of using brackets, they use < and >. So, for example, they write <table>, <tr>, <th>, and <td>. Other than that things are pretty much the same.

Of course, feel free to ask questions below if you have them.

 

[mike2014]

Excellent. I recall these tags when I used to play around with HTML many many years ago.

I think another useful syntax worth mentioning when building tables is the <p></p> tag. It allows you to create a paragraph break between text in tables, or allows you to tidy up the look of the data within a table.

PS, one thing I wasn't sure about, do you need to press a particular button to flick between plain text and HTML?

 

[Forest]

Yes, this way of designing tables is a classic. I remember that many of my friends taught themselves HTML in the 90s as twenty-somethings and suddenly has careers as web designers. I didn't get to do that back then because of my TMS, but I get to do all the coding I want these days, so I guess it's never too late to live your dreams!

One of the nice things about this system is that if you want a paragraph break between text in tables, you just press enter between the paragraphs. It takes care of the rest. For example, to get the following table:

This is a multi line header cell

[TR1][TD]This
is a multiline
regular cell[/TD][/TR1]

I just use the following code:

[TABLE]
[TR][TH]This is a

multi line

header cell[/TH][/TR]
[TR1][TD]This
is a multiline
regular cell[/TD][/TR1]
[/TABLE]

 

[Forest]

For those who want to get SUPER techy about it (I mean crazy techy), our server transforms the top portion of my post into the following HTML. (Note: you do not need to understand the following to add tables to your posts.) If you look at it, you'll see very similar "table," "tr," and "td" tags in the same places. For example,

becomes <tr>, with square brackets, [], turning into angle brackets, <>, and occasional class="xyz" statements thrown in (as you may know, these are called CSS and they are what make it look nice, visually).

The basics of what the software does is change the square bracket version (above), into the HTML version (below), throwing in a little custom CSS (the class="xyz" statements) along the way. Simple software is often the most reliable, which is why I didn't mind installing it. Plus the programmer behind it is rock solid and has used the software for many years on his own forum. He also knows the underlying software in and out, so it's easy to trust him.

 

[Forest]

If people want a more visual way of adding tables to their posts, the following web page make it easier. You just type or paste the text you want in each box and it creates the entire code for you. You just paste it into a new post and you're all set. The only extra thing that you have to do is change the words [tab] and [/tab] in the output to [TABLE] and [/TABLE], respectively. Other than that you're good to go.

http://c61.su/bbtab.html

(You have to convert [tab] to [TABLE] because this web page uses slightly different formatting. Otherwise it's the same.)

The resulting tables are pretty basic with all rows formatted identically, but you can fancy it up if you like by using the information in my first post.