Convert Table Layout into CSS layout

HTML & CSS
1

Please help me convert this table layout into a CSS layout.

<table>
<tr>
<td><strong>Price</strong></td>
<td>R299.00</td>
</tr>

  &lt;tr&gt;
      &lt;td&gt;&lt;strong&gt;You Save&lt;/strong&gt;&lt;/td&gt; 
      &lt;td&gt;62%&lt;/td&gt;
  &lt;/tr&gt;

   &lt;tr&gt;
          &lt;td&gt;&lt;strong&gt;Indicative Market Price&lt;/strong&gt;&lt;/td&gt;
          &lt;td&gt; R800.00&lt;/td&gt;
    &lt;/tr&gt;
  
     &lt;tr&gt;
              &lt;td&gt;   &lt;strong&gt;Available Till&lt;/strong&gt;&lt;/td&gt;
              &lt;td&gt;    1 Apr 23:30&lt;/td&gt;                
     &lt;/tr&gt;
      
      &lt;tr&gt;
                  &lt;td&gt;&lt;strong&gt;Item Condition&lt;/strong&gt;&lt;/td&gt; 
                   &lt;td&gt;New&lt;/td&gt;          
      &lt;/tr&gt;

</table>

It looks something like:

Price R299.00
You Save 62%
Indicative Market Price R800.00
Available Till 1 Apr 23:30
Item Condition New

2

This is html:

<dl>
<dt>Price</dt>
<dd>R299.00</dd>
<dt>You Save</dt>
<dd>62%</dd>
</dl>

and this is css:

dt { display: block; float: left; max-width: 200px; clear: left; }
dd { display: block; margin-left: 201px; }

or this:

dt { display: block; margin: 0; margin-right: 10px; padding: 0; float: left; min-width: 100px; clear: left; }
dd { display: block; margin: 0; padding: 0; float: left; }

3

Question - why do you want to change it? That is tabular data - OK, so it’s a fairly small table, but it is still a table. The only thing I would do to the markup to improve it would be to replace the first <td> in each row with a <th>, which shows that it’s a header cell rather than a data cell (and will then usually be shown in bold by default).

There’s nothing wrong with using tables for tabular data. That’s what they’re there for!

4

Im new to CSS and thought that CSS was bad for any kind of layout??

5

It’s a common misconception.

If you’ve got tabular data, ie 2 or more columns of data/text that is related to headings at the top or down the side, use a table. That’s what it’s there for!

What you should not be doing is using a table to lay out a whole page where there isn’t that relationship, and you’re just using it to position items around the page. That’s when you should be using CSS instead.

But tables have always had their place, and will continue to have their place. The trick is knowing when is the right time to use them and when is the wrong time!

6