Tabular Data and css.

How can I do this without tables?

[Bio4ce]

Hello All. I'm pretty new to css but now that I've created a couple sites with it, I don't want to use tables anymore.

What I'm looking to do is redesign one of my sites that relies upon tables to present information. For example, a price comparison site where I would compare different products based on features and price. It would be logical to use a table for this data, but I want to stay with xhtml and css. Any suggestions as to how I could create this?

Thanks.

[grahamstewart]

Use a table!

Seriously, using a table to present tabular data is entirely legitimate. It's what tables were designed to do.

You are not going against the xhtml or css standards by using a table, provided you are marking up tabular data (which it sounds like you are).

just mark it up as normal and use css to style it.

Note: before everyone jumps in: Using a table for layout purposes doesn't actually break the standard either - but it is against the intention of the standard, which is to separate content and style.

[Joal_Taylor]

It would be logical to use tables for this, so why not? It's only a bad idea to use tables to control the layout and presentation. If you've got actual tabular data, then go ahead and use tables - that's what they're for. Create a table for the data, then use css to control the presentation.

[Bio4ce]

Thanks. I'm not really a professional at this. Just learning as I go. :)

The tables I put together are not validating. Could someone point me in the right direction for proper table markup for xhtml 1.0 transitional?

[DrDoc]

Why are they not validating? Let me guess, it's complaining about <td width>? Your best shot is to use a simple layout:

<table>
<tr>
<td></td>
<td></td>
</tr>
</table>

Then use CSS (maybe different classes) to set width, colors, and other nifty stuff...

Either way, if you let us know what the validator complains about, I'm sure we can help you to pinpoint the error, as well as find a solution.

[Bio4ce]

I had found an example of a table using css. Here is the css:

TR, TD, CAPTION {
background: #E0D1E1; color: black; border-top-width: 1pt;
border-bottom-width: 1pt; border-right-width: 1pt; border-left-width: 1pt;
border-color: #996699; border-style: dashed;
}

TD.special {background: white; color: black;
}
.exspec {font-weight: bold;}

Now the table code I was trying to implement using css:

<TABLE>
<CAPTION>Levels of HTML Elements</CAPTION>
<COLGROUP align="left">
<THEAD valign="top">
<TR>
<TH>Element</TH>
<TH>Long name</TH>
<TH>Level</TH>
<TH>(E)mpty/(R)eplaced</TH>
</TR>

<TBODY>
<TR><TD>&lt;A&gt;</TD><TD CLASS="special">Anchor</TD><TD>Inline</TD><TD CLASS="special">&nbsp;</TD></TR>
<TR><TD>&lt;ABBR&gt;</TD><TD CLASS="special">Abbreviation</TD><TD>Inline</TD><TD CLASS="special">&nbsp;</TD></TR>
</TABLE>

First error it gives me is:
Line 92, column 6: element "TABLE" undefined (explain...).
<TABLE>
^

I can seem to make it work with out it giving me this message.

:(

[grahamstewart]

In XHTML you should always use lower case for your html tags.

[WibbleWobble]

You're missing a TFOOT after your THEAD, too.

from W3schools:
If you use the thead, tfoot and tbody elements, you must use every element, but you can leave them blank They should appear in this order: <thead>, <tfoot> and <tbody>, so that browsers can render the foot before receiving all the data. You must use these tags within the table element.

[Bio4ce]

Thanks for the help. I got it figured out. Used a simple table and built off of that. Everything validates.

Now off to the grunt work of building tables by hand. Uggh.

:)