tables and divs

Soldato
Joined
2 Oct 2004
Posts
4,362
Location
N.W London
Hi,

I am learning coding starting of with html coding over at w3c.com and then will go on to xhtml and css...

I am at the stage of learning about html coding for tables...however I remember ppl on this forum saying I should use Divs instead...

Please can someone kindly explain the difference? and advise when I would use a table and when I would use Divs?

Thanks in advance...

Cheers!!
 
Man of Honour
Joined
31 Jan 2004
Posts
16,335
Location
Plymouth
Thank Augmented for this link - Bring on the tables! :)

In short, use tables to display tabular content like, for example football results. But don't ever use them to define the layout of a site. That's done by Cascading Style Sheets, which apply styles to markup (like <div>'s, which define sections of content and <h1>'s, which define page headings, and so on) :)
 
Soldato
OP
Joined
2 Oct 2004
Posts
4,362
Location
N.W London
so when creating a new website for the layout use CSS??

a div is a CSS tag? is that right?

so for all pages within my site use CSS to define the layout? is that right?

I'm getting soooooo confused between divs and tables you wont believe...

I have seen examples of websites where ppl have used tables for their layout...this is not using tables properly right?
 
Man of Honour
Joined
31 Jan 2004
Posts
16,335
Location
Plymouth
I would link you to www.w3schools.com but it appears to be down at the moment :(

Keep checking back though, since when it comes up it's a very good site for a total beginner to read :)

a div is a CSS tag? is that right?
Nope :D

"HTML" is what webpages are marked up in. So you have some content, like a paragraph, and you 'mark' it as a paragraph by enclosing it in the HTML tags for a paragraph - '<p>' to signal the start, and '</p>' to signal the end.

Now, this doesn't do much to the style. That's where Style Sheets (CSS) come in. They say "this element should have a blue-coloured font, and be positioned 10 pixels from the left", and so on - ie, they style the elements. Like so, if you wanted paragraphs to have a blue font:

Code:
p {
color: blue;
}
CSS files accompany HTML files by linking to them from the HTML document, for example:

Code:
<link rel="stylesheet" type="text/css" media="screen" href="http://www.twobeds.com/wp-content/themes/k2/style.css" />
That says "this link is a stylesheet for displaying on a screen, and it tells you how this webpage should look" (close enough, anyway.)

Bedtime for me, but read W3schools when it comes up - it rocks for the basics :)
 
Soldato
OP
Joined
2 Oct 2004
Posts
4,362
Location
N.W London
right im with you as far as HTML is concerned and I believe I even understand the basics now of CSS ( I said the basics :) )

What I fail to understand is this....

I have to post a site so you guys understand what I mean because I may not explain clearly or you may misinterpret what I am saying...

http://www.hardocp.com/

If you look at their home page, now I realise the background is black (or close to) but you see how they have that table (sorry for using that phrase) in the middle and then all the content within it???

Have they used divs to do that? I looked at the source and I see the div tag left right and centre so I guess they did but I am just double checking?

If yes.....have they basically defined every section of that table to state where they want adverts, texts etc to be placed within it?

How did they create the borders on the left and right handside of the table (sorry to use that word again)? Are the nav buttons just buttons they created in photoshop or fireworks and then they turned them into a link?

Please clarify the above re: divs...

sorry for posting the site but I really needed an example to help clarify my point...


thanks in advance...

btw I am following w3c schools and am finding it very useful and would recommend them to anyone who wants to get into webdesign as a basic starting off point :)
 
Associate
Joined
21 Sep 2005
Posts
180
Location
Dundee
Quite a few questions there but i'll have a go....

Before i do though, there is a fantastic extension available to Firefox users that will help you to dissect every page that you come across. A lot of pages are much simpler than the one you have chosen and it's easier to work out exactly how it has been 'made'. If you get hold of the extension, from the link underneath, it will make your life a whole lot easier in learning how something was/is done. The page you have mentioned uses a whole heap of frames to build up into what you can see. As a result, if you just look at the plain jane source, you will miss a lot of the markup/css that is involved. With the extension i seem to be touting (i love it, don't hold it against me), you can look at the 'generated source' and see the mark-up in all its glory.

Firefox Web Developer Extension

Your questions...

1. What you have called a table is, as you rightly suspected, created by DIVS styled in such a way that it looks like you or I might describe a table. It is not a table. Step away from the table and no one will get hurt! :)

2. The borders have been styled using CSS. Think of DIVS as just 2 dimensional boxes. Content can go within the boxes and the edges (borders) can be styled. Boxes can go within other boxes. The presentation of all of this can be handled from the CSS.

3. The 'buttons' are just styled unordered lists. (Loads of tutorials around the web on this. Just stick something like 'CSS Rollover Menus' into Google and the world is your oyster.)

Keep going, soon the muddy waters will clear and your brain gets to explode about other stuff.
 
Last edited:
Permabanned
Joined
21 Apr 2004
Posts
13,312
Location
Wolverhampton
The most important thing here to remember is that every element has a purpose, including tables.

It onlys gets messy when people use the wrong element(s)

Also remember to avoid depreciated elements for your document type.

For example in XHTML Trans, tags such as <font> and <center> should not be used anymore.
 
Soldato
OP
Joined
2 Oct 2004
Posts
4,362
Location
N.W London
thanks for your help...

Does anyone know a good tutorial working with Divs?

I would like to create a test webpage with a box in the middle using Divs and CSS....

W3C teaches you a lot of the properties you can have when using CSS just like it does with HTML and XHTML however I see no reference to Divs on that site...perhaps I am looking in the wrong place...

I know divs have properties such as <div class> and <div container> etc etc but it would be really helpful if I could find a definitive list somewhere....

Please help?

Thanks in advance...

Cheers...
 
Soldato
OP
Joined
2 Oct 2004
Posts
4,362
Location
N.W London
yeah at long last hey its back on :)

see I have read through quite a lot of that tutorial especially the part about CSS but it makes no reference to Divs....

Therefore I was looking for a tutorial that does and how to implement them...

Over at W3C you see all the diff attributes you can use for a css style sheet I was hoping they would have the same for Divs....so I can learn what I needed to use Divs wise...

Am I being clear?
 
Permabanned
Joined
21 Apr 2004
Posts
13,312
Location
Wolverhampton
Ok well, <div> is an element. A block level element. Meaning they will take full width of the line they are on, unless other wise stated.

Now, the attributes you can attach to a DIV (just like every element) vary greatly. the most common ones, are assigning a class and or ID to a DIV.

You can also

Such as:

Code:
<div id="coffee"></div>    <div class="cup"></div>

You'll pick them all up as you go along, and you'll find certain attributes can only be applied to certain elements. Such as the href="" attribute is only used on anchor elements. (<a>).

Hope that helps?

The style attributes should be seperate from the HTML. All style information is stored in the CSS.

So don't go writing <div style="padding: 5px; color:#ffffff;"></div> :p
 
Last edited:
Soldato
OP
Joined
2 Oct 2004
Posts
4,362
Location
N.W London
Now, the attributes you can attach to a DIV (just like every element) vary greatly. the most common ones, are assigning a class and or ID to a DIV.

So for example would this be correct:

<div=subnav> </div>.....where subnav is the name of my sheet?

I think I understand what you mean it would be so great if there was like a tutorial on divs so n00bs like myself would know how to use this element properly just as w3c school have tutorials on html, xhtml, css, javascript etc etc
 
Permabanned
Joined
21 Apr 2004
Posts
13,312
Location
Wolverhampton
xirokx said:
So for example would this be correct:

<div=subnav> </div>.....where subnav is the name of my sheet?

I think I understand what you mean it would be so great if there was like a tutorial on divs so n00bs like myself would know how to use this element properly just as w3c school have tutorials on html, xhtml, css, javascript etc etc

No, you have to give it an ID if you want to identify a DIV.

So it would be, <div id="subnav"></div>

and then in your CSS:
Code:
DIV#subnav {
 *style attributes in here*
}

IDs are specified in the CSS with a #. Classes are identified by a . (full stop)
 
Soldato
OP
Joined
2 Oct 2004
Posts
4,362
Location
N.W London
thanks for the link on the tut will come in very handy...

Icraig thats my point like there is div class, div id how many other div properties are available to me? is there a list?

thanks a lot for your advice its proving to be invaluable :)
 
Soldato
Joined
18 Oct 2003
Posts
19,413
Location
Midlands
xirokx said:
Icraig thats my point like there is div class, div id how many other div properties are available to me? is there a list?

Yep, there is here http://www.w3schools.com/tags/tag_div.asp check the standard attributes and it has a link for a full list.

Although, many of them are irrelevant to you at the moment. You want class and id to define what sort of presentation styles you can give the div in your CSS sheet by as iCraig mentioned linking with the period for a class and hash for an id.
 
Soldato
OP
Joined
2 Oct 2004
Posts
4,362
Location
N.W London
can i clarify that now adays one should not use tables at all for layout purposes and instead should use CSS for layouts which are defined by Divs (i hope that is the correct terminalogy) still learning u see :) ?????
 
Permabanned
Joined
21 Apr 2004
Posts
13,312
Location
Wolverhampton
You're basically right.

Just don't discard tables completely. If you're talking about layout of the site, navigation, headers, footers etc, then yes. CSS and DIVs should control them.

But if there is content that needs laying out in a tabular fashion, such as a football league on one of the pages. Tables should be used.

Many people get swept up that tables are bad, I've even seen other forums critising people for using them to display tabular content. Saying DIV's and horizontal rules should have been used instead. Madness.
 
Back
Top Bottom