www.webdeveloper.com
Results 1 to 6 of 6

Thread: Convert Table Layout to CSS Layout

  1. #1
    Join Date
    Aug 2006
    Location
    Michigan
    Posts
    1,046

    Convert Table Layout to CSS Layout

    Newbie to CSS here,

    I have a site developed with Tables, Frames ans Framesets. Is there an easy way to convert this into a CSS based layout?

    I would at least like to remove the table and use Divs with CSS placement, but I have never attempted this before. Any Guidelines would be nice.

    The site uses PHP for most of it, also the site is very data driven, so the tables are populated on the fly using MySQL.

    Can I substitute this

    Code:
    <table>
    <tr>
    <td>PHP to generate my MySQL data here</td>
    </tr>
    </table>
    with a better way?

  2. #2
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    Thank goodness you're working towards a better layout -- the previous one sounds like a nightmare!

    This online CSS layout generator might help you:
    http://www.positioniseverything.net/...maker_form.php

    or these tutorials:
    http://www.glish.com/css/

    KDLA
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

  3. #3
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    In general the sub for that would be
    <div>PHP to generate my MySQL data here</div>
    but the way you develop a CSS page is radically different from the way you do it with tables.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  4. #4
    Join Date
    Aug 2006
    Location
    Michigan
    Posts
    1,046
    I guess another question I would have is how do I get the table, table row, table data structure using CSS with div tags?

    My SQL queries are returning the table data right now, how would I do the same thing with CSS.

    would it be something like

    Code:
    <div class=table>
    <div class=tr>
    <div class=td>MySQL Returned results</div>
    </div>
    </div>
    and then how would I do the CSS to get the position of a table like div or div like table?

  5. #5
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    (If it is tabular data, you're justified in using a table.)

    You can use floated lists:
    Code:
    <div id="container">
    <ul id="col1">
    <li>MySQL...</li>
    </ul>
    <ul id="col2">
    <li>MSQL...</li>
    </ul>
    </div>
    KDLA
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

  6. #6
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    If the queries are actually returning rows of tabular data then a table is the right mark up. If they are returning managed content then that managed content should be marked up semantically.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles