Hi all<br />
<br />
What are the advantages and disadvantages of DIV over table layout?<br />
<br />
Does older browsers (as old as IE5) support DIV?<br />
<br />
What limitations are there with DIV over table layout?<br />
<br />
If I wanted to align a number of navigation buttons, is this easly done with DIV like table layout?<!--content-->Originally posted by smercer <br />
<br />
What are the advantages and disadvantages of DIV over table layout?<br />
<br />
<br />
There are a lot, some of which include: semantically correct documents, Bandwidth Saving, and Search Engine Optimization. see this (<!-- m --><a class="postlink" href="http://www.hotdesign.com/seybold/">http://www.hotdesign.com/seybold/</a><!-- m -->) for more reason's for why not to use tables for layout <br />
Originally posted by smercer <br />
<br />
Does older browsers (as old as IE5) support DIV?<br />
<br />
<br />
Almost all browser's "support" div's, but often your best bet is to send unstyled or less styled conetent to browsers older than IE5<br />
Originally posted by smercer <br />
<br />
What limitations are there with DIV over table layout?<br />
<br />
<br />
None<br />
Originally posted by smercer <br />
<br />
If I wanted to align a number of navigation buttons, is this easly done with DIV like table layout? <br />
Vertically or Horizonally? both are quite easy.<br />
Some other notes:<br />
While most people will know what you're talking about when you say "div layout", it seems like what you're really trying to say is CSS layout.<!--content-->Thanks Sam,<br />
<br />
So if I had a table layout like this:<br />
<br />
<table CLASS="tabletitle" cellpadding=0 cellspacing=0><br />
<tr><br />
<td CLASS="tdtitle"><img CLASS="imgtitle" src=http://www.webdeveloper.com/forum/archive/index.php/<br />
"images/Resume-of-scott-mercer.gif" alt="Resumeof Scott Mercer" /><br />
</td><br />
<br />
<td CLASS="tdshadow"><img CLASS="imgshadow" name="Top_shadow" src=http://www.webdeveloper.com/forum/archive/index.php/<br />
"images/Top-shadow.gif" /><br />
</td><br />
</tr><br />
<br />
</table><br />
<br />
<table CLASS="tablenav" cellpadding=0 cellspacing=0><br />
<tr><br />
<td class="tdnavintro"><br />
<img CLASS="imgnavintro" src=http://www.webdeveloper.com/forum/archive/index.php/"images/Introduction_disabled.gif" alt=<br />
"Introduction" /><br />
</td><br />
<br />
<td class="tdnaved"><br />
<img CLASS="imgnaved" name="Education" src=http://www.webdeveloper.com/forum/archive/index.php/"images/Education.gif" alt="Education" /><br />
</td><br />
<br />
<td class="tdnavemploy"><br />
<img CLASS="imgnavemploy" name="Employment_history" src=http://www.webdeveloper.com/forum/archive/index.php/"images/Employment-history.gif" alt="Employment History" /><br />
</td><br />
<br />
<td class="tdnavper"><br />
<img CLASS="imgnavper" name="Personal_qualities_button" src=http://www.webdeveloper.com/forum/archive/index.php/"images/Personal-qualities.gif" alt="Personal Qualities" /><br />
</td><br />
<br />
<td class="tdnavref"><img CLASS="imgnavref" name="References_button" src=http://www.webdeveloper.com/forum/archive/index.php/"images/References.gif" alt="References" /><br />
</td><br />
<br />
<td class="tdnavspacer"><br />
<img class="imgnavspacer" src=http://www.webdeveloper.com/forum/archive/index.php/"images/Page_width_spacer.gif" /><br />
</td><br />
</tr><br />
<br />
</table><br />
<br />
would I transform it into this?(there is no spacing between pictures):<br />
<br />
<div><img CLASS="imgtitle" src=http://www.webdeveloper.com/forum/archive/index.php/<br />
"images/Resume-of-scott-mercer.gif" alt="Resumeof Scott Mercer" /><br />
<br />
<img CLASS="imgshadow" name="Top_shadow" src=http://www.webdeveloper.com/forum/archive/index.php/<br />
"images/Top-shadow.gif" /><br />
<br /><br />
<br />
<img CLASS="imgnavintro" src=http://www.webdeveloper.com/forum/archive/index.php/"images/Introduction_disabled.gif" alt=<br />
"Introduction" /><br />
<br />
<img CLASS="imgnaved" name="Education" src=http://www.webdeveloper.com/forum/archive/index.php/"images/Education.gif" alt="Education" /><br />
<br />
<img CLASS="imgnavemploy" name="Employment_history" src=http://www.webdeveloper.com/forum/archive/index.php/"images/Employment-history.gif" alt="Employment History" /><br />
<br />
<img CLASS="imgnavper" name="Personal_qualities_button" src=http://www.webdeveloper.com/forum/archive/index.php/"images/Personal-qualities.gif" alt="Personal Qualities" /><br />
<br />
<img CLASS="imgnavref" name="References_button" src=http://www.webdeveloper.com/forum/archive/index.php/"images/References.gif" alt="References" /><br />
<br />
<img class="imgnavspacer" src=http://www.webdeveloper.com/forum/archive/index.php/"images/Page_width_spacer.gif" /><br />
</div><br />
<br />
also can i set padding like i can for tables?<!--content-->This topic has gone over in the General Forum, here. (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&threadid=34991">http://www.webdeveloper.com/forum/showt ... adid=34991</a><!-- m -->) It's rather lengthy, but it definately goes into all the pros and cons of table vs. div .<!--content-->Might want to also read this: <!-- m --><a class="postlink" href="http://www.ryanbrill.com/archives/why-use-web-standards/">http://www.ryanbrill.com/archives/why-u ... standards/</a><!-- m --><!--content-->Replacing table cells with divs one on one is definitely not the preferred way of converting a table-based layout to a CSS-based layout.<br />
Far better, but laborious, would be to strip the base document of all unnecessary tables (tabular data perfectly lives inside tables) and to restore a logical structure, typically using divs for main sections.<br />
Then CSS rules can be applied to the various sections, elements, etc. to achieve the desired layout, which may or may not be a facsimile of the original table-based layout.<br />
<br />
Mind you, if time or skill level doesn't permit, leaving some tables in place - primarily to avoid positioning woes - would be an acceptable intermediate step until more experience with CSS, or more time is available.<!--content-->
<br />
What are the advantages and disadvantages of DIV over table layout?<br />
<br />
Does older browsers (as old as IE5) support DIV?<br />
<br />
What limitations are there with DIV over table layout?<br />
<br />
If I wanted to align a number of navigation buttons, is this easly done with DIV like table layout?<!--content-->Originally posted by smercer <br />
<br />
What are the advantages and disadvantages of DIV over table layout?<br />
<br />
<br />
There are a lot, some of which include: semantically correct documents, Bandwidth Saving, and Search Engine Optimization. see this (<!-- m --><a class="postlink" href="http://www.hotdesign.com/seybold/">http://www.hotdesign.com/seybold/</a><!-- m -->) for more reason's for why not to use tables for layout <br />
Originally posted by smercer <br />
<br />
Does older browsers (as old as IE5) support DIV?<br />
<br />
<br />
Almost all browser's "support" div's, but often your best bet is to send unstyled or less styled conetent to browsers older than IE5<br />
Originally posted by smercer <br />
<br />
What limitations are there with DIV over table layout?<br />
<br />
<br />
None<br />
Originally posted by smercer <br />
<br />
If I wanted to align a number of navigation buttons, is this easly done with DIV like table layout? <br />
Vertically or Horizonally? both are quite easy.<br />
Some other notes:<br />
While most people will know what you're talking about when you say "div layout", it seems like what you're really trying to say is CSS layout.<!--content-->Thanks Sam,<br />
<br />
So if I had a table layout like this:<br />
<br />
<table CLASS="tabletitle" cellpadding=0 cellspacing=0><br />
<tr><br />
<td CLASS="tdtitle"><img CLASS="imgtitle" src=http://www.webdeveloper.com/forum/archive/index.php/<br />
"images/Resume-of-scott-mercer.gif" alt="Resumeof Scott Mercer" /><br />
</td><br />
<br />
<td CLASS="tdshadow"><img CLASS="imgshadow" name="Top_shadow" src=http://www.webdeveloper.com/forum/archive/index.php/<br />
"images/Top-shadow.gif" /><br />
</td><br />
</tr><br />
<br />
</table><br />
<br />
<table CLASS="tablenav" cellpadding=0 cellspacing=0><br />
<tr><br />
<td class="tdnavintro"><br />
<img CLASS="imgnavintro" src=http://www.webdeveloper.com/forum/archive/index.php/"images/Introduction_disabled.gif" alt=<br />
"Introduction" /><br />
</td><br />
<br />
<td class="tdnaved"><br />
<img CLASS="imgnaved" name="Education" src=http://www.webdeveloper.com/forum/archive/index.php/"images/Education.gif" alt="Education" /><br />
</td><br />
<br />
<td class="tdnavemploy"><br />
<img CLASS="imgnavemploy" name="Employment_history" src=http://www.webdeveloper.com/forum/archive/index.php/"images/Employment-history.gif" alt="Employment History" /><br />
</td><br />
<br />
<td class="tdnavper"><br />
<img CLASS="imgnavper" name="Personal_qualities_button" src=http://www.webdeveloper.com/forum/archive/index.php/"images/Personal-qualities.gif" alt="Personal Qualities" /><br />
</td><br />
<br />
<td class="tdnavref"><img CLASS="imgnavref" name="References_button" src=http://www.webdeveloper.com/forum/archive/index.php/"images/References.gif" alt="References" /><br />
</td><br />
<br />
<td class="tdnavspacer"><br />
<img class="imgnavspacer" src=http://www.webdeveloper.com/forum/archive/index.php/"images/Page_width_spacer.gif" /><br />
</td><br />
</tr><br />
<br />
</table><br />
<br />
would I transform it into this?(there is no spacing between pictures):<br />
<br />
<div><img CLASS="imgtitle" src=http://www.webdeveloper.com/forum/archive/index.php/<br />
"images/Resume-of-scott-mercer.gif" alt="Resumeof Scott Mercer" /><br />
<br />
<img CLASS="imgshadow" name="Top_shadow" src=http://www.webdeveloper.com/forum/archive/index.php/<br />
"images/Top-shadow.gif" /><br />
<br /><br />
<br />
<img CLASS="imgnavintro" src=http://www.webdeveloper.com/forum/archive/index.php/"images/Introduction_disabled.gif" alt=<br />
"Introduction" /><br />
<br />
<img CLASS="imgnaved" name="Education" src=http://www.webdeveloper.com/forum/archive/index.php/"images/Education.gif" alt="Education" /><br />
<br />
<img CLASS="imgnavemploy" name="Employment_history" src=http://www.webdeveloper.com/forum/archive/index.php/"images/Employment-history.gif" alt="Employment History" /><br />
<br />
<img CLASS="imgnavper" name="Personal_qualities_button" src=http://www.webdeveloper.com/forum/archive/index.php/"images/Personal-qualities.gif" alt="Personal Qualities" /><br />
<br />
<img CLASS="imgnavref" name="References_button" src=http://www.webdeveloper.com/forum/archive/index.php/"images/References.gif" alt="References" /><br />
<br />
<img class="imgnavspacer" src=http://www.webdeveloper.com/forum/archive/index.php/"images/Page_width_spacer.gif" /><br />
</div><br />
<br />
also can i set padding like i can for tables?<!--content-->This topic has gone over in the General Forum, here. (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&threadid=34991">http://www.webdeveloper.com/forum/showt ... adid=34991</a><!-- m -->) It's rather lengthy, but it definately goes into all the pros and cons of table vs. div .<!--content-->Might want to also read this: <!-- m --><a class="postlink" href="http://www.ryanbrill.com/archives/why-use-web-standards/">http://www.ryanbrill.com/archives/why-u ... standards/</a><!-- m --><!--content-->Replacing table cells with divs one on one is definitely not the preferred way of converting a table-based layout to a CSS-based layout.<br />
Far better, but laborious, would be to strip the base document of all unnecessary tables (tabular data perfectly lives inside tables) and to restore a logical structure, typically using divs for main sections.<br />
Then CSS rules can be applied to the various sections, elements, etc. to achieve the desired layout, which may or may not be a facsimile of the original table-based layout.<br />
<br />
Mind you, if time or skill level doesn't permit, leaving some tables in place - primarily to avoid positioning woes - would be an acceptable intermediate step until more experience with CSS, or more time is available.<!--content-->