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

[stevex33]

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?

<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>

[Nick]

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.

[stevex33]

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?

[c.t.c.]

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.

[aussieinor]

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

[Paul O'B]

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.

[felgall]

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.

[aussieinor]

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

[Paul O'B]

Hi,

This is the layout I'm interested in for css instead

I'd do it something very roughly like this.

<!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.

[Rhysickle]

Hello,

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

<!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