Creating Styled Tables in BBCode

Anguish

New member
Joined
Dec 31, 1969
Messages
4,866
Reaction score
0
Location
Battle Ground, WA
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;


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
[tdo=11]Seahawks Defensive Stats[/tdo]

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:
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...
[tdo=11]Seahawks Defensive Stats[/tdo]

Continuing on;
Code:
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:
[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:
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;

PlayerTackAstSackYdsFFumFumRPDIntYdsIntTD
K. Lucas700.00.0000000
[tdo=11]Seahawks Defensive Stats[/tdo]

Experiment with it all, and use your preview button to see how it's all coming together...
 

FPD

Well-known member
Joined
Feb 23, 2007
Messages
1,347
Reaction score
139
That's frickin' awesome Neal! Thanks, and great work as always!
 

VaporHawk

New member
Joined
Mar 3, 2007
Messages
1,576
Reaction score
0
Location
Seattle
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
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
[tdo=9]College Coaches in the NFL [/tdo]

Code:
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]
 
OP
OP
Anguish

Anguish

New member
Joined
Dec 31, 1969
Messages
4,866
Reaction score
0
Location
Battle Ground, WA
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.

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
[tdo=9]College Coaches in the NFL [/tdo]

Code:
[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]
 

FPD

Well-known member
Joined
Feb 23, 2007
Messages
1,347
Reaction score
139
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?

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
[tdo=3]2010 Season Prediction[/tdo]


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:
[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]
 
Top