SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict
    Join Date
    Aug 2007
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using tabled to display my lists, am I a bad person?

    Hey guys,
    I've come across a bit of an issue where I've only found tables to be a quick and easy solution (And presumably the most sane).

    I've got a list of items and their prices. The problem is, the prices can't be right next to the item name.

    The other problem I came across when trying to solve this with css, was that I also needed the prices to be vertically in line with eachother.

    I attempted the put the prices in a span and float them right, didn't work.
    I also tried to give them a left margin, then realizing that if they used the same class, the prices would be out of line with eachother, and using an id for each would be stupid and impractical.

    Is there a better way that I can have full control over this with just css?

    Code:
    <style>
    .serviceInfo{
    	border-width:1px;
    	border-color:#0000FF;
    	border-style:solid;
    	margin-top:10px;
    	margin-left:auto;
    	margin-bottom:10px;
    	margin-right:auto;
    	width:180px;
    }
    
    
    #serviceNails{
    	clear: none;
    	border: 1px dashed #000000;
    	width: 31%;
    	float: left;
    	text-align: left;
    	margin-left:10px;
    }
    </style>
          <div id="serviceNails">
            <p>Nails:</p>
                <div class="subCatTitle">Colour UV Gel (Permanent)</div>
    			<table class="serviceInfo">
                  <tr>
                    <td>Full Set</td>
                    <td>35</td>
                  </tr>
                  <tr>
                    <td>Infills </td>
                    <td>35</td>
                  </tr>
                  <tr>
                    <td>Take Off </td>
                    <td>35</td>
                  </tr>
                  <tr>
                    <td>Single Nail</td>
                    <td>35</td>
                  </tr>
                </table>
    </div>

  2. #2
    masquerading Nick's Avatar
    Join Date
    Jun 2003
    Location
    East Coast
    Posts
    2,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can achieve this with CSS, however I see no reason not to do this in a table - after all, you're displaying sets of data, which tables are meant for. The big no-no for tables comes in when people make their website layouts with tables, which they are not meant for.
    Nick . all that we see or seem, is but a dream within a dream
    Show someone you care, send them a virtual flower.
    Good deals on men's watches

  3. #3
    SitePoint Addict
    Join Date
    Aug 2007
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What if I want to make just the prices column align to the right.
    The only way to do that is by giving each individual td for the price a class, then manipulating that class through css, is that correct?

    I hope it's not as I'd like a simple way to control each column individually, is this possible?

  4. #4
    SitePoint Zealot c.t.c.'s Avatar
    Join Date
    Apr 2007
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree with Possibility. If it's tabular data, use a table. To style a column, you can attach styles to the colgroup element in your markup. See Styling Table Columns with CSS.

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So if I was to be creating a travel site listing hotels, I should use tables instead of css?

    Someone searches for a type of hotel in city xxx and the search brings back 15 different hotel selections. This would be best to do in a table?

    The person then selects a specific hotel from the search that links to more data about a specific hotel. Would you use a table or css for the layout of this data?

    Cheers

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    So if I was to be creating a travel site listing hotels, I should use tables instead of css?
    If it's just a list of hotels then it should be in a list.

    If on the other hand it's a list of hotels and associated tabular data then it should be in a table.

    You can put pairs of items in a list (or perhaps a defintion list) but its not quite as semantic as a table in most cases.

    http://www.pmob.co.uk/temp/list-with-dotted-leader2.htm

    I made versions using lists, definition lists and tables.

    http://www.pmob.co.uk/search-this/li...ed-leader9.htm
    http://www.pmob.co.uk/search-this/li...der-dltest.htm
    http://www.pmob.co.uk/search-this/li...ader-table.htm

    Suffice to say the table version used the most code though.

    Where you are looking for automatic vertical alignment with a data pair then a table is the easiest solution and most semantic in most cases.

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,815
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    If you have two or more columns of information and a heading for each column then it should be a table. Just don't forget to put the column headings inside of the <thead> and the content inside the <tbody> and use <th> instead of <td> for any column and row headings (with an appropriate scope attribute in the <th> so that screen readers know whether it is a column or row heading.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  8. #8
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This site I'm giving as an example is similar to what I'm interested in. It provides information based on a search by hotel by area; which you can then select a hotel to get higher information also. This is the layout I'm interested in for css instead of tables for both pages.

    http://www.totaltravel.com.au/travel...rectory/hotels

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This is the layout I'm interested in for css instead
    I'd do it something very roughly like this.

    Code:
    <!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=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    *{margin:0;padding:0}
    dl{
        width:640px;
        margin:auto;
        border-bottom:1px dashed #ccc;
        padding:10px;
        overflow:hidden;
        background:#f2f2f2;
    }
    dt{text-align:right}
    dd{overflow:auto}
    dt,dd{margin:0}
    dt a{float:left;text-align:left;}
    dt img,.image{
        float:left;
        margin:0 10px 0 0;
        width:93px;
        height:62px;
        background:red;
        border:1px solid #000;
        text-align:left
    }
    * html dd{height:1&#37;}/* 3px jog*/
    
    </style>
    </head>
    <body>
    <dl>
        <dt><span class="image">Image</span><a href="#">The Name of Something</a><strong>Some text here</strong></dt>
        <dd>
            <p>The description of whatever the heading is about goes here. The description of whatever the heading is about goes here.The description of whatever the heading is about goes here.</p>
        </dd>
    </dl>
    <dl>
        <dt><span class="image">Image</span><a href="#">The Name of Something</a><strong>Some text here</strong></dt>
        <dd>
            <p>The description of whatever the heading is about goes here. The description of whatever the heading is about goes here.The description of whatever the heading is about goes here.</p>
        </dd>
    </dl>
    <dl>
        <dt><span class="image">Image</span><a href="#">The Name of Something</a><strong>Some text here</strong></dt>
        <dd>
            <p>The description of whatever the heading is about goes here. The description of whatever the heading is about goes here.The description of whatever the heading is about goes here.</p>
        </dd>
    </dl>
    <dl>
        <dt><span class="image">Image</span><a href="#">The Name of Something</a><strong>Some text here</strong></dt>
        <dd>
            <p>The description of whatever the heading is about goes here. The description of whatever the heading is about goes here.The description of whatever the heading is about goes here.</p>
        </dd>
    </dl>
    <dl>
        <dt><span class="image">Image</span><a href="#">The Name of Something</a><strong>Some text here</strong></dt>
        <dd>
            <p>The description of whatever the heading is about goes here. The description of whatever the heading is about goes here.The description of whatever the heading is about goes here.</p>
        </dd>
    </dl>
    </body>
    </html>
    I don't see the above as tabular data as its not the sort of data you would really have in a spreadsheet. There isn't a specific relationship between column and rows so I would use a list or a definition list as in my example above.

  10. #10
    SitePoint Enthusiast
    Join Date
    Sep 2007
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    I had to solve the same problem the other day and, after a bit of trial and error, this worked:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
    
    
    
    	<title>split header</title>
    <style>
    li {display:block; width: 300px;}
    h3 {display:block; width: 300px;}
    h3 span {display:block;float:left;width:200px;vertical-align:top;}
    h3 small {display:block;float:right;width:100px;vertical-align:top;}
    li p {clear:both;}
    </style>
    </head><body>
    <ul>
    <li>
    <h3><span>Ngcfsjkgacf gcjkag gjklsa cgjksac gsacjk sdagcjksdgc sdgcjk game</span><small>From $65 – $105 per night </small></h3>
    <p> other content</p>
    </li>
    </ul>
    
    Or if you won't have extra content in each list item go for:
    
     <ul>
    <li>
    <h3><span>Ngcfsjkgacf gcjkag gjklsa cgjksac gsacjk sdagcjksdgc sdgcjk game</span><small>From $65 – $105 per night </small></h3>
    <div style="clear:both;"></div>
    </li>
    </ul>       
    
    </body></html>
    Hope it fits the bill

    Rhys


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
  •