Introduction to Tables (aka., BB code)

Discussion in 'PriusChat Website Questions' started by bwilson4web, Jun 12, 2012.

  1. bwilson4web

    bwilson4web BMW i3 and Model 3

    Joined:
    Nov 25, 2005
    27,917
    15,800
    0
    Location:
    Huntsville AL
    Vehicle:
    2018 Tesla Model 3
    Model:
    Prime Plus
    It is not easy to document how to do table tags because if written in order, voila, you have a table:
    Column 1 Column 2 Column 3
    0 [tr][th]title 1[/th][th]title 2[/th][/tr][tr][td]row 1 col 1[/td][td]row 1 col 1[/td][/tr]
    Like this.

    Testing showed a leading blank before the trailing "]" disables some tag encoding:
    • [table ] - begins each table (remove the " " before the "]")
    • [th ] - begins each header column value
    • [/th] - ends each header column value (*)
      • [tr ] - begins each row
      • [td ] - begins each data column value
      • [/td] - ends each data column value (*)
      • [/tr] - ends each row (*)
    • [/table] - ends a table
    Since it is modal software, some sets of tags show up frequently:
    • [table ][th ] - begins each table and headers
    • [/th][th ] - separates each header column
    • [/th] - ends the header columns
      • [tr ][td ] - begins each data row
      • [/td][td ] - separates each data value in a table
      • [/td ][/tr] - ends each data row
    • [/table] - common end to table
    So take an excel table; export it to delimited text, and; use a common editor to substitute the pairs above as needed. Removed all ordinary <RETURN> or new line characters as these will show up as blank lines before the table.

    * - If you omit the closing tag of that mode (aka., TD, TH, TR) it appears to default close the previous tagged text and start new. This short-cut can almost cut the number of tags in half.

    GOOD LUCK!
    Bob Wilson
     
    fuzzy1 and xs650 like this.
  2. Danny

    Danny Admin/Founder
    Staff Member

    Joined:
    Nov 24, 2003
    7,094
    2,116
    1,174
    Location:
    Charlotte, NC
    Vehicle:
    2013 Prius Plug-in
    Model:
    Plug-in Base
    You can also check out the BBCode Help page with details on how to create full featured tables using various cell and row codes.

    BB Codes | PriusChat
     
    dave77, fuzzy1 and bwilson4web like this.
  3. xs650

    xs650 Senior Member

    Joined:
    Jul 2, 2010
    4,539
    1,435
    9
    Location:
    Northern California
    Vehicle:
    2010 Prius
    Model:
    II
    • Bob, thanks for doing another BBCode Table tutorial. Yours is easy to follow. One suggestion, the TH element is normally only used for the top or header row in a column, the TD element is normally used for the lower rows. It works either way though.
    • The BBCode help page Danny referenced is also one of the best ones I have seen online and worth a look. It has some BBCode elements I hadn't seen before.
     
    bwilson4web likes this.
  4. bwilson4web

    bwilson4web BMW i3 and Model 3

    Joined:
    Nov 25, 2005
    27,917
    15,800
    0
    Location:
    Huntsville AL
    Vehicle:
    2018 Tesla Model 3
    Model:
    Prime Plus
    BTW, it looks like we don't have to code the "[/<mode>]" tags. The next "[<mode>]" tag appears to close out the previous one. This cuts the number of tags needed nearly in half.

    Bob Wilson
     
  5. Stev0

    Stev0 Honorary Hong Kong Cavalier

    Joined:
    Sep 23, 2006
    7,201
    1,073
    0
    Location:
    Northampton, MA
    Vehicle:
    2022 Prius Prime
    Model:
    Plug-in Base
    Let's play Tic-Tac-Toe! I'll go first.
    Column 1
    0 [tr]
    1 [td]X[/td][td]. .[/td][td]. .[/td]
    2 [/tr]
    3 [tr]
    4 [td] .[/td][td].[/td][td].[/td]
    5 [/tr]
    6 [tr]
    7 [td] .[/td][td].[/td][td].[/td]
    8 [/tr]


    (OK, so this was just an excuse to experiment with tables)
     
  6. JamesCSmith

    JamesCSmith New Member

    Joined:
    Apr 22, 2012
    59
    9
    0
    Location:
    California
    Vehicle:
    2012 Prius Plug-in
    Model:
    Plug-in Advanced
    Tapatalk doesn't seem to support the table bb code. I just see all the codes and no tables. :(
     
  7. ProximalSuns

    ProximalSuns Senior Member

    Joined:
    Mar 24, 2012
    1,877
    21
    27
    Location:
    PNW
    Vehicle:
    2012 Prius
    Model:
    Three
    Looks like you can just Copy/Paste a table. This from a OfficeMac Excel sheet. Is this what you were trying to do?

    One Two





    One Two




    One Two
     
  8. bwilson4web

    bwilson4web BMW i3 and Model 3

    Joined:
    Nov 25, 2005
    27,917
    15,800
    0
    Location:
    Huntsville AL
    Vehicle:
    2018 Tesla Model 3
    Model:
    Prime Plus
    And a good exercise that also show how the hard <RETURN> are displayed before the table is rendered. Also, you see the use of proportional spaced font.

    This is how I would approach it:
    Column 1
    0 [tr][td]X[/td][td].[/td][td].[/td][/tr][tr][td].[/td][td].[/td][td].[/td][/tr][tr][td].[/td][td].[/td][td].[/td][/tr]
    Trailing table text, use it or just see an extra blank line.

    Notice that the table text is using a mono spaced font.

    Bob Wilson
     
    Stev0 likes this.
  9. bwilson4web

    bwilson4web BMW i3 and Model 3

    Joined:
    Nov 25, 2005
    27,917
    15,800
    0
    Location:
    Huntsville AL
    Vehicle:
    2018 Tesla Model 3
    Model:
    Prime Plus
    Huh? I can't figure this out.

    Perhaps some form of ASCII art?

    Line before the line with the tag:
    [pre]lead line

    This is the second line after the tag.
    The third line with two leading blanks.
    Final line with the tag.[/pre]
    Line after the line with the closing tag.

    Bob Wilson
     
  10. ProximalSuns

    ProximalSuns Senior Member

    Joined:
    Mar 24, 2012
    1,877
    21
    27
    Location:
    PNW
    Vehicle:
    2012 Prius
    Model:
    Three
    Hmm...stole the table info when it posted. Oh well.

    I guess easiest way is tell the non-coders in one's forum is to save the table as a PDF and post it.