Softball Box Score Table

[Aksaunders]

I am building a website for my daughter's softball organization. I am trying to create a "scores" page but I want to be able to quickly add another game's box score information without a lot of effort. This is a 11 column by 3 row table similar to the attached picture. All rows are 15px high. Columns are all 10px wide with the exception of 1st column (24px). Any ideas how I can do this? Attached image shows a baseball game but softball games are only 7 innings long.

[vikram1vicky]

Have you tried to achieve this yourself. If yes then share the code and issue you are facing??

[Aksaunders]

Thanks for the reply. I have a table put together which uses the code at the bottom. The DIV that holds the table is 560px wide. I would like two box scores to line up next to each other. The third table would drop below the first as there is not any more room to the right of the second table. The problem is changing the width in the code doesn't seem to make any difference and each table drops directly below the previous one. I am puzzled.

<h4>June 30, 2011</h4>
<table cellpadding="2" cellspacing="0" border="1" bordercolor="#000">
<tr>
<td align="left" valign="top" width="45" style="border-left-style: solid; border-left-width: 1px; border-right-style: none; border-right-width: medium; border-top-style: solid; border-top-width: 1px; border-bottom-style: none; border-bottom-width: medium" bgcolor="FC4F55">&nbsp;</td>
<td align="left" valign="top" width="2" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top-style: solid; border-top-width: 1px; border-bottom-style: none; border-bottom-width: medium" bgcolor="FC4F55"><font color="#FFFFFF"><b>1</b></font></td>
<td align="left" valign="top" width="2" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top-style: solid; border-top-width: 1px; border-bottom-style: none; border-bottom-width: medium" bgcolor="FC4F55"><font color="#FFFFFF"><b>2</b></font></td>
<td align="left" valign="top" width="2" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top-style: solid; border-top-width: 1px; border-bottom-style: none; border-bottom-width: medium" bgcolor="FC4F55"><font color="#FFFFFF"><b>3</b></font></td>
<td align="left" valign="top" width="2" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top-style: solid; border-top-width: 1px; border-bottom-style: none; border-bottom-width: medium" bgcolor="FC4F55"><font color="#FFFFFF"><b>4</b></font></td>
<td align="left" valign="top" width="2" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top-style: solid; border-top-width: 1px; border-bottom-style: none; border-bottom-width: medium" bgcolor="FC4F55"><font color="#FFFFFF"><b>5</b></font></td>
<td align="left" valign="top" width="2" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top-style: solid; border-top-width: 1px; border-bottom-style: none; border-bottom-width: medium" bgcolor="FC4F55"><font color="#FFFFFF"><b>6</b></font></td>
<td align="left" valign="top" width="2" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top-style: solid; border-top-width: 1px; border-bottom-style: none; border-bottom-width: medium" bgcolor="FC4F55"><font color="#FFFFFF"><b>7</b></font></td>
<td align="left" valign="top" width="2" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top-style: solid; border-top-width: 1px; border-bottom-style: none; border-bottom-width: medium" bgcolor="FC4F55"><font color="#FFFFFF"><b>R</b></font></td>
<td align="left" valign="top" width="2" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top-style: solid; border-top-width: 1px; border-bottom-style: none; border-bottom-width: medium" bgcolor="FC4F55"><font color="#FFFFFF"><b>H</b></font></td>
<td align="left" valign="top" width="2" style="border-left-style: none; border-left-width: medium; border-right-style: solid; border-right-width: 1px; border-top-style: solid; border-top-width: 1px; border-bottom-style: none; border-bottom-width: medium" bgcolor="FC4F55"><font color="#FFFFFF"><b>E</b></font></td>
</tr>

<tr>
<td align="left" width="45" style="border-left-style: solid; border-left-width: 1px; border-right-style: none; border-right-width: medium; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium" bgcolor="#F1E066"><font color="#FF0000">12U Warcats</font></td>
<td align="center" width="2" style="border-style: none; border-width: medium" bgcolor="#F1E066"><font color="#FF0000">2</font></td>
<td align="center" width="2" style="border-style: none; border-width: medium" bgcolor="#F1E066"><font color="#FF0000">0</font></td>
<td align="center" width="2" style="border-style: none; border-width: medium" bgcolor="#F1E066"><font color="#FF0000">2</font></td>
<td align="center" width="2" style="border-style: none; border-width: medium" bgcolor="#F1E066"><font color="#FF0000">1</font></td>
<td align="center" width="2" style="border-style: none; border-width: medium" bgcolor="#F1E066"><font color="#FF0000">0</font></td>
<td align="center" width="2" style="border-style: none; border-width: medium" bgcolor="#F1E066"><font color="#FF0000">7</font></td>
<td align="center" width="2" style="border-style: none; border-width: medium" bgcolor="#F1E066"><font color="#FF0000">2</font></td>
<td align="center" width="2" style="border-style: none; border-width: medium" bgcolor="#F1E066"><font color="#FF0000">14</font></td>
<td align="center" width="2" style="border-style: none; border-width: medium" bgcolor="#F1E066"><font color="#FF0000">22</font></td>
<td align="center" width="2" style="border-left-style: none; border-left-width: medium; border-right-style: solid; border-right-width: 1px; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium" bgcolor="#F1E066"><font color="#FF0000">0</font></td>
</tr>

<tr>
<td align="left" width="45" style="border-left-style: solid; border-left-width: 1px; border-right-style: none; border-right-width: medium; border-top-style: none; border-top-width: medium; border-bottom-style: solid; border-bottom-width: 1px" bgcolor="FC4F55"><font color="#FFFFFF">Olentangy Lightning</font> </td>
<td align="center" width="2" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top-style: none; border-top-width: medium; border-bottom-style: solid; border-bottom-width: 1px" bgcolor="FC4F55"><font color="#FFFFFF">1</font></td>
<td align="center" width="2" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top-style: none; border-top-width: medium; border-bottom-style: solid; border-bottom-width: 1px" bgcolor="FC4F55"><font color="#FFFFFF">0</font></td>
<td align="center" width="2" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top-style: none; border-top-width: medium; border-bottom-style: solid; border-bottom-width: 1px" bgcolor="FC4F55"><font color="#FFFFFF">2</font></td>
<td align="center" width="2" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top-style: none; border-top-width: medium; border-bottom-style: solid; border-bottom-width: 1px" bgcolor="FC4F55"><font color="#FFFFFF">1</font></td>
<td align="center" width="2" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top-style: none; border-top-width: medium; border-bottom-style: solid; border-bottom-width: 1px" bgcolor="FC4F55"><font color="#FFFFFF">0</font></td>
<td align="center" width="2" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top-style: none; border-top-width: medium; border-bottom-style: solid; border-bottom-width: 1px" bgcolor="FC4F55"><font color="#FFFFFF">0</font></td>
<td align="center" width="2" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top-style: none; border-top-width: medium; border-bottom-style: solid; border-bottom-width: 1px" bgcolor="FC4F55"><font color="#FFFFFF">3</font></td>
<td align="center" width="2" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top-style: none; border-top-width: medium; border-bottom-style: solid; border-bottom-width: 1px" bgcolor="FC4F55"><font color="#FFFFFF">7</font></td>
<td align="center" width="2" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top-style: none; border-top-width: medium; border-bottom-style: solid; border-bottom-width: 1px" bgcolor="FC4F55"><font color="#FFFFFF">13</font></td>
<td align="center" width="2" style="border-left-style: none; border-left-width: medium; border-right-style: solid; border-right-width: 1px; border-top-style: none; border-top-width: medium; border-bottom-style: solid; border-bottom-width: 1px" bgcolor="FC4F55"><font color="#FFFFFF">0</font></td>
</tr>

</table>

[vikram1vicky]

Please share image of 2 or 3 table's layout, how it should be look... it will easy for us to help you out.

[teedoff]

I maybe a little confused. How are you populating your original table? The most dynamic way would be using a server side language such as php or coldfusion, storing your game data(statistics) in a database and retrieving any data you need and populating the tables dynamically.

[Aksaunders]

I build websites because I put one together to keep in touch with the family when I was deployed to Iraq and found that I like doing it. As I only do this for fun, I am not familiar with PHP or Coldfusion. Vicky here is a picture of a possible layout along with the original that I attached in the first post.