Welcome to WebmasterWorld Guest from 54.145.39.186

Forum Moderators: not2easy

Message Too Old, No Replies

Tabular Data and css.

How can I do this without tables?

     

Bio4ce

2:20 am on Apr 16, 2003 (gmt 0)

10+ Year Member



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

2:40 am on Apr 16, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

2:41 am on Apr 16, 2003 (gmt 0)

10+ Year Member



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

3:12 am on Apr 16, 2003 (gmt 0)

10+ Year Member



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

4:05 am on Apr 16, 2003 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

4:39 am on Apr 16, 2003 (gmt 0)

10+ Year Member



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

5:15 am on Apr 16, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

WibbleWobble

8:50 am on Apr 16, 2003 (gmt 0)

10+ Year Member



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

3:11 am on Apr 17, 2003 (gmt 0)

10+ Year Member



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.

:)

 

Featured Threads

Hot Threads This Week

Hot Threads This Month