SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    XHTML/CSS Alternative to Tabular data layout

    Hi all,

    As per the title, Im working on an existng admin page for an ecommerce site. The previous developer is using tables to present tabular data.

    The site owner wants a css layout, could someone kindly tell me what is the best way to re-create a tabular layout for data? I need 8 "columns" per row.


    Kind regards,

    Matt

  2. #2
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by johnuk View Post
    Hi all,

    As per the title, Im working on an existng admin page for an ecommerce site. The previous developer is using tables to present tabular data.

    The site owner wants a css layout, could someone kindly tell me what is the best way to re-create a tabular layout for data? I need 8 "columns" per row.


    Kind regards,

    Matt
    Although this can of course be done using css, I don't see a problem using tables to present tabular data. It is actually the only time when I still use tables

    Anyway. You could use floating divs

    Example:
    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #wrapper {
    	width: 805px;
    	margin: 20px auto 0;	
    }
     
    .head-tab,
    .content-tab {
    	width: 200px;
    	height:30px;
    	line-height: 30px;
    	float: left;
    	border: #999 solid 1px;
    	border-right: 0;
    	text-indent: 5px;
    	font-weight: bold	
    }
    .last-tab {
    	border-right: #999 solid 1px;	
    }
    .content-tab {
    	border-top: 0;
    	font-weight: normal;	
    }
    </style>
    </head>
     
    <body>
    <div id="wrapper">
    <!-- Heading Divs -->
    <div class="head-tab">Header1</div>
    <div class="head-tab">Header2</div>
    <div class="head-tab">Header3</div>
    <div class="head-tab last-tab">Header4</div>
    <!-- Content Divs -->
    <div class="content-tab">content 1 Row 1</div>
    <div class="content-tab">content 2 Row 1</div>
    <div class="content-tab">content 3 Row 1</div>
    <div class="content-tab last-tab">content 4 Row 1</div>
    <div class="content-tab">content 1 Row 2</div>
    <div class="content-tab">content 2 Row 2</div>
    <div class="content-tab">content 3 Row 2</div>
    <div class="content-tab last-tab">content 4 Row 2</div>
    </div>
    </body>
    </html>

  3. #3
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by johnuk View Post
    As per the title, Im working on an existng admin page for an ecommerce site. The previous developer is using tables to present tabular data.

    The site owner wants a css layout, could someone kindly tell me what is the best way to re-create a tabular layout for data? I need 8 "columns" per row.
    For tabular data, you should be using a <table>. Although you'll often hear that tables are outdated and you should be using CSS instead, that only applies to layout tables - in other words, to tables that are used to create a visual layout for the whole page (or even for part of it), but where the contents aren't connected in the way that tabular data are.

    You should still lay out the rest of your page (eg menus, sidebars) by using CSS, but then in the middle of all that, you'll have a <table>. That's exactly what <table> was created for, and it is exactly when it should be used, and that hasn't changed.

  4. #4
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    As a matter of fact, not using tables to mark up tabulated date is both semantically incorrect, and could (very theoretically) be illegal, if it makes the site more difficult to use for users with handicaps.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  5. #5
    SitePoint Evangelist Ed Seedhouse's Avatar
    Join Date
    Aug 2006
    Location
    Victoria, B.C. Canada
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by C. Ankerstjerne View Post
    As a matter of fact, not using tables to mark up tabulated date is both semantically incorrect, and could (very theoretically) be illegal, if it makes the site more difficult to use for users with handicaps.
    Exactly - if content is actually tabular then the table and it's approriate subtags are the only correct markup.
    Ed Seedhouse


Bookmarks

Posting Permissions

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