Home arrow HTML arrow 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
(Page 1 of 4 )

Introduction

Content is easily readable in a tabular form. Most web sites that use tables are seen to be very smooth in appearance. For those who want to know a little more about tables and how they can be complemented by <STYLE> and <DIV> tags to quickly create a web page, here goes.

First, let me give you a little overview of table usage that is still popular among designers today with or without the use of style sheets. The main reason for this is spacing. Composition is always a problem among novice designers and can be hard on the eye if not corrected.

<table border="1">

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr>

</table>

This is a typical example of a 2x2 table, rows by columns. The tables themselves can become as complex as the coder requires. Tabulated sheets can become quite intricate using tables alone.

Here is an example of the above table with no border:

<html>

<body>

<h4>This table has no borders:</h4>

<table>

<tr>

<td>100</td>

<td>200</td>

<td>300</td>

</tr>

<tr>

<td>400</td>

<td>500</td>

<td>600</td>

</tr>

</table>

</html>


The spacing in the table cells can be padded out as required, if we insert the line - border="1" cellpadding="10" - into the <TABLE> tag like this:

<table border="1" cellpadding="10" >

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr>

</table>



The cellpadding element can be customized according to your needs. What normally happens is once the table has been designed like this into a tabular form, those cells can begin to take shape. Look at this simple table web site plan for example. With the style sheets to one side, there is left-right design here with data in the center and down the right. Here is a standard table with 3 rows and 3 columns:

LOGO

HERE

BANNER ADVERTISING COMPANY SERVICES THROUGH AN ANIMATED GIF OR FLASH HEADER

DATE



MENU ITEMS


CONTENT

here is the code for this 3x3 table:


<table border="1" cellpadding="10" >

<tr>

<td> LOGO HERE </td>

<td> BANNER ADVERTISING COMPANY SERVICES THROUGH AN ANIMATED GIF OR FLASH HEADER </td>

<td>DATE</td>

</tr>

<tr>

<td>MENU ITEMS</td>

<td>CONTENT</td>

<td>ADS</td>

</tr>

<tr>

<td>OTHER MENU ITEMS</td>

<td>CONTENT</td>

<td>ADS</td>

</tr>

</table>






ADS

OTHER MENU ITEMS


CONTENT

ADS



This is a pretty generic view but illustrates how important table design is for composition of web page elements. It can be made to be much more intricate but this shows how a table is used to design a web page. It is shows how the placement of images, menus and content can be planned.

Cell spacing can add some nice composition to the page. It will increase the spacing between each cell. Here are the cells spaced out using the above code:

<table border="1" cellspacing="10">

<tr>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

</tr>

</table>

If no border is required, simply change the border=1 to border="0". Tables allow for smooth composition results.

In the next section I will give you some tips on using tables.


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-2014 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials