1. Alan has completed the new Pain Recovery Program. To read or share it, use this link: http://go.tmswiki.org/newprogram
    Dismiss Notice

Tutorial How to add tables to your posts

Discussion in 'About This Site' started by Forest, Feb 6, 2016.

  1. Forest

    Forest Beloved Grand Eagle

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

    This is a header cellThis is a header cell
    This is a left aligned cellThis is a centre aligned cell
    This is a right aligned cellLeft aligned
    Centre alignedRight aligned
    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:
    Code:
    [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:
    [​IMG]

    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:
    Code:
    [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:
    Code:
    [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.
     
    Last edited: Feb 6, 2016
  2. mike2014

    mike2014 Beloved Grand Eagle

    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?
     
    Last edited: Feb 7, 2016
  3. Forest

    Forest Beloved Grand Eagle

    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
    This
    is a multiline
    regular cell
    I just use the following code:
    Code:
    [TABLE]
    [TR][TH]This is a
    
    multi line
    
    header cell[/TH][/TR]
    [TR1][TD]This
    is a multiline
    regular cell[/TD][/TR1]
    [/TABLE]
     
  4. Forest

    Forest Beloved Grand Eagle

    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, upload_2016-2-7_12-12-58.png 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.


    upload_2016-2-7_12-12-31.png
     
  5. Forest

    Forest Beloved Grand Eagle

    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.
     
    mike2014 likes this.

Share This Page