iNET Interactive - Online Advertising Agency
          
   Home    Authors    About    Login    Contact Us
   Search:   
Advanced Search     
  Articles

  ASP (26)
  ASP.NET (19)
  C and C++ (4)
  CFML (2)
  CGI and Perl (16)
  Flash (2)
  Java (7)
  JavaScript (28)
  PHP (92)
  MySQL (13)
  MSSQL (3)
  HTML (35)
  SEO (9)
  Visual Basic (12)
  CSS (13)
  SSI (5)
  XML (12)
  C# (14)

  Developer News

September 7, 2008
Web Design Clinic - Art meets Webdesign
About
 
September 6, 2008
Browser safe colors - do we care?
About
 
September 6, 2008
Get a Daily CSS Tip
About
 
September 5, 2008
It's safe to use Google Chrome now
About
 
September 5, 2008
Add a comment
.net
 
September 5, 2008
The Partial Function Application in JavaScript
WebReference.com
 
Courtesy of moreover.com
 
Want to receive new articles via e-mail? Click here!
/Home /HTML

HTML Tables 101 

  Views:    6628
  Votes:    1
by Diego Botello 11/30/03 Rating: 

Synopsis:

Tables are a fundamental part of any web page and let you keep an order on your web design, so mastering them is a must for every web developer.
Pages: firstback2 3 forwardlast
The Article

To define a table we need to use three main tags: <table>, <tr> and <td>.

<table> defines the limits of a table, within it you can also specify some table

characteristics that we will discuss later. <tr> defines each table row. <td> defines

the data within the table rows. Each table row can have several <td>. Lets see an example:

<table>
<tr>
<td>Canada</td>
<td>Ontario</td>
</tr>
<tr>
<td>USA</td>
<td>Washington</td>
</tr>
<tr>
<td>England</td>
<td>London</td>
</tr>
</table>

 

The result is:

 

Canada Ontario

USA Washington

England London

 

 

<table> attributes:

<table> tag has many properties, here we are going to discuss the main ones.

The border attribute lets you define the width of the table border.

To add a border to the above table we will have to modify the table tag this way

 

<table border=2>

 

The table below shows the result

 

CanadaOntario
USAWashington
EnglandLondon

 

The bgcolor attribute let us modify the background color. For example:

 

<table border=2 bgcolor="yellow">

 

Will result in

 

CanadaOntario
USAWashington
EnglandLondon

 

Use width attribute to change the width of the table

 

<table border=2 bgcolor="yellow" width=100%>

 

CanadaOntario
USAWashington
EnglandLondon

 

Another example will be

 

<table border=2 bgcolor="yellow" width=30%>

 

CanadaOntario
USAWashington
EnglandLondon

 

 

Cellpadding will modify the space between the text and the cell border

 

<table border=2 bgcolor="yellow" cellpadding=10>

 

CanadaOntario
USAWashington
EnglandLondon

 

The table below shows a complete list of <table> attributes:

Attribute

Description

Border

Size of table border

Cellpadding

Space between cell text and its border

Cellspacing

Space between cells

Width

Width of the table

Bgcolor

Background color of the table

Background

Background image of the table

Align

Alignment of table (left, center, right)

hspace

Horizontal space between table and text

vspace

Vertical space between table and text

Height

Height of the table

Frame

Parts in the outside border that are available 

rules

sets if there will be internal borders or not

Bordercolor

color of the border

Bordercolorlight

color of the "light" part of the table border

Bordercolordark

color of the "dark" part of the table border 

summary

A summary of the table
Pages: firstback2 3 forwardlast

Similar/related articles:


 
  Sponsors