1. Attachments are working again! Check out this thread for more details and to report any other bugs.

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,165
    15,410
    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,093
    2,101
    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,433
    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,165
    15,410
    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,165
    15,410
    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,165
    15,410
    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.