Today I hacked a box score table from ESPN and turned it into a Game Score Card. I love scoring baseball games - and I know there are a lot hard core fans of the game who do too. For some time now I've been meaning go out on the internet and find a scoring table so I could keep a score card online. I checked the commons about 5 years ago and nothing. Today I checked again and aside from propitiatory Windows Office based tables that required scary downloads of software from places with no history - nothing.So I made one. On my browser the header of each score card wants about a 3" space above it --Why?? I can't figure that out. Other than that though - I'm really happy with it.
I'm going to keep score with it as the Toronto Blue Jays visit the Chicago White Sox tonight. The game starts at 8:07 PM EDT, 7:07 Central Daylight Time. If it works well I might live blog a game at a later date.
| Michael Holloway's HTML Score Card | ||||||||||
| Toronto | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | |
| F Lewis LF | BH7 | _ | _ | _ | _ | _ | _ | _ | _ | |
| _______ | _ | _ | _ | _ | _ | _ | _ | _ | _ | |
| _______ | _ | _ | _ | _ | _ | _ | _ | _ | _ | |
| _______ | _ | _ | _ | _ | _ | _ | _ | _ | _ | |
| _______ | _ | _ | _ | _ | _ | _ | _ | _ | _ | |
| _______ | _ | _ | _ | _ | _ | _ | _ | _ | _ | |
| _______ | _ | _ | _ | _ | _ | _ | _ | _ | _ | |
| _______ | _ | _ | _ | _ | _ | _ | _ | _ | _ | |
| _______ | _ | _ | _ | _ | _ | _ | _ | _ | _ | |
| Michael Holloway's HTML Score Card | ||||||||||
| Chicago | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | |
| _______ | _ | _ | _ | _ | _ | _ | _ | _ | _ | |
| _______ | _ | _ | _ | _ | _ | _ | _ | _ | _ | |
| _______ | _ | _ | _ | _ | _ | _ | _ | _ | _ | |
| _______ | _ | _ | _ | _ | _ | _ | _ | _ | _ | |
| _______ | _ | _ | _ | _ | _ | _ | _ | _ | _ | |
| _______ | _ | _ | _ | _ | _ | _ | _ | _ | _ | |
| _______ | _ | _ | _ | _ | _ | _ | _ | _ | _ | |
| _______ | _ | _ | _ | _ | _ | _ | _ | _ | _ | |
It's easy to add new data. In the 'Compose' or 'Rich Text' tab I can...
- Add names to the line-up
- Mark in scores in each inning as plays happen
- Go back to previous at-bats and add data
..all with out switching into html.
Tonight I'll be inventing icons that a keyboard can create to stand in for the pencil marks that have been developed over 140 years of baseball scoring.
Open Source and Free to Change
Grab a copy of this blank score card and try it out in your blog. Just high-light the table (hold down the left click button on your mouse, drag the cursor from the bottom to the top of the table, then let off the button and right click - which opens a window - and left click on 'copy'). Now go to your blog and open New Post and - with the tab set at the 'Compose' or 'Rich Text' setting - paste. Then click over to the 'html and the code should show, save as a draft and put it away for future use.
You can change any part of the table fairly easily, if you've read a little code here and there.
Below is the 'Header' html, the red and yellow band across the top of the table that says 'Michael Holloway's HTML Score Card':
Where the code reads,"tbody tr style="color: rgb(255, 204, 102)", that's the words in the thick bar; I changed that from black to a yellow. Where it says "background-color: rgb(153, 0, 0)", that's the bar itself. I've changed that from gray to my favorite red.
To Change the words, find where it says "Michael Holl..." between these tags >____<, delete my words and type what ever you want. To get new color code just type in a word in your blog, high light it and choose a colour from your blog color menu. Once it's the colour you want click over to html, high light "color: rgb(255, 204, 102)", copy it and paste it over the existing code in the table's html. You can add extra innings too!
Where the code reads, " 'open td tag', width = 6%, 10, 'close td tag' ", that's the 'innings column' the tenth one going sideways that appears as a 10 in the header - copy it and then paste it right next to what you just copied, after the ">" tag. Then change the 10 to an 11. That gives you a title for the next column of boxes for each batter.Then you have to add a box to the end of each player code line who's going to bat after 10 innings. The code below shows the players name and then 10 boxes for data, placed side by side...(I've typed in "Fred Lewis LF" in the name column, and "BH7" in Fred Lewis' first inning at-bat box)
.. copy one of the "td, blank, close td" tags and paste it right before the last tag (before the "close tr" tag. As always all these must be inside of the '<' and '>' tags). That will put another box in the 11th inning column for that one player. Now continue pasting that extra code set onto each players code line. (Since I took these screen shots - that have 10 columns - I have edited the code down to a 9 column tables, displayed at the top.)
Now your a Hacker and a hard core student of the game! :)
Re-purposed box score table code from ESPN.
mh
