how can i design without tables?

[pcman]

i want to design just with css where can i learn it?

[Mchl]

On internet.

At home.

At school.

Anywhere.

 

At the sticky in this forum look you should. Useful links a lot there are.

[ILMV]

On internet.

At home.

At school.

Anywhere.

 

At the sticky in this forum look you should. Useful links a lot there are.

 

*bad pun* But not in church, they love their rows... */bad pun*

[chriscloyd]

<divs>'s

[Gighalen]

On internet.

At home.

At school.

Anywhere.

 

At the sticky in this forum look you should. Useful links a lot there are.

 

*bad pun* But not in church, they love their rows... */bad pun*

 

LOL good pun.

 

 

www.w3schools.com

[ChaosKnight]

Div's, but you have to design correctly with the css or your div's will end up where you didn't want them to be...

 

Personally I prefer to design with tables seeing that it's more stable, but when I revamp my website I'm going over to div's

[killah]

<div>'s are cross browser while <table>'s are not.

 

So i would recommend <div>'s here.

[TheFilmGod]

I recommend divs + tables. Tables should only be used for tabular data.

 

You should strive to design SEMANTIC websites - use as few divs as possible to achieve the same design. A typically beginner will create div soup.

 

For example:

<div id="main">
  <div class="heading">I am a heading in a div.</div>
  <div class="text">Text goes here... blah blah</div>
  <div class="image"><img src="../..images/something.png" width="50" height="50" alt="ALT text" /></div>
</div>

 

This is div soup. It isn't any better than tables!

 

You should do this instead:

 

<div id="main">
  <h1>Heading Goes here!</h1>
  <p class="text">Text goes here... blah blah</p>
  <img src="../..images/something.png" width="50" height="50" alt="ALT text" />
</div>

 

Remember, CSS is powerful enough that you can literally format these tags too! Actually, this technique will reduce your code since you don't have to specifiy classes, if you only use a tag once within a div parent.

 

Finally, NEVER enclose text in only a div. This is terrible semantics. Always enclose it in a block level text tag. <li>, <p>, <h1>, etc.

[dbrimlow]

TheFilmGod is right.

 

AND, once you get rid of all the code bloat (table tags, too many div tags, etc) you will almost immediately notice better natural search engine ranking.

 

SEO is all about making it easy for the bot to spider your pages. Semantic content shows the bot what is important.

[eleven0]

There are many sites that you can learn CSS from. If you're a starter, You should take a look at W3 CSS school. Or one of my favorites cssbasics.com. Once you get going, use tools like stumbleupon to find different css tricks and tips to practice your skill.

[phparray]

going table less is easier than you may think.  Study the use of float and clear.

 

.floating {
float:left;
margin:5px;
border:1px solid black;
background-color:red;
}

.push {
clear:left;
}

 

<div class="floating"></div>
<div class="floating"></div>
<div class="floating"></div>
<div class="push"></div>

 

This should output 3 red boxes with a black border all on one line separated by 5px.

Without the float:left; they would appear from top to bottom instead of left to right.

float:right would make them display right to left instead of left to right. Use clear to stop floating block objects.