FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

Convert small table layout to CSS

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


MrBaseball34
Could someone convert this small table layout to CSS for me?
Sample data included...

Code:

Here is the CSS for this stuff:

table.standings {
  font-size:10px;
  border: none;
}

tr.stheader1 {
  background-color:#F9DFB2;
  font-family: Arial, "Veranda", sans-serif;
  font-size:11px;
  color: #00318C;
  text-align: center;
  font-weight: bold;
  border-bottom: 1px solid #00318C;
}

tr.stheader1 td {
 border-top: 1px solid #00318C;
 border-bottom: 1px solid #00318C;
}

tr.stheader2 {
  background-color:#CB0017;
  font-family: Arial, "Veranda", sans-serif;
  font-size:11px;
  font-weight:bold;
  color: #FFFFFF;
}

td.stodd1 {
  background-color:#FFFFFF;
  font-family: Arial, "Veranda", sans-serif;
  font-size:10px;
  color: #000000;
  text-align: left;
}

td.stodd2 {
  background-color:#FFFFFF;
  font-family: Arial, "Veranda", sans-serif;
  font-size:10px;
  color: #000000;
  text-align: center;
}
td.steven1 {
  background-color:#00318C;
  font-family: Arial, "Veranda", sans-serif;
  font-size:10px;
  color: #FFFFFF;
  text-align: left;
}
 
td.steven2 {
  background-color:#00318C;
  font-family: Arial, "Veranda", sans-serif;
  font-size:10px;
  color: #FFFFFF;
  text-align: center;
}

Here's the HTML for the table:

<table border='0' cellpadding='0' cellspacing='0' width='100%' class='standings'>
  <tr>
    <td colspan='5'><center>Standings current as of<br /> Aug 1, 2006</center></td>
  </tr>
  <!-- Begin Austin Standings -->
  <tr class='stheader1'>
    <td colspan='5'>Austin Divison Standings</td>
  </tr>
  <tr class='stheader2'>
    <td width='45%' align='left'>Team</td>
    <td width='10%' align='center'>W</td>
    <td width='15%' align='center'>L</td>
    <td width='10%' align='center'>T</td>
    <td width='20%' align='center'>Pts</td>
  </tr>
  <tr>
    <td width='45%' class='steven1'>Devil Rays</td>
    <td width='10%' class='steven2'>22</td>
    <td width='15%' class='steven2'>1</td>
    <td width='10%' class='steven2'>0</td>
    <td width='20%' class='steven2'>66</td>
  </tr>
  <tr>
    <td width='45%' class='stodd1'>Rangers</td>
    <td width='10%' class='stodd2'>14</td>
    <td width='15%' class='stodd2'>5</td>
    <td width='10%' class='stodd2'>0</td>
    <td width='20%' class='stodd2'>42</td>
  </tr>
  <tr>
    <td width='45%' class='steven1'>White Sox</td>
    <td width='10%' class='steven2'>14</td>
    <td width='15%' class='steven2'>7</td>
    <td width='10%' class='steven2'>0</td>
    <td width='20%' class='steven2'>42</td>
  </tr>
  <tr>
    <td width='45%' class='stodd1'>Nationals</td>
    <td width='10%' class='stodd2'>13</td>
    <td width='15%' class='stodd2'>11</td>
    <td width='10%' class='stodd2'>0</td>
    <td width='20%' class='stodd2'>39</td>
  </tr>
  <tr>
    <td width='45%' class='steven1'>Thunder</td>
    <td width='10%' class='steven2'>11</td>
    <td width='15%' class='steven2'>10</td>
    <td width='10%' class='steven2'>0</td>
    <td width='20%' class='steven2'>33</td>
  </tr>
  <tr>
    <td width='45%' class='stodd1'>Royals</td>
    <td width='10%' class='stodd2'>4</td>
    <td width='15%' class='stodd2'>19</td>
    <td width='10%' class='stodd2'>0</td>
    <td width='20%' class='stodd2'>12</td>
  </tr>
  <tr>
    <td width='45%' class='steven1'>Indians</td>
    <td width='10%' class='steven2'>3</td>
    <td width='15%' class='steven2'>18</td>
    <td width='10%' class='steven2'>0</td>
    <td width='20%' class='steven2'>9</td>
  </tr>
  <!-- End '.Austin.' Standings -->
  <!-- Begin Capitol Standings -->
  <tr class='stheader1'>
    <td colspan='5'>Capitol Divison Standings</td>
  </tr>
  <tr class='stheader2'>
    <td width='45%' align='left'>Team</td>
    <td width='10%' align='center'>W</td>
    <td width='15%' align='center'>L</td>
    <td width='10%' align='center'>T</td>
    <td width='20%' align='center'>Pts</td>
  </tr>
  <tr>
    <td width='45%' class='steven1'>Cardinals</td>
    <td width='10%' class='steven2'>24</td>
    <td width='15%' class='steven2'>1</td>
    <td width='10%' class='steven2'>0</td>
    <td width='20%' class='steven2'>72</td>
  </tr>
  <tr>
    <td width='45%' class='stodd1'>Bombers</td>
    <td width='10%' class='stodd2'>21</td>
    <td width='15%' class='stodd2'>3</td>
    <td width='10%' class='stodd2'>0</td>
    <td width='20%' class='stodd2'>63</td>
  </tr>
  <tr>
    <td width='45%' class='steven1'>Braves</td>
    <td width='10%' class='steven2'>16</td>
    <td width='15%' class='steven2'>7</td>
    <td width='10%' class='steven2'>1</td>
    <td width='20%' class='steven2'>49</td>
  </tr>
  <tr>
    <td width='45%' class='stodd1'>Zephyrs</td>
    <td width='10%' class='stodd2'>13</td>
    <td width='15%' class='stodd2'>11</td>
    <td width='10%' class='stodd2'>0</td>
    <td width='20%' class='stodd2'>39</td>
  </tr>
  <tr>
    <td width='45%' class='steven1'>Astros</td>
    <td width='10%' class='steven2'>11</td>
    <td width='15%' class='steven2'>12</td>
    <td width='10%' class='steven2'>3</td>
    <td width='20%' class='steven2'>36</td>
  </tr>
  <tr>
    <td width='45%' class='stodd1'>Tigers</td>
    <td width='10%' class='stodd2'>11</td>
    <td width='15%' class='stodd2'>14</td>
    <td width='10%' class='stodd2'>0</td>
    <td width='20%' class='stodd2'>33</td>
  </tr>
  <tr>
    <td width='45%' class='steven1'>Orioles</td>
    <td width='10%' class='steven2'>10</td>
    <td width='15%' class='steven2'>15</td>
    <td width='10%' class='steven2'>1</td>
    <td width='20%' class='steven2'>31</td>
  </tr>
  <tr>
    <td width='45%' class='stodd1'>Dodgers</td>
    <td width='10%' class='stodd2'>10</td>
    <td width='15%' class='stodd2'>17</td>
    <td width='10%' class='stodd2'>0</td>
    <td width='20%' class='stodd2'>30</td>
  </tr>
  <tr>
    <td width='45%' class='steven1'>Red Sox</td>
    <td width='10%' class='steven2'>9</td>
    <td width='15%' class='steven2'>14</td>
    <td width='10%' class='steven2'>0</td>
    <td width='20%' class='steven2'>27</td>
  </tr>
  <tr>
    <td width='45%' class='stodd1'>Giants</td>
    <td width='10%' class='stodd2'>7</td>
    <td width='15%' class='stodd2'>17</td>
    <td width='10%' class='stodd2'>1</td>
    <td width='20%' class='stodd2'>22</td>
  </tr>
  <tr>
    <td width='45%' class='steven1'>Cubs</td>
    <td width='10%' class='steven2'>3</td>
    <td width='15%' class='steven2'>24</td>
    <td width='10%' class='steven2'>0</td>
    <td width='20%' class='steven2'>9</td>
  </tr>
  <!-- End '.Capitol.' Standings -->
  <!-- Begin Lone Star Standings -->
  <tr class='stheader1'>
    <td colspan='5'>Lone Star Divison Standings</td>
  </tr>
  <tr class='stheader2'>
    <td width='45%' align='left'>Team</td>
    <td width='10%' align='center'>W</td>
    <td width='15%' align='center'>L</td>
    <td width='10%' align='center'>T</td>
    <td width='20%' align='center'>Pts</td>
  </tr>
  <tr>
    <td width='45%' class='steven1'>Angels</td>
    <td width='10%' class='steven2'>24</td>
    <td width='15%' class='steven2'>2</td>
    <td width='10%' class='steven2'>0</td>
    <td width='20%' class='steven2'>72</td>
  </tr>
  <tr>
    <td width='45%' class='stodd1'>Curve</td>
    <td width='10%' class='stodd2'>18</td>
    <td width='15%' class='stodd2'>7</td>
    <td width='10%' class='stodd2'>0</td>
    <td width='20%' class='stodd2'>54</td>
  </tr>
  <tr>
    <td width='45%' class='steven1'>Pirates</td>
    <td width='10%' class='steven2'>16</td>
    <td width='15%' class='steven2'>8</td>
    <td width='10%' class='steven2'>0</td>
    <td width='20%' class='steven2'>48</td>
  </tr>
  <tr>
    <td width='45%' class='stodd1'>Express</td>
    <td width='10%' class='stodd2'>11</td>
    <td width='15%' class='stodd2'>14</td>
    <td width='10%' class='stodd2'>0</td>
    <td width='20%' class='stodd2'>33</td>
  </tr>
  <tr>
    <td width='45%' class='steven1'>Yankees</td>
    <td width='10%' class='steven2'>9</td>
    <td width='15%' class='steven2'>16</td>
    <td width='10%' class='steven2'>0</td>
    <td width='20%' class='steven2'>27</td>
  </tr>
  <tr>
    <td width='45%' class='stodd1'>Rockies</td>
    <td width='10%' class='stodd2'>8</td>
    <td width='15%' class='stodd2'>16</td>
    <td width='10%' class='stodd2'>0</td>
    <td width='20%' class='stodd2'>24</td>
  </tr>
  <tr>
    <td width='45%' class='steven1'>Salty Dogs</td>
    <td width='10%' class='steven2'>8</td>
    <td width='15%' class='steven2'>17</td>
    <td width='10%' class='steven2'>0</td>
    <td width='20%' class='steven2'>24</td>
  </tr>
  <tr>
    <td width='45%' class='stodd1'>Twins</td>
    <td width='10%' class='stodd2'>5</td>
    <td width='15%' class='stodd2'>19</td>
    <td width='10%' class='stodd2'>0</td>
    <td width='20%' class='stodd2'>15</td>
  </tr>
  <!-- End '.Lone Star.' Standings -->
  <!-- Begin MABL Standings -->
  <tr class='stheader1'>
    <td colspan='5'>MABL Divison Standings</td>
  </tr>
  <tr class='stheader2'>
    <td width='45%' align='left'>Team</td>
    <td width='10%' align='center'>W</td>
    <td width='15%' align='center'>L</td>
    <td width='10%' align='center'>T</td>
    <td width='20%' align='center'>Pts</td>
  </tr>
  <tr>
    <td width='45%' class='steven1'>Texans</td>
    <td width='10%' class='steven2'>16</td>
    <td width='15%' class='steven2'>8</td>
    <td width='10%' class='steven2'>1</td>
    <td width='20%' class='steven2'>49</td>
  </tr>
  <tr>
    <td width='45%' class='stodd1'>Red Wings</td>
    <td width='10%' class='stodd2'>16</td>
    <td width='15%' class='stodd2'>7</td>
    <td width='10%' class='stodd2'>0</td>
    <td width='20%' class='stodd2'>48</td>
  </tr>
  <tr>
    <td width='45%' class='steven1'>Yardbirds</td>
    <td width='10%' class='steven2'>15</td>
    <td width='15%' class='steven2'>9</td>
    <td width='10%' class='steven2'>0</td>
    <td width='20%' class='steven2'>45</td>
  </tr>
  <tr>
    <td width='45%' class='stodd1'>Isotopes</td>
    <td width='10%' class='stodd2'>14</td>
    <td width='15%' class='stodd2'>8</td>
    <td width='10%' class='stodd2'>1</td>
    <td width='20%' class='stodd2'>43</td>
  </tr>
  <tr>
    <td width='45%' class='steven1'>Legends</td>
    <td width='10%' class='steven2'>12</td>
    <td width='15%' class='steven2'>11</td>
    <td width='10%' class='steven2'>0</td>
    <td width='20%' class='steven2'>36</td>
  </tr>
  <tr>
    <td width='45%' class='stodd1'>Colt45s</td>
    <td width='10%' class='stodd2'>11</td>
    <td width='15%' class='stodd2'>12</td>
    <td width='10%' class='stodd2'>0</td>
    <td width='20%' class='stodd2'>33</td>
  </tr>
  <tr>
    <td width='45%' class='steven1'>Athletics</td>
    <td width='10%' class='steven2'>5</td>
    <td width='15%' class='steven2'>20</td>
    <td width='10%' class='steven2'>0</td>
    <td width='20%' class='steven2'>15</td>
  </tr>
  <tr>
    <td width='45%' class='stodd1'>Dirt Bags</td>
    <td width='10%' class='stodd2'>0</td>
    <td width='15%' class='stodd2'>24</td>
    <td width='10%' class='stodd2'>0</td>
    <td width='20%' class='stodd2'>0</td>
  </tr>
  <!-- End '.MABL.' Standings -->
  <!-- Begin Texas Standings -->
  <tr class='stheader1'>
    <td colspan='5'>Texas Divison Standings</td>
  </tr>
  <tr class='stheader2'>
    <td width='45%' align='left'>Team</td>
    <td width='10%' align='center'>W</td>
    <td width='15%' align='center'>L</td>
    <td width='10%' align='center'>T</td>
    <td width='20%' align='center'>Pts</td>
  </tr>
  <tr>
    <td width='45%' class='steven1'>Ironbirds</td>
    <td width='10%' class='steven2'>17</td>
    <td width='15%' class='steven2'>4</td>
    <td width='10%' class='steven2'>0</td>
    <td width='20%' class='steven2'>51</td>
  </tr>
  <tr>
    <td width='45%' class='stodd1'>Twin Cities</td>
    <td width='10%' class='stodd2'>15</td>
    <td width='15%' class='stodd2'>5</td>
    <td width='10%' class='stodd2'>0</td>
    <td width='20%' class='stodd2'>45</td>
  </tr>
  <tr>
    <td width='45%' class='steven1'>Diamondbacks</td>
    <td width='10%' class='steven2'>9</td>
    <td width='15%' class='steven2'>12</td>
    <td width='10%' class='steven2'>0</td>
    <td width='20%' class='steven2'>27</td>
  </tr>
  <tr>
    <td width='45%' class='stodd1'>Padres</td>
    <td width='10%' class='stodd2'>6</td>
    <td width='15%' class='stodd2'>16</td>
    <td width='10%' class='stodd2'>0</td>
    <td width='20%' class='stodd2'>18</td>
  </tr>
  <tr>
    <td width='45%' class='steven1'>Riverdogs</td>
    <td width='10%' class='steven2'>6</td>
    <td width='15%' class='steven2'>16</td>
    <td width='10%' class='steven2'>0</td>
    <td width='20%' class='steven2'>18</td>
  </tr>
  <!-- End '.Texas.' Standings -->
</table>

mariohs
You don't need to convert this layout to non-tables one...
tables are used to present table data, and that's your case...
maybe using some tags like <caption> and <th> would be more semanticaly correct. It would be something like:
Code:

<table>
      <caption>Standings current as of<br /> Aug 1, 2006</caption>
<thead>
  <tr class='stheader2'>
    <th>Team</th>
    <th>W</th>
    <th>L</th>
    <th>T</th>
    <th>Pts</th>
  </tr>
</thead>
<tbody>
... your data here ....
</tbody>
</table>


try to leave attributes like width and text-align into your css...
I have quite a good example of table semantics, but it's portuguese... anyway, if you want to see it...

http://www.revolucao.etc.br/archives/semantica-de-tabelas/
mariohs
I just noticed you got many different regions for your data...
I think it would be better to create tables for each region... like:
Code:

<h1>Standings current as of Aug 1, 2006</h1> <!-- a title -->
<!-- table for Austin Division -->
<table>
   <caption>Austin Divison Standings</caption>
   <thead>
      <tr>
         <th>Team</th>
         <th>W</th>
         <th>L</th>
         <th>T</th>
         <th>Pts</th>
      </tr>
   </thead>
   <tbody>
      ... your data here ....
   </tbody>
</table>
<!-- then, another table for Capitol Division -->
<table>
   <caption>Capitol Divison Standings</caption>
   <thead>
      <tr>
         <th>Team</th>
         <th>W</th>
         <th>L</th>
         <th>T</th>
         <th>Pts</th>
      </tr>
   </thead>
   <tbody>
      ... your data here ....
   </tbody>
</table>


I don't know if it would work for you... but your code would be more semanticaly correct...

remember: you don't need to rip-off the tables, because they are already being correctly used... webstandards is much more than supressing tables and putting divs instead... you have to make your code semanticaly correct...

hope I could help...
MrBaseball34
mariohs wrote:
I just noticed you got many different regions for your
data... I think it would be better to create tables for each region... like:
<SNIP>
remember: you don't need to rip-off the tables, because they are already
being correctly used... webstandards is much more than supressing tables
and putting divs instead... you have to make your code semanticaly
correct...


I don't really like the look when I separate it like that but thanks for the
suggestion.

I am working on converting the entire site to CSS and just had a brain
fart about this. Yes, it is tbular data and, yes, I do now remember that I
shouldn't change this to CSS, thanks.
mariohs
just to clarify things a little bit more... tables and css are completely different things, i think when you say "convert to css" you mean to "convert into a tableless" layout... nothing to do with tables or divs...
css is just something that you have to style your page, independent of your content, independent if you have tables or not...
hope I helped and did not confuse more... Wink
MrBaseball34
Yes, I meant tableless but thanks for the replies.
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.