1. Home
  2. Forums Index
  3. Browser Side / CSS 5:17 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Changing a table to css?

         

nootkan

6:16 am on Apr 2, 2010 (gmt 0)

10+ Year Member



Hi, I've searched through this forum (which is quite large) and either missed my answer, misunderstood the right answer or not looking in the right places. Forgive me if I've missed it. I have very little experience with css and hence the reason I tried to use a table instead. I want to change the html code below to css and cannot seem to figure out how to do it. I was trying to center the table on the page in my cms and everything I've tried table align="center" etc didn't work so I read somewhere that using css would work. I didn't want to make this post too long so I didn't post any of the trials using css that didn't work for me. Can anyone help me out? 

<table style="center: width: 600px;" border="0">
<tbody>
<tr valign="top">
<td style="text-align: center;"><img src="coin_images/package-box.gif" border="0" alt="My Website Bronze Package" title="Bronze Web Hosting Package" width="200" height="223" /></td>
<td style="text-align: center;"><img src="coin_images/package-box2.gif" border="0" alt="My 
Website Silver Package" title="Silver Web Hosting Package" width="200" height="223" /></td>
<td style="text-align: center;"><img src="coin_images/package-box3.gif" border="0" alt="My Website Gold Package" title="Gold Web Hosting Package" width="200" height="223" /></td>
</tr>
<tr>
<td style="text-align: center;"><strong>$9.95</strong></td>
<td style="text-align: center;"><strong>$14.95</strong></td>
<td style="text-align: center;"><strong>$19.95</strong></td>
</tr>
<tr>
<td style="text-align: center;"><a href="mod.php?mod=orders&amp;ord_prod_id=1"><img src="coin_images/sign_up_title.gif" border="0" alt="My Website Sign Up" title="Bronze Web Hosting Sign Up" width="57" height="15" /></a></td>
<td style="text-align: center;"><a href="mod.php?mod=orders&amp;ord_prod_id=2"><img src="coin_images/sign_up_title.gif" border="0" alt="My Website Sign Up" title="Silver Web Hosting Sign Up" width="57" height="15" /></a></td>
<td style="text-align: center;"><a href="mod.php?mod=orders&amp;ord_prod_id=3"><img src="coin_images/sign_up_title.gif" border="0" alt="My Website Sign Up" title="Gold Web Hosting Sign Up" width="57" height="15" /></a></td>
</tr>
</tbody>
</table>


Doctype is below: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>

nootkan

7:07 am on Apr 2, 2010 (gmt 0)

10+ Year Member



It never fails as soon as I post for help I figure out the answer. For those who may read this post, I just changed the table style to read: 

<table style='margin: 0px auto;'>


and voila my table is now centered on my page. Now I will still try to learn how to recreate this using css so any help there is appreciated while I do some more research. Maybe a table is the best way to do this?

lavazza

5:55 am on Apr 4, 2010 (gmt 0)

10+ Year Member



>> Maybe a table is the best way to do this?

Maybe... especially if the data was laid out in rows (left-to-right) rather than in columns (top-to-bottom)

Anyhoo...

CSS alternatives are easy to find :)

Here's one adapted from code that I got from SuzyUK [webmasterworld.com] - it's valid CSS and HTML4 (transitional OR strict) and works in all common browsers 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> 
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <style type="text/css">
      body {
       background:#eee; 
       color:#006;
       margin: 0 5%; 
       height:100%; 
       overflow:auto;
       font-family: Arial,Verdana,Helvetica,sans-serif; 
       font-size:0.8em;
      }
      .packages {
       text-align:center;
       margin:auto;
       background:#ddd;
      }
      .packages img, #footer img {
       border:0;
      }
      .packages p {
       display:inline;
       text-align:center;
       font-size:1em;
       margin:0.1em;
      }
      .packages span {
       display:table-cell;
       display:inline-table;
       display:inline-block;
       font-weight: bold;
       vertical-align:bottom;
       margin:0.5em;
       width:200px;
       max-width:250px;
       background-color:transparent;
      }
      .packages p img {
       margin-top:0px;
       vertical-align:bottom;
      }
      #footer {
       margin:1em auto 1em auto; 
       background:#ccc; 
       text-align:center;
      }
  </style>
  <title> Changing a table to CSS</title>
 </head>
 <body>
  <h1>
      <a href="http://www.webmasterworld.com/css/4108758.htm">Changing a table to css </a>
  </h1>
  <h2>
      Table version
  </h2>
<table style='margin: 0px auto;'> 
<tbody>
<tr valign="top">
<td style="text-align: center;"><img src="coin_images/package-box.gif" alt="My 
Website Bronze Package" title="Bronze Web Hosting Package" width="200" height="223"></td>
<td style="text-align: center;"><img src="coin_images/package-box2.gif" alt="My
Website Silver Package" title="Silver Web Hosting Package" width="200" height="223"></td>
<td style="text-align: center;"><img src="coin_images/package-box3.gif" alt="My 
Website Gold Package" title="Gold Web Hosting Package" width="200" height="223"></td>
</tr>
<tr>
<td style="text-align: center;"><strong>$9.95</strong></td>
<td style="text-align: center;"><strong>$14.95</strong></td>
<td style="text-align: center;"><strong>$19.95</strong></td>
</tr>
<tr>
<td style="text-align: center;"><a href="mod.php?mod=orders&amp;ord_prod_id=1">
<img src="coin_images/sign_up_title.gif" alt="My Website Sign Up" title="Bronze Web Hosting Sign Up" 
width="57" height="15"></a></td>
<td style="text-align: center;"><a href="mod.php?mod=orders&amp;ord_prod_id=2">
<img src="coin_images/sign_up_title.gif" alt="My Website Sign Up" title="Silver Web Hosting Sign Up" 
width="57" height="15"></a></td>
<td style="text-align: center;"><a href="mod.php?mod=orders&amp;ord_prod_id=3">
<img src="coin_images/sign_up_title.gif" alt="My Website Sign Up" title="Gold Web Hosting Sign Up" 
width="57" height="15"></a></td>
</tr>
</tbody>
</table> 
  <h2>
      CSS version
  </h2>
  <div class="packages">
      <p>
       <span>
          <img src="coin_images/package-box.gif" 
            alt="My Website Bronze Package" 
            title="Bronze Web Hosting Package">
            <br> $9.95
            <br> <a href="mod.php?mod=orders&amp;ord_prod_id=1"
                    title="Bronze Web Hosting Sign Up">
                    <img  src="coin_images/sign_up_title.gif" 
                      alt="My Website Sign Up"></a>
       </span>
      </p>
      <p>
       <span>
          <img src="coin_images/package-box2.gif" 
            alt="My Website Silver Package" 
            title="Silver Web Hosting Package">
            <br> $14.95
            <br> <a href="mod.php?mod=orders&amp;ord_prod_id=2"
                    title="Silver Web Hosting Sign Up">
                    <img src="coin_images/sign_up_title.gif" 
                      alt="My Website Sign Up">
                 </a> 
       </span>
      </p>
      <p>
       <span>
          <img  src="coin_images/package-box3.gif" 
            alt="My Website Gold Package" 
            title="Gold Web Hosting Package">
            <br> $19.95
            <br> <a href="mod.php?mod=orders&amp;ord_prod_id=3"
                    title="Gold Web Hosting Sign Up">
                    <img  src="coin_images/sign_up_title.gif" 
                      alt="My Website Sign Up"></a>
       </span>
      </p>
  </div>
  <div id="footer">
      <a  href="http://validator.w3.org" 
          title="HTML validator"> 
          <img  src="http://validator.w3.org/images/valid_icons/valid-html401"
            alt="hot-link from w3.org"></a> 
      &nbsp; &nbsp; 
      <a  href="http://jigsaw.w3.org/css-validator/"
          title="CSS validator"> 
          <img  src="http://jigsaw.w3.org/css-validator/images/vcss" 
            alt="hot-link from w3.org"></a>  
  </div>      
 </body>
</html>


Note that the CSS version does NOT specify widths and heights for images - that's best done by using the right sized images

nootkan

2:57 am on Apr 5, 2010 (gmt 0)

10+ Year Member



Thanks for your help, I'll give this a try and see how it looks. Much appreciated.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 5:17 pm May 1, 2026