Help needed converting Tables into CSS

Okay as it stands now I have rows that are being dynamically created through PHP. My problem is I want to change this to CSS because it's faster.

My problem isn't the PHP side, but how to convert the two.

My rows look like this.

ROW 1

TD 1 | TD 2 | TD 3 | TD 4 | TD 5 |

ROW 2

TD 6 | TD 7 | TD 8 | TD 9 | TD 10 |

Basically I don't know how to put this many divs side by side. I can do two but 5 is a bit outta my league.

I would appreciate some help with this.

Skinny

 

Look up CSS positioning and floating.

 

It might be better to keep as a table.

 

I'm surprised it's faster in CSS normally I've found tables render faster than using CSS to style divs as table cells. Also if the data is tabular in nature it would correct to use tables.

To answer your question, the following assumes your cells are a fixed width of 100px, the CSS is:

.cell {
width: 100px;
float: left;
}

.newrow {
clear: left;
}

Code (markup):

The HTML that goes with it to draw the 2 rows will be:

<div class="cell">TD 1</div>
<div class="cell">TD 2</div>
<div class="cell">TD 3</div>
<div class="cell">TD 4</div>
<div class="cell">TD 5</div>
<div class="newrow"></div>
<div class="cell">TD 6</div>
<div class="cell">TD 7</div>
<div class="cell">TD 8</div>
<div class="cell">TD 9</div>
<div class="cell">TD 10</div>
<div class="newrow"></div>

Code (markup):

 

You can try an unordered list as well

<style type="text/css">

#output {
	padding:0;
	margin-left:-40px;
	width:700px;
}

ul#output{
	padding:0;
	white-space: nowrap;
}

#output li{
	float:left;
	width:100px;
	border-right:1px solid #000;
	list-style-type: none;
	margin:0 10px;
	padding:0;
}
</style>

Code (markup):

<div id="output">
<ul>
    <li>TD 1</li>
    <li>TD 2</li>
    <li>TD 3</li>
    <li>TD 4</li>
    <li>TD 5</li>
    <li>TD 6</li>
    <li>TD 7</li>
    <li>TD 8</li>
    <li>TD 9</li>
    <li>TD 10</li>
</ul>
</div>

Code (markup):

 

Thanks for all your help.

I guess I'll keep it in tables. It makes more sense that way. But thank you very much for your help anyway.

Skinny

 

I second that.
Afterall, it is tabular data. Converting table into divs or unordered lists that way would not make much sense, and I would call it unnecessary.