Help needed converting Tables into CSS

Discussion in 'CSS' started by Skinny, Mar 1, 2007.

  1. #1
    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
     
    Skinny, Mar 1, 2007 IP
  2. rgchris

    rgchris Peon

    Messages:
    187
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Look up CSS positioning and floating.
     
    rgchris, Mar 1, 2007 IP
  3. humanedited

    humanedited Peon

    Messages:
    747
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    0
    #3
    It might be better to keep as a table.
     
    humanedited, Mar 1, 2007 IP
  4. tolra

    tolra Active Member

    Messages:
    515
    Likes Received:
    36
    Best Answers:
    1
    Trophy Points:
    80
    #4
    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):
     
    tolra, Mar 1, 2007 IP
  5. humanedited

    humanedited Peon

    Messages:
    747
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    0
    #5
    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):
     
    humanedited, Mar 1, 2007 IP
  6. Skinny

    Skinny Peon

    Messages:
    1,864
    Likes Received:
    93
    Best Answers:
    0
    Trophy Points:
    0
    #6
    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
     
    Skinny, Mar 1, 2007 IP
  7. Clive

    Clive Web Developer

    Messages:
    4,507
    Likes Received:
    297
    Best Answers:
    0
    Trophy Points:
    250
    #7
    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.
     
    Clive, Mar 1, 2007 IP