SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    May 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Convert Table Layout into CSS layout

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

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

    <tr>
    <td><strong>You Save</strong></td>
    <td>62%</td>
    </tr>

    <tr>
    <td><strong>Indicative Market Price</strong></td>
    <td> R800.00</td>
    </tr>

    <tr>
    <td> <strong>Available Till</strong></td>
    <td> 1 Apr 23:30</td>
    </tr>

    <tr>
    <td><strong>Item Condition</strong></td>
    <td>New</td>
    </tr>
    </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. #2
    Forums Designer
    Join Date
    Jun 2004
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by HalfMan View Post
    Please help me convert this table layout into a CSS layout.
    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. #4
    SitePoint Member
    Join Date
    May 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Im new to CSS and thought that CSS was bad for any kind of layout??

  5. #5
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    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!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •