How to EASILY make tables for Fanposts

by FlimtotheFlam on Nov 21, 2009 5:36 PM EST

Nothing I have found on SBNation has been anywhere as frustrating as making tables for fanposts. It simply just didn't work for me no matter what I tried. After a lot of trial, practice, and googling I will share my knowledge with you all.

Everything I will be using is free and pretty basic. First things first is you need a spreadsheet. I recommend using Google Documents. I like because it is simple, free, easy to share info on, and a lot of info already on. For my example of the table. I am going to use 2010 UZR Projections.

1. Go to File -> Download As -> CSV (this will show up as an excel file if you have excel installed)

2. Go to the Folder where you download the file. Right Click on it and Open With -> Notepad

3. It is going to look like a mess with your data and commas. Copy the data out of notepad and paste into the box here. Hit Submit.

4. Now that should make it into a HTML table for you. From here simply click on the "HTML View" . Copy the html from box and copy it here. It should look like this when you are done

MLB ID	Name	Position	Projected UZR	Number of Games at Position in Last 4 Years	First Name	Last Name
2187	Reggie Abercrombie	CF	-1.9	114	Reggie	Abercrombie
945	Bobby Abreu	RF	-12.1	587	Bobby	Abreu
4519	Russ Adams	2B	-2.2	52	Russ	Adams
261	Moises Alou	RF	-2.1	81	Moises	Alou
261	Moises Alou	LF	-2.4	108	Moises	Alou
1	Alfredo Amezaga	CF	4.6	255	Alfredo	Amezaga
6144	Brian Anderson	CF	0.5	298	Brian	Anderson
6032	Josh Anderson	CF	-1.0	77	Josh	Anderson
2	Garret Anderson	LF	-3.6	385	Garret	Anderson

Pretty basic looking table but I am going to show you how to spruce it up a little bit. First off lets add a border. Simply when you see the code <table align="left" width="100%%"> add <table border="1"> after it.

Now lets make those headers stand out a little more. Headers are simply the first row of the table explaining what is underneath. In my example it is

<tr>

<td>Position</td>

<td>Projected UZR</td>

<td>Number of Games at Position in Last 4 Years</td>

<td>First Name</td>

</tr>

Now all you have to do make the headers stand out is replace the td to th so it looks like this

<tr>

<th>Position</th>

<th>Projected UZR</th>

<th>Number of Games at Position in Last 4 Years</th>

<th>First Name</th>

</tr>

Now this what the table looks like with the changes done.

MLB ID	Name	Position	Projected UZR	Number of Games at Position in Last 4 Years	First Name	Last Name
2187	Reggie Abercrombie	CF	-1.9	114	Reggie	Abercrombie
945	Bobby Abreu	RF	-12.1	587	Bobby	Abreu
4519	Russ Adams	2B	-2.2	52	Russ	Adams
261	Moises Alou	RF	-2.1	81	Moises	Alou
261	Moises Alou	LF	-2.4	108	Moises	Alou
1	Alfredo Amezaga	CF	4.6	255	Alfredo	Amezaga
6144	Brian Anderson	CF	0.5	298	Brian	Anderson
6032	Josh Anderson	CF	-1.0	77	Josh	Anderson
2	Garret Anderson	LF	-3.6	385	Garret	Anderson

I hope this fanpost helps some people out who not to long ago were in a situation where I was.

Tweet Comment 14 comments | 11 recs |

Do you like this story?

Comments

very nice

Of course, hope means being cut down on some street corner, as you run like mad, by a random bullet.

by prophetjohn on Nov 21, 2009 5:40 PM EST reply actions

well done Flim

wonderful century of failure

by _pistol_ on Nov 22, 2009 10:49 AM EST reply actions

Seconded.

And rec’d.

Now with extra feisty!

by spants on Nov 22, 2009 1:30 PM EST up reply actions

don't you mean second'd

by vivaelpujols on Nov 22, 2009 7:25 PM EST up reply actions

ARROW'D!!!!

They say that it's never too late, but you don't get any younger...

by Valatan on Nov 22, 2009 8:36 PM EST up reply actions

A slightly modified alternative

If you want to do some table formatting but don’t want to edit the HTML directly as Flim did above, you can use a slightly modified procedure.

The first step is to make your table in google docs as a document (not as a spreadsheet). To do so, create a new document then insert→table. You can format this table however you like: add bold, italics, color, links, etc.

To extract the HTML for the table, go edit→Edit HTML

Copy everything from the HTML view between the < table> and < / table> tags, including the table tags themselves (it’ll be almost the entire document except for a couple < div> tags, probably).

You can then post that HTML into the fanpost as Flim described, with all the formatted goodness intact.

by brackenthebox on Nov 23, 2009 8:30 AM EST reply actions

google docs is a pretty good html editor in general

For any blog work I do, I generally compose it in a google document, then grab the html as I described. It handles all the formatting, links, image embedding, etc, very easily.

by brackenthebox on Nov 23, 2009 10:34 AM EST up reply actions