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. |
