none
Sample CSS Code for a 4 column by 4 row table using divs instead

    Question

  • I'm trying to rap my head around using css to work with tables or using divs to create the same look.  For example if I wanted a 4 column table x 4 row table with the columns set to 200 pixels and the rows set to 200 pixels, what would that look like using css code?

    Frankly, I'm looking for sample code I can review.

     

     


    Tony
    Monday, November 01, 2010 2:16 PM

All replies

  • Why?  Use a table, that's what its for...

    --
    Chris Hanscom - Microsoft MVP
    On Facebook | Resource Center | Veign's Blog | Web Development Help

    Get a Complete Website Analysis by Veign
    Monday, November 01, 2010 2:35 PM
  • If this is for data then use a table otherwise you can use whichever of the examples at http://wizerways.net/wizerways/challenge/ suits what you are trying to do.
    MS MVP Expression Tutorials & Help http://by-expression.com & Expression Web forums
    Monday, November 01, 2010 2:46 PM
  • Tony, just to gild the rose, I'll dd to what Chris and Cheryl have said by pointing out that tables themselves have not been deprecated, and that they are perfectly suited to the tasks for which they were designed.

    For information which is naturally row/column oriented, such as standard tabular data, or rows and columns of thumbnails in a gallery, or rows and columns of items on offer in a catalog, etc., tables are not only acceptable, but recommended.

    Where tables, or rather their inappropriate usage, have been deprecated is for general purpose layout. When a table is used for laying out elements which are not appropriate to the row/column nature of a table, and to create tortuously nested, multi-table deep nested layouts, then that use is deprecated. It is non-semantic, bloated, complex, and difficult to maintain, and should be avoided in favor of modern markup and CSS.

    Feel free to use tables for what they were meant to be used for—the display of information which is naturally and most effectively displayed in rows and columns. For all other purposes, avoid tables in favor of semantic, standards-based layout.

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.
    Monday, November 01, 2010 3:00 PM
  • Gotta agree.  If you have something that is really symantically a table (tabular data, a grid of images, a grid of related information, etc.), use tables. You don't need to learn how to do that with divs.

    As for styling tables with CSS, which I think is your real question(?), style the table elements.

    For example, in your case of each cell being 200px by 200px, that requires just one style:

    td {
     width: 200px;
     height: 200px;
    }

    You can style other table elements as well.

    See http://www.w3schools.com/css/css_table.asp for more examples.

    Monday, November 01, 2010 4:46 PM
  • If I may add to what has been said when laying out your page either way make sure to include allowance in total width etc for margins and padding.  To see  how those attributes effect layout see BOX MODEL .  Taking all these factors into  consideration will help you layout a easier to maintain page

    HTH,

    MIKE E


    "It's like déjà vu all over again." — Yogi Berra
    Monday, November 01, 2010 9:42 PM
  •  

    If you want some layouts as examples of using CSS, try this site: http://layouts.ironmyers.com/

    The site contains page templates (also for the benefit for anyone else asking - as 'web templates' is a FAQ topic on this forum) It may not help your specific query, but provides good examples of how CSS is used.  This may get you started: below is specifically what you asked: four columns x four rows 200px wide. 

    This achieves basically what I believe you're asking, although as others have said, it is probably better to use tables - if you want to center the divs, make the left hand DIV with a wide left margin (in my example, this is 212px - although this can be adjusted to suit your needs)

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Untitled 1</title>
    
    <style type="text/css">
    
    .col1 {
    	float:left;
    	width:200px;
    	margin:2px 5px 5px 212px
    }
    .col2 {
    	float:left;
    	width:200px;
    	margin:2px 5px 5px 2px
    }
    .col3 {
    	float:left;
    	width:200px;
    	margin:2px 5px 5px 2px
    }
    .col4 {
    	float:left;
    	width:200px;
    	margin:2px 5px 5px 2px
    }
    
    
    
    </style>
    </head>
    
    <body>
    <!--column/row #1-->
    <div class="col1"></div> <div class="col2"></div> <div class="col3"></div> <div class="col4"></div> <div style="clear:both;"></div> <!--column/row #2-->
    <div class="col1"></div> <div class="col2"></div> <div class="col3"></div> <div class="col4"></div> <div style="clear:both;"></div> <!--column/row#3-->
    <div class="col1"></div> <div class="col2"></div> <div class="col3"></div> <div class="col4"></div> <div style="clear:both;"></div> <!--column/row #4-->
    <div class="col1"></div> <div class="col2"></div> <div class="col3"></div> <div class="col4"></div> </body> </html>

     


    Andrew M


    http://www.murraywebs.com

    "Nothing spoils numbers faster than arithmetic!"
    -- Peppermint Patty (Peanuts, Charles M. Schulz)
    Monday, November 01, 2010 10:26 PM
  • That doesn't work, Andrew. First of all, for the purpose that the OP has in mind, a table is more appropriate, which it must be granted that you did acknowledge. Nonetheless, the markup and CSS that you have provided does not provide "... good examples of how CSS is used." That faux table will quickly break at browser viewport sizes less than 1024 pixels. That will be on any monitor screen of 1024 pixels or less, because the browser chrome will consume part of the screen width.

    To test the layout and follow what I am about to describe, simply copy the code you provided above into an empty document in EW. You will need to add some lipsum text to each div (empty divs take up zero space) and perhaps a thin border as I did, to observe what happens to this page.

    Preview in browser, then drag the right edge of the window to the left. Depending upon the size of your monitor screen and the starting browser viewport size, the first thing you will notice is that the faux table is not centered as the right edge of the browser viewport moves to the left. The right margin steadily decreases, while the left remains at 212px, not what "centered" is meant to describe.

    As you continue to move the edge of the browser window to the left, as someone on a smaller monitor would do, or someone who does not habitually browse full-screen (like myself ;-), you will see the faux cells of the table begin to experience the phenomenon of float drop, dropping down and to the left as the viewport width decreases.

    Depending upon your browser, you may also observe the IE float double-margin bug. Older versions of IE will double the margin assigned to a floated element if the margin is on the same side as the float direction.

    Can this be done successfully? Sure. Add a wrapper div to the faux table. Give it a width sufficient to hold the sum of the widths of your faux cells, including padding and margins, but less than enough to hold another cell. (As an aside, why the asymmetrical margins, 2 for the top, 5 for the right and bottom, 2 for the left?) Remove the 212px left margin on the column one faux cells. Assign a margin:0 auto; to the table wrapper div.

    Below you will find your example markup modified only as described above. I have added lipsum text to the faux cells, and a border, so that the layout may be observed. The 212px left margin is removed from the first column cells, and a wrapper div created for the faux table. It has been assigned a width sufficient to contain a single row of four faux cells, and assigned margin:0 auto.

    Paste this markup into EW, then preview in browser and repeat your testing. You will note that the faux table has no fixed left margin, but is truly centered in the viewport, and remains so as you decrease the viewport width. You will also note that as the viewport becomes so narrow that the rightmost faux cells begin to disappear, the rows still remain intact and do not experience float drop, wrapping beneath their true rows. [Markup follows; see below for thread continuation... ]

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Untitled 1</title>

    <style type="text/css">

    .col1 {
        float:left;
        width:200px;
        margin:2px 5px 5px 2px;
        border:1px solid red;
    }
    .col2 {
        float:left;
        width:200px;
        margin:2px 5px 5px 2px;
        border:1px solid red;
    }
    .col3 {
        float:left;
        width:200px;
        margin:2px 5px 5px 2px;
        border:1px solid red;
    }
    .col4 {
        float:left;
        width:200px;
        margin:2px 5px 5px 2px;
        border:1px solid red;
    }
    .tableWrapper {
        width:836px;
        margin:0 auto;
    }

    </style>
    </head>

    <body>
    <div class="tableWrapper">
    <!--column/row #1--><br/>
        <div class="col1"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
        <div class="col2"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
        <div class="col3"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
        <div class="col4"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
        <div style="clear:both;"></div>
    <!--column/row #2--><br/>
        <div class="col1"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
        <div class="col2"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
        <div class="col3"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
        <div class="col4"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
    <div style="clear:both;"></div>
    <!--column/row#3--><br/>
        <div class="col1"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
        <div class="col2"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
        <div class="col3"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
        <div class="col4"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
    <div style="clear:both;"></div>
    <!--column/row #4--><br/>
        <div class="col1"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
        <div class="col2"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
        <div class="col3"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
        <div class="col4"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
    </div> <!-- end div tableWrapper -->

    </body>

    </html>

    Further refinement is quite possible, of course. You will no doubt have noticed that all of the ".col#" classes have identical definitions now. That means that the separate classes are no longer necessary. Since every div (faux cell) in the faux table now has exactly the same styling, save the clearing divs (more below on that), the class assignments may be removed from them, and using a descendant selector, all may be styled with one rule set, as so

    .tableWrapper div {
        float:left;
        width:200px;
        margin:2px 5px 5px 2px;
        border:1px solid red;
    }

    Note that this will also affect your clearing divs, which technically are no longer needed. However, just to be safe and clear the individual rows, simply change the divs to line-breaks, so

    <br style="clear:both;" />

    The resulting markup follows (below my sig). Note that only the tableWrapper div now has a class assigned, or needs one, and that only two selectors are necessary. This markup is more page-weight efficient and easier to read, yet displays identically to that above, demonstrating that there are usually a few dozen "correct" ways to attain the same end. Paste the markup below into a blank page and test it again.

    Andrew, I want to applaud you for your effort to be of help. At the same time I must caution you that we have a responsibility to those we try to assist. Providing incorrect answers is worse in the end than providing no answer at all.

    If you are not 100% sure that your answer is accurate, research it yourself before responding, to ensure that your memory serves you well. If you don't have time, qualify your answer with, "if memory serves..." or, "IIRC..." or otherwise indicate that "Hey, this ain't necessarily the gospel, hear?" If you mean to provide example markup to demonstrate a procedure, test it first yourself to ensure that it works. Imagine the confusion of the OP if he had tried your markup, only to have it break on him. He might believe that he had done something wrong, when the blame actually fell to the faulty markup provided.

    I do not mean to discourage you. By all means, do continue to try to help others along the road we all must follow toward mastery. But at the same time, keep in mind your responsibility to provide accurate answers when you assay to respond to a question. The questioners depend upon you to be correct and to not mislead them.

    The final markup follows my sig, below. As mentioned earlier, it could possibly be refined further, but it's now after midnight, the Series is over and the Giants are the champions, and my fantasy football team has gone down to ignominious defeat this week. I'm for another cold adult beverage and then bedtime. Adieu!

    cheers,
    scott
    [final markup follows]

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Untitled 1</title>

    <style type="text/css">
    .tableWrapper {
        width:836px;
        margin:0 auto;
    }
    .tableWrapper div {
        float:left;
        width:200px;
        margin:2px 5px 5px 2px;
        border:1px solid red;
    }

    </style>
    </head>

    <body>
    <div class="tableWrapper">
    <!--column/row #1--><br/>
        <div><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
        <div><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
        <div><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
        <div><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
    <br style="clear:both;" />
    <!--column/row #2--><br/>
        <div><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
        <div><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
        <div><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
        <div><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
    <br style="clear:both;" />
    <!--column/row#3--><br/>
        <div><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
        <div><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
        <div><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
        <div><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
    <br style="clear:both;" />
    <!--column/row #4--><br/>
        <div><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
        <div><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
        <div><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
        <div><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
    <br style="clear:both;" />
    </div> <!-- end div tableWrapper -->

    </body>

    </html>


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.
    Tuesday, November 02, 2010 4:18 AM
  • Here is a link to a 4x4 table made with the <div> element. Just do a view source to get the CSS required.

    http://php-insite.com/cssTable.html

    Tuesday, November 02, 2010 8:07 AM
  • I want to thank everyone for their responses, this is exactly what I was looking for and will study it in greater detail over the next few days.  There was a great deal of effort put into these answers and I will somehow attempt to return the favor in the near future.

    Thanks to everyone.


    Tony
    Tuesday, November 02, 2010 11:57 AM
  • Thanks for this thread.

    I amended Paladyn's code by adding a clearfix into the first div of the second, third and fourth "rows".

    It gives me similar margins/spaces everywhere. The <br> gave me spaces I didn't want between the rows.

    CSS:

    .tableWrapper {
        width:834px;
        margin:0 auto;
    border:1px solid black
    }
    .tableWrapper div {
        float:left;
        width:200px;
        margin:3px 3px 3px 3px;
    border:1px solid red;
    }

    HTML:

    <body>
    <div class="tableWrapper">
    <!--column/row #1-->
        <div><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
        <div><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
        <div><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
        <div><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>

    <!--column/row #2-->
        <div style="clear: both;"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
        <div><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
        <div><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
        <div><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>

    <!--column/row#3-->
        <div style="clear: both;"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
        <div><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
        <div><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
        <div><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>

    <!--column/row #4-->
        <div style="clear: both;"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
        <div><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
        <div><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
        <div><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
    <br style="clear:both;" />
    </div> <!-- end div tableWrapper -->

    </body>
    </html>

    Tuesday, December 04, 2012 4:25 PM
  • RunningPlanet, this thread was last alive over 2 years ago.  It is not good forum practice to raise old threads.  Check the dates on the posts.

    Tuesday, December 04, 2012 10:18 PM
  • Except that it is still of interst to people and RP made a perfectly valid point that improves the code and points out an important issue!

    Cheers


    the problem is not what you don't know it's what you think you know that's wrong

    Thursday, December 06, 2012 10:04 AM