Home arrow HTML arrow Page 4 - Learn to Use HTML Tables and DIV tags Quickly
HTML

Learn to Use HTML Tables and DIV tags Quickly


Tables have always been popular for simplifying the layout of information on web pages. Style sheets, however, are replacing the idea of a tabulated format. Tables are still popular, though, as they present a very popular layout for design-friendly interfaces. So the need for some kind of combination between plain table tags and styles has arisen.

Author Info:
By: Stephen Davies
Rating: 4 stars4 stars4 stars4 stars4 stars / 100
November 21, 2007
TABLE OF CONTENTS:
  1. · Learn to Use HTML Tables and DIV tags Quickly
  2. · Use of Table Style
  3. · The Use of the DIV tag
  4. · Combining the use of DIV and TABLE tags

print this article
SEARCH DEVARTICLES

Learn to Use HTML Tables and DIV tags Quickly - Combining the use of DIV and TABLE tags
(Page 4 of 4 )

So, as we have discussed here, the <DIV> tag is similar to the table tag in terms of how it can aid design composition on a web page. There is also a way to combine the usage of both TABLE and DIV tags. This example shows how they can be combined.

A style sheet should be used to apply the table properties and the DIV tags should be used to compose the page. Let us apply this to the code for a simple example:

<div id="Main Page">

<div id="row one">


<div id="left col">

<h4>Left Column</h4>

<p> Place any text here..</p>

</div>


<div id="center">

<h4>Center Column</h4>

<p> Place any text here..</</p>

</div>


<div id="right col">

<h4>Right Column</h4>

<p> Place any text here..</</p>

</div>


</div>

</div>


The DIV tag will follow the usual table rules and apply the styles below to display the table:

#Main Page {

display: table;

}


#row one {

display: table-row;

}


#left col, #center, #right col {

display: table-cell;

}

What is happening is a table simulation using DIV tags. The cell properties that are inherited by the table are in the style sheet above. This can be done quite erratically if not done properly, though the same principles apply when coding a style sheet to define the table cell properties.

The only browser where problems seem to occur is IE6. It seems Firefox and Opera are okay. When embedding any data inside the DIV container, the rows may not appear correctly once a lot of cells are added. If you do this carefully, though, it should work in all browsers.

That concludes this article. Once you get used to using styles with DIV tags in this way, you will move away from just plain TABLE tags eventually and create many nice front pages. Go on, DIV it up.


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials