Creating Styled Tables in BBCode

Have questions or seeking answers regarding anything to do with NET Nation? Here's the place. RATING: PG
Creating Styled Tables in BBCode
Fri Nov 06, 2009 4:46 pm
  • This post viewtopic.php?f=2&t=7093 got me thinking that we needed a better way of showing tabular data on the forums, so I created all of the behind the scenes stuff for the BBCode to do so.

    Let's take that data and put it into a table using BBCode...

    Here is the data unformatted;
    Seattle Tack Ast Sack Yds FFum FumR PD Int Yds IntTD
    K. Lucas 7 0 0.0 0.0 0 0 0 0 0 0
    D. Hawthorne 5 3 2.0 7.0 1 0 1 0 0 0
    L. Hill 5 0 0.0 0.0 0 0 0 0 0 0
    J. Babineaux 4 2 0.0 0.0 0 0 0 0 0 0
    M. Trufant 4 0 0.0 0.0 0 0 0 0 0 0
    D. Grant 2 2 0.0 0.0 0 0 1 0 0 0
    B. Mebane 2 2 0.0 0.0 0 0 0 0 0 0
    L. Jackson 2 1 0.0 0.0 0 0 0 0 0 0
    A. Curry 2 1 0.0 0.0 0 0 1 0 0 0
    D. Tapp 2 1 0.0 0.0 0 0 0 0 0 0
    C. Cole 1 2 0.0 0.0 0 1 0 0 0 0
    J. Wilson 1 1 0.0 0.0 0 0 1 0 0 0
    L. Laury 1 0 0.0 0.0 0 0 0 0 0 0
    R. Bryant 1 0 0.0 0.0 0 0 0 0 0 0
    C. Redding 1 0 0.0 0.0 0 0 0 0 0 0
    D. Butler 1 0 0.0 0.0 0 0 0 0 0 0
    K. Jennings 1 0 0.0 0.0 0 0 1 0 0 0
    M. Unger 1 0 0.0 0.0 0 0 0 0 0 0
    D. Lewis 1 0 0.0 0.0 0 0 0 0 0 0
    W. Herring 0 1 0.0 0.0 0 0 0 0 0 0
    N. Reed 0 1 0.0 0.0 0 0 0 0 0 0
    O. Schmitt 0 1 0.0 0.0 0 0 0 0 0 0

    And formatted;



    Seahawks Defensive Stats
    PlayerTackAstSackYdsFFumFumRPDIntYdsIntTD
    K. Lucas700.00.0000000
    D. Hawthorne532.07.0101000
    L. Hill500.00.0000000
    J. Babineaux420.00.0000000
    M. Trufant400.00.0000000
    D. Grant220.00.0001000
    B. Mebane220.00.0000000
    L. Jackson210.00.0000000
    A. Curry210.00.0001000
    D. Tapp210.00.0000000
    C. Cole120.00.0010000
    J. Wilson110.00.0001000
    L. Laury100.00.0000000
    R. Bryant100.00.0000000
    C. Redding100.00.0000000
    D. Butler100.00.0000000
    K. Jennings100.00.0001000
    M. Unger100.00.0000000
    D. Lewis100.00.0000000
    W. Herring010.00.0000000
    N. Reed010.00.0000000
    O. Schmitt010.00.0000000


    It takes some work to do the formatting (just as it does in HTML) but the results are well worth it on a readability level alone. Not to mention, it adds a little something to the post. This is a pretty decent sized table, so the bbcode gets a little messy when writing it out, so be prepared for the work.

    The BBCode for creating tables is;
    Code: Select all
    The first portion of the table is a heading spanning the entire table. It consists of;

    [table] - Opens the TABLE
    [tr] - Opens the first TABLE ROW
    [tdo=11] - Opens the TABLE HEADING and defines that it will span 11 Columns
    Seahawks Defensive Stats
    [/tdo] - Closes the TABLE HEADING
    [/tr] - Closes the TABLE ROW
    [/table] - Closes the TABLE

    So, typing;
    [table][tr][tdo=11]Seahawks Defensive Stats[/tdo][/tr][/table]

    would yield...
    Seahawks Defensive Stats


    Continuing on;
    Code: Select all
    The second row of the table, has all of the field headings in it, and consists of
    [tr] - Opens the next TABLE ROW
    [th] - Opens the first TABLE FIELD HEADING
    Player
    [/th] - Closes the first TABLE FIELD HEADING...
    [/tr]

    This ROW has 11 TABLE FIELD HEADINGS in it, so the all have to be represented BEFORE you can close out the row. So, the bbcode for ROW 2 would be;

    [tr][th]Player[/th][th]Tack[/th][th]Ast[/th][th]Sack[/th][th]Yds[/th][th]FFum[/th][th]FumR[/th][th]PD[/th][th]Int[/th][th]Yds[/th][th]IntTD[/th][/tr]

    Resulting in;

    PlayerTackAstSackYdsFFumFumRPDIntYdsIntTD


    Each successive row just contains TABLE CELLS, 11 each row, so each row would look something like the following;
    Code: Select all
    [tr] - Opens the next TABLE ROW
    [td] - Opens the first TABLE CELL
    5
    [/td] - Closes the first TABLE CELL...
    [/tr]

    For and entire row that looks like;
    [tr][td]K. Lucas[/td][td]7[/td][td]0[/td][td]0.0[/td][td]0.0[/td][td]0[/td][td]0[/td][td]0[/td][td]0[/td][td]0[/td][td]0[/td][/tr]

    Resulting in;

    K. Lucas700.00.0000000


    Start putting it all together;
    Code: Select all
    The first 3 rows of the table together;

    [table][tr][tdo=11]Seahawks Defensive Stats[/tdo][/tr][tr][th]Player[/th][th]Tack[/th][th]Ast[/th][th]Sack[/th][th]Yds[/th][th]FFum[/th][th]FumR[/th][th]PD[/th][th]Int[/th][th]Yds[/th][th]IntTD[/th][/tr][tr][td]K. Lucas[/td][td]7[/td][td]0[/td][td]0.0[/td][td]0.0[/td][td]0[/td][td]0[/td][td]0[/td][td]0[/td][td]0[/td][td]0[/td][/tr][/table]

    Resulting in;

    Seahawks Defensive Stats
    PlayerTackAstSackYdsFFumFumRPDIntYdsIntTD
    K. Lucas700.00.0000000


    Experiment with it all, and use your preview button to see how it's all coming together...
    User avatar
    Anguish
    * NET Developer *
     
    Posts: 3932
    Joined: Wed Dec 31, 1969 4:00 pm
    Location: Battle Ground, WA


Re: Creating Styled Tables in BBCode
Fri Nov 13, 2009 10:34 pm
  • That's frickin' awesome Neal! Thanks, and great work as always!
    Image

    GO HAWKS!
    User avatar
    FPD
    * NET Admin *
     
    Posts: 998
    Joined: Fri Feb 23, 2007 2:37 pm
    Location: BFE, MT


Re: Creating Styled Tables in BBCode
Fri Dec 11, 2009 5:38 pm
  • Thats just pretty to look at...
    Image
    User avatar
    Blitzer88
    * NET Eeyore *
     
    Posts: 11259
    Joined: Thu Apr 30, 2009 7:47 am
    Location: Pasco, WA


Re: Creating Styled Tables in BBCode
Sun Jan 17, 2010 3:05 pm
  • I get a huge space between my text and the table. What am I dong wrong?

    Danny O'Neil Seattle Times
    http://seattletimes.nwsource.com/html/s ... hes17.html















    College Coaches in the NFL
    YearCoachCollegeNFL teamSeasonsRecordPlayoff appearancesPostseason recordSuper Bowl appearances
    1989Jimmy JohnsonMiamiDallas 544-3637-12
    1991 Bobby Ross Georgia Tech San Diego 5 47-33 3 3-3 1
    1991 Dick MacPherson Syracuse New England 2 8-24 0 0-0 0
    1992 Dennis Green Stanford Minnesota 10 97-62 8 4-8 0
    1995 Tom Coughlin Boston CollegeJacksonville 8 68-60 4 4-4 0
    1995 Rich BrooksOregon St. Louis 2 13-19 0 0-0 0
    1995 Dennis Erickson Miami Seattle 431-33 0 0-0 0
    1997 Steve Mariucci California San Francisco 6 57-394 3-4 0
    1999 Mike Riley Oregon State San Diego 3 14-34 0 0-0 0
    2001 Butch Davis MiamiCleveland 4 24-34 1 0-1 0
    2002 Steve SpurrierFlorida Washington 2 12-20 0 0-0 0
    2003 Dennis Erickson Oregon State San Francisco 2 9-23 0 0-0 0
    2005 Nick Saban LSU Miami 2 15-17 0 0-0 0
    2007 Bobby Petrino Louisville Atlanta 1 3-10 0 0-0 0


    Code: Select all
    Danny O'Neil Seattle Times
    [url]http://seattletimes.nwsource.com/html/seahawks/2010814840_coaches17.html[/url]
    [table][tr][tdo=9]College Coaches in the NFL[/tr]
    [tr][th]Year[/th][th]Coach[/th][th]College[/th][th]NFL team[/th][th]Seasons[/th][th]Record[/th][th]Playoff appearances[/th][th]Postseason record[/th][th]Super Bowl appearances[/th][/tr]
    [tr][th]1989[/th][th]Jimmy Johnson[/th][th]Miami[/th][th]Dallas[/th] [th]5[/th][th]44-36[/th][th]3[/th][th]7-1[/th][th]2[/th][/tr]
    [tr][th]1991[/th] [th]Bobby Ross[/th] [th]Georgia Tech[/th] [th]San Diego[/th] [th]5[/th] [th]47-33[/th] [th]3[/th] [th]3-3[/th] [th]1[/th][/tr]
    [tr][th]1991[/th] [th]Dick MacPherson[/th] [th]Syracuse[/th] [th]New England[/th] [th]2[/th] [th]8-24[/th] [th]0[/th] [th]0-0[/th] [th]0[/th][/tr]
    [tr][th]1992[/th] [th]Dennis Green[/th] [th]Stanford[/th] [th]Minnesota[/th] [th]10[/th] [th]97-62[/th] [th]8[/th] [th]4-8[/th] [th]0[/th][/tr]
    [tr][th]1995[/th] [th]Tom Coughlin[/th] [th]Boston College[/th][th]Jacksonville[/th] [th]8[/th] [th]68-60[/th] [th]4[/th] [th]4-4[/th] [th]0[/th][/tr]
    [tr][th]1995[/th] [th]Rich Brooks[/th][th]Oregon[/th] [th]St. Louis[/th] [th]2[/th] [th]13-19[/th] [th]0[/th] [th]0-0[/th] [th]0[/th][/tr]
    [tr][th]1995[/th] [th]Dennis Erickson[/th] [th]Miami[/th] [th]Seattle[/th] [th]4[/th][th]31-33[/th] [th]0[/th] [th]0-0[/th] [th]0[/th][/tr]
    [tr][th]1997[/th] [th]Steve Mariucci[/th] [th]California[/th] [th]San Francisco[/th] [th]6[/th] [th]57-39[/th][th]4[/th] [th]3-4[/th] [th]0[/th][/tr]
    [tr][th]1999[/th] [th]Mike Riley[/th] [th]Oregon State[/th] [th]San Diego[/th] [th]3[/th] [th]14-34[/th] [th]0[/th] [th]0-0[/th] [th]0[/th][/tr]
    [tr][th]2001[/th] [th]Butch Davis[/th] [th]Miami[/th][th]Cleveland[/th] [th]4[/th] [th]24-34[/th] [th]1[/th] [th]0-1[/th] [th]0[/th][/tr]
    [tr][th]2002[/th] [th]Steve Spurrier[/th][th]Florida[/th] [th]Washington[/th] [th]2[/th] [th]12-20[/th] [th]0[/th] [th]0-0[/th] [th]0[/th][/tr]
    [tr][th]2003[/th] [th]Dennis Erickson[/th] [th]Oregon State[/th] [th]San Francisco[/th] [th]2[/th] [th]9-23[/th] [th]0[/th] [th]0-0[/th] [th]0[/th][/tr]
    [tr][th]2005[/th] [th]Nick Saban[/th] [th]LSU[/th] [th]Miami[/th] [th]2[/th] [th]15-17[/th] [th]0[/th] [th]0-0[/th] [th]0[/th][/tr]
    [tr][th]2007[/th] [th]Bobby Petrino[/th] [th]Louisville[/th] [th]Atlanta[/th] [th]1[/th] [th]3-10[/th] [th]0[/th] [th]0-0[/th] [th]0[/th][/tdo][/tr][/table]
    Idle vaporings of a mind diseased
    Image
    User avatar
    VaporHawk
    NET Veteran
     
    Posts: 1537
    Joined: Sat Mar 03, 2007 8:47 am
    Location: Seattle


Re: Creating Styled Tables in BBCode
Mon Jan 18, 2010 7:56 am
  • When you're typing out the 'code' for the table, you are hitting your enter key after each table row, which is essentialy adding a line break inside the table, which is not allowed, so the board software is just adding them all before the table since it has no idea what to do with them. Take out all of the line breaks and the table renders correctly. I used td rather than th in all but the first row since it is meant to denote the header cells. I also removed all of the spaces between the cell and row code.


    College Coaches in the NFL
    YearCoachCollegeNFL teamSeasonsRecordPlayoff appearancesPostseason recordSuper Bowl appearances
    1989Jimmy JohnsonMiamiDallas544-3637-12
    1991Bobby RossGeorgia TechSan Diego547-3333-31
    1991Dick MacPhersonSyracuseNew England28-2400-00
    1992Dennis GreenStanfordMinnesota1097-6284-80
    1995Tom CoughlinBoston CollegeJacksonville868-6044-40
    1995Rich BrooksOregonSt. Louis213-1900-00
    1995Dennis EricksonMiamiSeattle431-3300-00
    1997Steve MariucciCaliforniaSan Francisco657-3943-40
    1999Mike RileyOregon StateSan Diego314-3400-00
    2001Butch DavisMiamiCleveland424-3410-10
    2002Steve SpurrierFloridaWashington212-2000-00
    2003Dennis EricksonOregon StateSan Francisco29-2300-00
    2005Nick SabanLSUMiami215-1700-00
    2007Bobby PetrinoLouisvilleAtlanta13-1000-00


    Code: Select all
    [table][tr][tdo=9]College Coaches in the NFL[/tr]
    [tr][th]Year[/th][th]Coach[/th][th]College[/th][th]NFL team[/th][th]Seasons[/th][th]Record[/th][th]Playoff appearances[/th][th]Postseason record[/th][th]Super Bowl appearances[/th][/tr][tr][td]1989[/td][td]Jimmy Johnson[/td][td]Miami[/td][td]Dallas[/td][td]5[/td][td]44-36[/td][td]3[/td][td]7-1[/td][td]2[/td][/tr][tr][td]1991[/td][td]Bobby Ross[/td][td]Georgia Tech[/td][td]San Diego[/td][td]5[/td][td]47-33[/td][td]3[/td][td]3-3[/td][td]1[/td][/tr][tr][td]1991[/td][td]Dick MacPherson[/td][td]Syracuse[/td][td]New England[/td][td]2[/td][td]8-24[/td][td]0[/td][td]0-0[/td][td]0[/td][/tr][tr][td]1992[/td][td]Dennis Green[/td][td]Stanford[/td][td]Minnesota[/td][td]10[/td][td]97-62[/td][td]8[/td][td]4-8[/td][td]0[/td][/tr][tr][td]1995[/td][td]Tom Coughlin[/td][td]Boston College[/td][td]Jacksonville[/td][td]8[/td][td]68-60[/td][td]4[/td][td]4-4[/td][td]0[/td][/tr][tr][td]1995[/td][td]Rich Brooks[/td][td]Oregon[/td][td]St. Louis[/td][td]2[/td][td]13-19[/td][td]0[/td][td]0-0[/td][td]0[/td][/tr][tr][td]1995[/td][td]Dennis Erickson[/td][td]Miami[/td][td]Seattle[/td][td]4[/td][td]31-33[/td][td]0[/td][td]0-0[/td][td]0[/td][/tr][tr][td]1997[/td][td]Steve Mariucci[/td][td]California[/td][td]San Francisco[/td][td]6[/td][td]57-39[/td][td]4[/td][td]3-4[/td][td]0[/td][/tr][tr][td]1999[/td][td]Mike Riley[/td][td]Oregon State[/td][td]San Diego[/td][td]3[/td][td]14-34[/td][td]0[/td][td]0-0[/td][td]0[/td][/tr][tr][td]2001[/td][td]Butch Davis[/td][td]Miami[/td][td]Cleveland[/td][td]4[/td][td]24-34[/td][td]1[/td][td]0-1[/td][td]0[/td][/tr][tr][td]2002[/td][td]Steve Spurrier[/td][td]Florida[/td][td]Washington[/td][td]2[/td][td]12-20[/td][td]0[/td][td]0-0[/td][td]0[/td][/tr][tr][td]2003[/td][td]Dennis Erickson[/td][td]Oregon State[/td][td]San Francisco[/td][td]2[/td][td]9-23[/td][td]0[/td][td]0-0[/td][td]0[/td][/tr][tr][td]2005[/td][td]Nick Saban[/td][td]LSU[/td][td]Miami[/td][td]2[/td][td]15-17[/td][td]0[/td][td]0-0[/td][td]0[/td][/tr][tr][td]2007[/td][td]Bobby Petrino[/td][td]Louisville[/td][td]Atlanta[/td][td]1[/td][td]3-10[/td][td]0[/td][td]0-0[/td][td]0[/td][/tdo][/tr][/table]
    User avatar
    Anguish
    * NET Developer *
     
    Posts: 3932
    Joined: Wed Dec 31, 1969 4:00 pm
    Location: Battle Ground, WA


Re: Creating Styled Tables in BBCode
Mon Jan 18, 2010 1:53 pm
  • Thanks! That make total sense. I see now about 'th' vs 'td' too.
    User avatar
    VaporHawk
    NET Veteran
     
    Posts: 1537
    Joined: Sat Mar 03, 2007 8:47 am
    Location: Seattle


Re: Creating Styled Tables in BBCode
Mon Jan 18, 2010 2:56 pm
  • I'm just happy someone is actually attempting to use it. ;) Kudos for your first attempt!!
    User avatar
    Anguish
    * NET Developer *
     
    Posts: 3932
    Joined: Wed Dec 31, 1969 4:00 pm
    Location: Battle Ground, WA


Re: Creating Styled Tables in BBCode
Mon Aug 16, 2010 2:06 am
  • Hey Neal, I made my first attempt for the 2010 Season Prediction thread in the main forum. The table I made is below.

    I do have a question: Is there way to left justify the table itself and/or the text in each cell?

    2010 Season Prediction
    OpponentWin or LossRecord
    vs. San Francisco 49ersWin1-0
    at Denver BroncosLoss1-1
    vs. San Diego ChargersWin2-1
    at St. Louis RamsWin3-1
    at Chicago BearsLoss3-2
    vs. Arizona CardinalsWin4-2
    at Oakland RaidersWin5-2
    vs. N.Y. GiantsLoss5-3
    at Arizona CardinalsLoss5-4
    at New Orleans SaintsLoss5-5
    vs. Kansas City ChiefsWin6-5
    vs. Carolina PanthersWin7-5
    at San Francisco 49ersLoss7-6
    vs. Atlanta FalconsLoss7-7
    at Tampa Bay BuccaneersLoss7-8
    vs. St. Louis RamsWin8-8



    Here's the code if anyone wants to just copy and paste what is in the code box below and insert their own predictions:

    Code: Select all
    [table][tr][tdo=3]2010 Season Prediction[/tdo][/tr][tr][th]Opponent[/th][th]Win or Loss[/th][th]Record[/th][/tr][tr][td]vs. San Francisco 49ers[/td][td]Win[/td][td]1-0[/td][/tr][tr][td]at Denver Broncos[/td][td]Loss[/td][td]1-1[/td][/tr][tr][td]vs. San Diego Chargers[/td][td]Win[/td][td]2-1[/td][/tr][tr][td]at St. Louis Rams[/td][td]Win[/td][td]3-1[/td][/tr][tr][td]at Chicago Bears[/td][td]Loss[/td][td]3-2[/td][/tr][tr][td]vs. Arizona Cardinals[/td][td]Win[/td][td]4-2[/td][/tr][tr][td]at Oakland Raiders[/td][td]Win[/td][td]5-2[/td][/tr][tr][td]vs. N.Y. Giants[/td][td]Loss[/td][td]5-3[/td][/tr][tr][td]at Arizona Cardinals[/td][td]Loss[/td][td]5-4[/td][/tr][tr][td]at New Orleans Saints[/td][td]Loss[/td][td]5-5[/td][/tr][tr][td]vs. Kansas City Chiefs[/td][td]Win[/td][td]6-5[/td][/tr][tr][td]vs. Carolina Panthers[/td][td]Win[/td][td]7-5[/td][/tr][tr][td]at San Francisco 49ers[/td][td]Loss[/td][td]7-6[/td][/tr][tr][td]vs. Atlanta Falcons[/td][td]Loss[/td][td]7-7[/td][/tr][tr][td]at Tampa Bay Buccaneers[/td][td]Loss[/td][td]7-8[/td][/tr][tr][td]vs. St. Louis Rams[/td][td]Win[/td][td]8-8[/td][/tr][/table]
    Image

    GO HAWKS!
    User avatar
    FPD
    * NET Admin *
     
    Posts: 998
    Joined: Fri Feb 23, 2007 2:37 pm
    Location: BFE, MT




It is currently Wed Nov 26, 2014 12:39 pm

Please REGISTER to become a member

Return to [ THE NET NATION FAQ FORUM ]




Information
  • Who is online
  • Users browsing this forum: No registered users and 2 guests