After Reading Much Of this Im embarrassed but

[Grey]

I have what I'm sure is a simple problem. I have tried and tried, but being new to CSS yet a firm believer in it's reasonings I just need to get past this mental block. Below is the url of the page that Im trying to recreate using a much saner css approach. :)

http://www.heavenleeacres.com/Rates/rates.html

Again any assistance for this stuggling newbie would be appreciated.
I just realised I failed to note it's the rates tables I'm trying to recreate.. sorry for not specifying that earlier.


Grey

[Twey]

Those are tables -- it's perfectly fine to use <table> to describe them (and indeed, it would be semantically bad not to).

[Grey]

Really?? With all I've read I got the impresson tables bad..css good. I've searched and searched and read and read and could not find a way to do it in css. So to summarize. It is ok to use the old table format to accomplish that and still be w3c compliant when validating and out of a strong desire to learn, "is" there a way to do it in css? Further and forgive my not understanding, but could you please tell me what you meant by semantically bad not to. I really appreciate your quick reply and can't thank you enough. :)

[Grey]

Wanted to thank you Twey for your help.

[boogyman]

tables are meant for formulated data such as your RATE displayer and as twey said would be bad semantics not using them... using tables as general layout is bad semantics.

and you can thank him by pressing the http://dynamicdrive.com/forums/images/buttons/post_thanks.gif under his post

[Twey]

As boogyman said. There's nothing wrong with using <table> where a table is required, and in fact it's the best choice -- using CSS to construct a table is as bad as using a table to construct a layout. The issue is using tables for layout, which is a purpose for which they were not intended, and one at which they perform considerably worse than CSS.

Depending on the table, it can be possible to hack up a table-like structure using CSS. However, since IE doesn't yet support the display: table-cell property (which would also make table-like layouts much simpler), there are some that simply can't be done, and even where it can be done the resulting structure would be quite fragile.

[Grey]

Got it thank you. I did hit the thank you button as well. This website is great.. I hope one day to be a contributor to others in need of help as I travel this journey. One thing that did cross my mind is, if one can post a website completed by a user here for critique. I know thats probably asking a lot, but the feedback would be truly fantastic for one striving to "do it right"

Regards
Grey

[Grey]

You folks are amazing.. It's one thing to get an answer, it's quite another to have one take the time to explain why.. Appreciate it. :)

[Twey]

Certainly you can. Lots of people do. So long as it's not intentional advertising, you can post what you like.

[boogyman]

You folks are amazing.. It's one thing to get an answer, it's quite another to have one take the time to explain why.. Appreciate it. :)


give a man a fish, feed him supper, teach a man to fish feed him for a lifetime.

or the american attitude

Give a man a fish; you have fed him for today. Teach a man to fish; and you can sell him fishing equipment.


this forum is all about helping you, not just giving answers. Plus its alot easier to explain it once and pointing to it a bunch of times, then giving the answer a bunch of times.... so really we are just being greedy by saving ourselves the additional effort :) more of that New York style courtesy (I'll open the door for you so if you get jumped by a bunch of guys I will know to run the other way)


the two things us americans are actually useful for... 1) greediness 1a) self-preservative humanitarian efforts

[Grey]

<TABLE ID="Table3" BORDER=1 CELLSPACING=3 CELLPADDING=1 WIDTH=468>
<TR>
<TD WIDTH=109>&nbsp;</TD>
<TD WIDTH=224>&nbsp;</TD>
<TD WIDTH=109>Seasonal Rate</TD></TR>

<TR>
<TD WIDTH=109 HEIGHT=19>Water &amp; Electric</TD>
<TD WIDTH=224>30 &amp; 50 AMPS (Metered)</TD>
<TD WIDTH=109>$ 1495.00</TD></TR>

<TR>
<TD WIDTH=109>WE &amp; Sewer</TD>
<TD WIDTH=224>30 &amp; 50 AMPS (Metered)</TD>
<TD WIDTH=109>$ 1595.00</TD></TR></TABLE>


Well now I see another error. As Im sure you know well there is no such thing as a width attribute in strict html.. and suggestions as to how to accomplish this and stay strict?

[Grey]

Doh me.. Please forgive.. I answered my own question with some thought and a hint of what was said earlier re structure. Problem solved happily on my own with a hint from my new friends here.. Thanks again :)

[djr33]

self-preservative humanitarian effortsI love that phrasing. :D

[Twey]

Heheh, aye :)

[boogyman]

<TABLE ID="Table3" CELLSPACING=3 CELLPADDING=1>
<tr>
<th>&nbsp;</th>
<th class="width:w224">&nbsp;</th>
<th>Seasonal Rate</th>
</tr>

<TR>
<TD>Water &amp; Electric</TD>
<TD class="width:w224">30 &amp; 50 AMPS (Metered)</TD>
<TD>$ 1495.00</TD>
</TR>

<TR>
<TD>WE &amp; Sewer</TD>
<TD class="width:w224">30 &amp; 50 AMPS (Metered)</TD>
<TD>$ 1595.00</TD>
</TR>
</TABLE>
[/code]

Well now I see another error. As Im sure you know well there is no such thing as a width attribute in strict html.. and suggestions as to how to accomplish this and stay strict?

for starters I would create a more descriptive table id name, but here you go


table#Table3 {
width: 468px;
border: none;
}
th,td {width: 109px;}
th.w224, td.w224 {width: 224px;}


since 2 of every 3 elements are 109pixels wide we are setting the default to 109 and giving a class to those taht you need larger. Again w224 isnt exactly the most descriptive class name, however you can change that very easily to better encapsulate the column contents

[Grey]

I stumbled across this site that realy helped me understand structuring in css better than anything I've seen so far.. I know it's basic stuff, but I'm sure you have more than just me as a a rooky here. Maybe pictures helped but I thought I'd share it with you and your visitors. Hope it helps someone out. :)

PS after following it I am able to display in IE and Mozilla quite effectively .


http://matthewjamestaylor.com/blog/perfect-full-page.htm

[PRT]

I found a nice collection of CSS table effects at http://icant.co.uk/csstablegallery/tutorials.php

Hope it helps

[Grey]

Thank You.. Im'm geting quite a collection of resource to learn from. Your post is appreciated. Grey :)