Home arrow HTML arrow Page 3 - 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 - The Use of the DIV tag
(Page 3 of 4 )

Like tables, <DIV> tags allow for compositional treatment to the web page. There is a line break between <DIV> tags that allows for more spacing and composition, though that's okay. The idea is that you can style each <DIV> tag differently to suit your design. Style sheet coders like this idea as a mixture of styles can be introduced into the page.

It looks like this when placed:

The text is here.

Or the text is here and looks like this.

This is very basic but what is happening culminates in stylized block elements separated and therefore hosted properly. A table could be used with no borders, and simple changes to the font style. Combining DIV tags with tables, however, leads to a nice design.

The code for the above example is:

<html>

<body>

<div style="color:#00CC00;">The text is here</div>

<div style="color:#000066;">Or the text is here and looks like this</div>

</body>

</html>

That is just an illustration as the proper usage would look like this for a text section:


<div style="background-color: #00CC00; text-align:center">

<p> The text is here</p>

</div>

<div style="border:1px solid black">

<p> This is a paragraph in a div section </p>

</div>


Another example of proper usage is with alignment in text:

<div align="center">

<h3>Hi, now the text is here</h3>

<p><img src="somesillyimage.jpg">

<h4>I know that the text can be here too and for <a href="http:www.somesite.org/">hyperlinks</a></h4>

</div>

So, the <div> tag will give many advantages to designers who are using styles more and wanting to move away from just plain tables. The <div> tag complements the style properties of a style sheet.


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