PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Thu Aug 16, 2018 5:26 pm

All times are UTC - 5 hours




Post new topic Reply to topic  [ 5 posts ] 
Author Message
PostPosted: Wed Sep 17, 2008 2:25 am 
Offline
Forum Newbie

Joined: Wed Sep 17, 2008 1:52 am
Posts: 2
Hi all!!!

I'm a (french) beginner in php and html programming and i've been told about the incredibles advantages of "div" tag, comparated to a <table>...
Can someone help me with to understand how to use those tags??
Thanks for any help!!!


Top
 Profile  
 
PostPosted: Wed Sep 17, 2008 2:45 am 
Offline
DevNet Evangelist

Joined: Tue Dec 21, 2004 6:00 pm
Posts: 6267
Location: Winnipeg
div I blieve stands for division's

You use divisions to logically separate your layout and HTML instead of tables because "semantically" tables are not intended to be used to dictate the design or layout of your web site. They are intended for "data".

How to use DIV's exactly is a way to complex subject to disscuss in a forum thread. Start looking at examples of CSS/XHTML designs and tinkering with CSS.

Trivial Example:

This is a three level layout using tables...it's yucky hard to follow and semnatically doesn't make sense to search engines or screen readers, etc...

Syntax: [ Download ] [ Hide ]
<div class="html" id="{CB}" style="font-family: monospace;"><ol><li style="" class="li1"><span style="color: #009900;"><a href="http://december.com/html/4/element/table.html"><span style="color: #000000; font-weight: bold;"><table</span></a> <span style="color: #000066;">width</span>=<span style="color: #ff0000;">"100%"</span><span style="color: #000000; font-weight: bold;">></span></span></li><li style="" class="li2">  <span style="color: #009900;"><a href="http://december.com/html/4/element/tr.html"><span style="color: #000000; font-weight: bold;"><tr></span></a></span></li><li style="" class="li1">    <span style="color: #009900;"><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;"><td></span></a></span>Header Section<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></td></span></span></li><li style="" class="li2">  <span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></tr></span></span></li><li style="" class="li1">  <span style="color: #009900;"><a href="http://december.com/html/4/element/tr.html"><span style="color: #000000; font-weight: bold;"><tr></span></a></span></li><li style="" class="li2">    <span style="color: #009900;"><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;"><td></span></a></span>Body Section<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></td></span></span></li><li style="" class="li1">  <span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></tr></span></span></li><li style="" class="li2">  <span style="color: #009900;"><a href="http://december.com/html/4/element/tr.html"><span style="color: #000000; font-weight: bold;"><tr></span></a></span></li><li style="" class="li1">    <span style="color: #009900;"><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;"><td></span></a></span>Footer Section<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></td></span></span></li><li style="" class="li2">  <span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></tr></span></span></li><li style="" class="li1"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></table></span></span></li></ol></div>


This is the same layout using DIV's

Syntax: [ Download ] [ Hide ]
<div class="html" id="{CB}" style="font-family: monospace;"><ol><li style="" class="li1"><span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;"><div></span></a></span></li><li style="" class="li2">  <span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;"><div></span></a></span></li><li style="" class="li1">    Header Section</li><li style="" class="li2">  <span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></div></span></span></li><li style="" class="li1">  <span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;"><div></span></a></span></li><li style="" class="li2">    Body Section</li><li style="" class="li1">  <span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></div></span></span></li><li style="" class="li2">  <span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;"><div></span></a></span></li><li style="" class="li1">    Footer Section</li><li style="" class="li2">  <span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></div></span></span></li><li style="" class="li1"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></div></span></span></li></ol></div>


DIV's make the code more readable to a programmer and to machines like search engines, etc...

Plus CSS designs usually result in smaller bandwidth footprints and therefore download faster and render faster due to the recursive nature of nested tables...


Top
 Profile  
 
PostPosted: Wed Sep 17, 2008 3:17 am 
Offline
Forum Newbie

Joined: Wed Sep 17, 2008 1:52 am
Posts: 2
OK ty very much for your (both) quick answers, that will give me meditation subject for next hours 8)

See you.


Top
 Profile  
 
PostPosted: Wed Sep 17, 2008 9:23 pm 
Offline
DevNet Resident
User avatar

Joined: Thu Jan 13, 2005 7:44 pm
Posts: 2341
Location: Sarasota Florida
There is no such thing as a "tag" in (X)HTML, they are called elements. :roll:

Part of good SEO is minimizing syntax to content.

There are tons of other benefits. I recommend making sure your CSS validates as CSS1. Your basic column layouts will work just fine even in IE if you do this.


Top
 Profile  
 
PostPosted: Fri Sep 26, 2008 9:54 pm 
Offline
Forum Contributor
User avatar

Joined: Tue Apr 22, 2008 8:56 pm
Posts: 110
FrenchyMatt wrote:
Hi all!!!

I'm a (french) beginner in php and html programming and i've been told about the incredibles advantages of "div" tag, comparated to a <table>...
Can someone help me with to understand how to use those tags??
Thanks for any help!!!

Hi and Image
Well, IE6 has an issue with Table :
IE6 doesn't show content of a (Table base) website till it loads all element of it.
But in FF or Opera there isn't this issue .


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 5 posts ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group