3 Column Table Layout verses 3 Column HTML5 Layout
Has HTML5 and CSS3 solved the layout problem? Or are tables layouts with CSS still a better solution.
You decide. Please post comments about other pros and cons you find. We all become experts when we all contribute.
Note: With both a table layout and an HTML5 layout, CSS is used, so this is not a CSS versus anything article. No matter which you use, lets agree that CSS should be used for style. However, CSS3 does add to the layout with the HTML5 solution.
3 Column HTML Table Layout with CSS Style
Click this link to see this layout: 3 Column HTML Table Layout with CSS Style
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Table Layout with CSS Style - 3 Column</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html, body
{
height: 100%;
}
body
{
margin:0
}
table.layout
{
height:100%;
width: 100%;
border-collapse:collapse;
}
td.header
{
padding: 15px;
height: 120px;
color: white;
background: black
}
td.nav-bar
{
padding: 15px;
height:20px;
background:DarkGrey;
}
td.leftcol
{
padding: 15px;
width: 170px;
min-width: 170px;
background-color:Navy;
color: white;
}
td.midcol
{
padding: 15px;
min-width: 625px; /* Make 425px for min res of 800x600 */
}
td.rightcol
{
padding: 15px;
width: 205px;
min-width: 205px;
background-color:Navy;
color: white;
}
td.footer
{
height: 120px;
background: DarkGrey;
text-align: center;
}
</style>
</head>
<body>
<table class="layout">
<tr>
<td class="header" colspan="3">Header</td>
</tr>
<tr>
<td class="nav-bar" colspan="3">Nav bar</td>
</tr>
<tr>
<td class="leftcol">Aside left</td>
<td class="midcol">Article</td>
<td class="rightcol">Aside right</td>
</tr>
<tr>
<td class="footer" colspan="3">
<a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" />
</a>
</td>
</tr>
</table>
</body>
</html>
HTML Table Layout Pros
- Validated with W3C
- Only 95 lines of code with everything on its own line
- Works with every browser according to BrowserShots.org
- Very easy to use.
- Making the table be 100% height is easy
- Changing the width or height of any part of the page is easy
HTML Table Layout Cons
- Layout is coupled to the HTML, layout would be best decoupled – Solved by using scripting languages like PHP and ASP.NET
- Left column is found in HTML before the article body – No current solution
3 Column Layout HTML5 with CSS Layout/Style
Click this link to see this layout: 3 Column Layout HTML5 with CSS Layout/Style
<!DOCTYPE html>
<head>
<title>Layout HTML5 with CSS Layout/Style - 3 Column</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html, body
{
height: 100%;
}
body
{
margin:0
}
header
{
padding: 15px;
min-height: 150px;
color: white;
background: black
}
nav
{
padding: 15px;
min-height:20px;
background:DarkGrey;
}
#main
{
/* height:100%; */ /* Broken with it, broken without it */
display: -moz-box; /* Firefox */
display: -webkit-box; /* Safari and Chrome */
display: box; /* Future standard */
}
#main-aside-left
{
padding: 15px;
width: 170px;
min-width: 170px;
-moz-box-ordinal-group: 3; /* Firefox */
-webkit-box-ordinal-group: 3; /* Safari and Chrome */
box-ordinal-group: 3; /* Future standard */
background-color:Navy;
color: white;
}
article
{
padding: 15px;
min-width: 625px; /* Make 425px for min res of 800x600 */
-moz-box-flex: 2; /* Firefox */
-webkit-box-flex: 2; /* Safari and Chrome */
box-flex: 2; /* Future standard */
-moz-box-ordinal-group: 2; /* Firefox */
-webkit-box-ordinal-group: 2; /* Safari and Chrome */
box-ordinal-group: 2; /* Future standard */
}
#main-aside-right
{
padding: 15px;
width: 205px;
min-width: 205px;
-moz-box-ordinal-group: 1; /* Firefox */
-webkit-box-ordinal-group: 1; /* Safari and Chrome */
box-ordinal-group: 1; /* Future standard */
background-color:Navy;
color: white;
}
footer
{
height: 120px;
height: 120px;
background: DarkGrey;
text-align: center;
}
</style>
</head>
<header>Header</header>
<nav>Nav bar</nav>
<div id="main">
<article>Article</article>
<aside id="main-aside-left">Aside left</aside>
<aside id="main-aside-right">Aside right</aside>
</div>
<footer>
<a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" />
</a>
</footer>
HTML5 Layout Pros
- W3C validated (experimental)
- Article data comes before the data in the asides – This is a huge SEO bonus
- Only 97 lines of code both CSS and HTML code, with everything on its own line
- Very easy to use.
- Making the table be 100% height is easy
- Changing the width or height of any part of the page is easy
HTML5 Layout Cons
- It doesn’t work on IE 9 or below and fails in many other browsers according to Browsershots.org. – No current solution.
- Much of the CSS has to be duplicated – No current solution but when it is fixed, the code will be another 10 lines smaller
- If the content does not fill the screen, there is no way to make the screen exactly 100% – No current solution but as long as the content is larger than the screen this doesn’t matter
- Layout is coupled to CSS, a styling tool, layout should be decoupled – Solved by having a separate CSS file just for layout
Conclusion
Use Table layouts for now if your browser support is high priority.
Use HTML5 layouts if you can enforce uses to use HTML5 capable browsers.
If you desire to improve your experience just keep visiting
this web page and be updated with the most up-to-date information posted here.
https://deepai.org/profile/evisodavia