[jduke44]

Ok, I thought there was a thread onthis but I couldn't find it. I wanted to know when I should use CSS and when I should use HTML? I noticed websites that are using CSS are still using HTML, psecifically tables, to do some of there layout. I thought that was a no, no since CSS came out.

I am trying to do a very simple webpage with 4 pictures and a discription for for each. I found it is easier to set up tables for this since I am new to CSS and want to get this up quick. Is this proper to do? I tried in CSS but am having a little trouble getting the text to position correctly as opposed to the images.

I took a class in CSS so I am familiar with it. Thanks for your help.

[LTheobald]

It isn't a case of CSS or HTML. They work alongside each other.

For a standards compliant page you only want to be using tables for tabular data. Contents tables, budgets, cash flows - those sort of things. For positioning things you really want to be using something else. Divs (short for division) are a good solution.

Try the following code. There's two parts. The HTML and the CSS to go in either your external CSS file or in the style tags on the HTML page itself.

HTML

<div class="picture">
    <img src="blank.gif" alt="picture"/>
    <p>Description Here</p>
</div>
<div class="picture">
    <img src="blank.gif" alt="picture"/>
    <p>Description Here</p>
</div>
<div class="picture">
    <img src="blank.gif" alt="picture"/>
    <p>Description Here</p>
</div>
<div class="picture">
    <img src="blank.gif" alt="picture"/>
    <p>Description Here</p>
</div>
<br class="clearleft"/>

This will give you a row of 4 pictures with the descriptions underneath. The <br> at the end clears the left floats I applied to the divs. Without this content underneath would appear in the row with the pictures.

CSS

.picture {
    float: left;
}

.clearleft {
    clear: left;
}

There's a lot more you can do to these to make it a bit nicer. For example, adding borders & padding to the elements to make them line up nicer. If you want me to run through some of this with you, let me know.

[jduke44]

Thanks LT. I will try this and fool around with other ideas. If I need help I will surely let you know. I am taking it that other people don't really know how to use CSS in conjunction with HTML because I see a lot of table work for creating columns for images and text. I see this even with big name websites also. I will let you know how I make out. Thanks.

[RickJ]

I'm an old fart who does not know css. Laying out what you describe in tables is quick and easy.

... but definitely give LT's instructions a whirl. He's been an awesome help for me many times here for the "beyond html" stuff.

[jduke44]

Yep, it is easier but I am learning it slowly but surely so everyone can see any webpages I might do (which isn't many). I actually did it with tables in 2 minutes as opposed to not getting it quite right in about 30 minutes. But with LT's help, I think I will be able to do it quite quickly.

[LTheobald]

If you are doing any kind of site that will be accessed by a wide audience, you really need to ditch the tables. It makes things a lot harder for those with disabilities, using screen readers etc.

Part of the WAI compliance involves items like not using tables for layout, adding alt text to all your images etc. This will make it easier for the disabled users out there.

[jduke44]

LT, I am not disagreeing with you but this goes along with my question. Did you ever look at the source to www.w3schools.com? They seem to use tables for their whole layout. Would you be able to explain why? Maybe I am not getting the big picture.

[LTheobald]

It could be for a number of reasons. I guess W3Schools hasn't changed because it's a big site and would involve a lot of work. They might not feel they have the resources to do it yet.

Or they might simply just not want to!

[jduke44]

LT, is there anything I can do to simulate what the screen readers will be seeing? I just thought then I would know how my site looks to them.

[LTheobald]

If you have Firefox installed, try Fangs. Otherwise, try the demo version of Jaws.