FRIHOST • FORUMS • SEARCH • 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.
Related topics

Okay, I'm done trying to use CSS for layout.
css right align
table in CSS
Tabular layout dilemma
What's the best for page layout? CSS or using Tables?
Flash is for...?
My first PHP + mySQL page - Need feedback
CSS And Tables: The Hype And The Trends
Funny Pictures!
How to make a Html post in Phpnuke
Is CSS a replacement of tables or assisting method of them ?
Need Expert help in php-mysql
Need help coding template.
A div space issue.
CSS Class problem SOLVED
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.