Convert Table Layout to CSS Layout

This site is best viewed in a modern browser with JavaScript enabled.

Phill_Pafford

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

<table>
<tr>
<td>PHP to generate my MySQL data here</td>
</tr>
</table>

with a better way?

KDLA

Thank goodness you're working towards a better layout -- the previous one sounds like a nightmare! :eek:

This online CSS layout generator might help you:
http://www.positioniseverything.net/articles/pie-maker/pagemaker_form.php

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

KDLA

ray326

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.

Phill_Pafford

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

<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?

KDLA

(If it is tabular data, you're justified in using a table.)

You can use floated lists:

<div id="container">
<ul id="col1">
<li>MySQL...</li>
</ul>
<ul id="col2">
<li>MSQL...</li>
</ul>
</div>

KDLA

ray326

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.