homepage Welcome to WebmasterWorld Guest from 54.163.139.36
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Tabular Data and css.
How can I do this without tables?
Bio4ce

10+ Year Member



 
Msg#: 886 posted 2:20 am on Apr 16, 2003 (gmt 0)

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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 886 posted 2:40 am on Apr 16, 2003 (gmt 0)

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

10+ Year Member



 
Msg#: 886 posted 2:41 am on Apr 16, 2003 (gmt 0)

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

10+ Year Member



 
Msg#: 886 posted 3:12 am on Apr 16, 2003 (gmt 0)

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

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



 
Msg#: 886 posted 4:05 am on Apr 16, 2003 (gmt 0)

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

10+ Year Member



 
Msg#: 886 posted 4:39 am on Apr 16, 2003 (gmt 0)

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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 886 posted 5:15 am on Apr 16, 2003 (gmt 0)

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

WibbleWobble

10+ Year Member



 
Msg#: 886 posted 8:50 am on Apr 16, 2003 (gmt 0)

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

10+ Year Member



 
Msg#: 886 posted 3:11 am on Apr 17, 2003 (gmt 0)

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.

:)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved