Converting Tables to DIV's

[tgrk35]

Uh yeah, how do I go about doing this?

I'm fairly new to the whole idea of CSS, but I kinda understand it.

I was told that I should steer away from tables and move more towards <div> tags. I've checked out numerous sites trying to find an attributes listing of everything I can use in div class properties within my css, but I can't seem to find anything.

What are the attributes I can use with div tags?

How do I set them up to look like tables?

I'm very confused with all of this.

Thanks for your help,
Will

If you would like to take a look at my site (not finished yet) to understand what I'm trying to convert to div tags, here's the url:

http://www.summel.net/index.php

Alright,
Thanks a lot.

[ober]

You should be using attributes "for the DIV". The attributes are all in CSS, which should be in an external file.

So in your external CSS file you end up with something like this:


#maincontent{
font-family: Tahoma, Verdana, Arial;
color: green;
font-size: 10pt;
}

And so on. Then in your html, you simply use the following:

<div id="maincontent">your content goes here</div>

with a link in the head to the css file, of course.

You can style and position that div accordingly, then. Here is a good place to start: http://www.w3schools.com/css/default.asp

I've been actively using CSS for over a year now and I'm still learning new tricks. It takes some time to pick up and learn how to manipulate block elements to have them positioned where you want, but it is well worth it.

Good luck.

[NogDog]

Also, try to avoid "divitis": wrapping everything in DIV tags. If some sort of styling needs to be applied to a group of HTML elements, then the DIV is likely the way to go. But this is unnecessary:

<div class=nav>
<ul>
<li>Some text</li>
<li>Some text</li>
<li>Some text</li>
</ul>
</div>

You can simply apply the style ("nav" in this case) to the UL:

<ul class=nav>
<li>Some text</li>
<li>Some text</li>
<li>Some text</li>
</ul>

[NogDog]

Since the main part of your page is in a 3-column format, take a look at bluerobot.com 3-column layout (http://bluerobot.com/web/layouts/layout3.html).

[Triumph]

Originally posted by NogDog
Also, try to avoid "divitis": wrapping everything in DIV tags. If some sort of styling needs to be applied to a group of HTML elements, then the DIV is likely the way to go. But this is unnecessary:

<div class=nav>
<ul>
<li>Some text</li>
<li>Some text</li>
<li>Some text</li>
</ul>
</div>

You can simply apply the style ("nav" in this case) to the UL:

<ul class=nav>
<li>Some text</li>
<li>Some text</li>
<li>Some text</li>
</ul>
+1