Create a Free Website

HTML Code Tutorial


Tables in HTML

The accepted purpose of tables is to present data in rows and columns on a web page.

There was a time when tables were used to structure webpages.

With improvements in CSS and the way browsers handle it, the practice is no longer necessary.

Learn to structure your web pages the right way using divisions and CSS.

Use tables for presenting data on your pages.

Basic Table Tags

<table></table>Table
<tr></tr>Row
<td></td>Cell or Column
<th></th>Cell or Column Heading

Note: We present only the most basic tags for beginners. If you want to build very sophisticated tables you should consult other sources for additional information.

Create a FREE Website


NO CODING!!

Create beautiful, professional websites
WITHOUT Learning to Code!!

19 Million+ Amazing FLASH websites
created by people just like you,
with no knowledge of HTML coding.

Create Free Websites


Start Your FREE Website Now!



This is the basic code for the following table: (single row - 2 column)
<table width="200" border="1">
<tr>
<td>Column One</td>
<td>Column Two</td>
</tr></table>

Column One Column Two

Closing tags are required for all table related tags. Beginners should also avoid nesting tables. (Building a table within a table.)

All table structures begin with the table tag. Remember the closing tag.

The Attributes of the table tag are:

( You should use style sheets for these settings.)

width
Measurements are in pixels or percentage.
border
Border settings are a matter of preference. Experiment and decide which works best for you. Zero is no border. One is a single border. Two is 3 dimensional. Successive numbers increase the thickness of the 3 dimensional effect.
cellpadding
Specifies the distance in pixels of the text or image from the inside wall of a cell.
cellspacing
Specifies in pixels, the spacing between cells in a table.
bgcolor
Sets and overall background color for the entire table. You can also use bgcolor in row and cell tags to produce multi color effects.
background
For adding a background image to the table. ( You should use style sheets for this setting.)

Row Tag

The <tr> or row tag is used to define rows in a table. Do not omit the closing tag.

A row can contain numerous cells defined by the <td> tag.

The attributes of the tr tag are:
align
Horizontal alignment. Choices are left, right or center.
valign
Vertical alignment. Choices are top, middle or bottom.

Cell or Column Tag

The td tag is used to define the cells in a row.
The most common attributes of the td tag are:

align
Horizontal alignment. Choices are left, right or center.
valign
Vertical alignment. Choices are top, middle or bottom.
bgcolor
You may set individual background colors for cells.
height
width


Note: There are other table tags that could be presented here. Learn these to get a basic understanding of how tables work. Later on you can add the other tags to your library of knowledge.



Now let's change some of the code in the example and see how it affects the appearance of the table.
This is the basic code for the following table:
<table width="400" border="3">
<tr><td align="center">
Column One </td>
<td align="center">Column Two</td>
</tr></table>



Column One Column Two

The changes we made were:

  • Setting the width of the table to 400
  • Changed border setting to 3 for a three dimensional effect.
  • Added the align="center" attribute to both cells.

Column Headings

Column headings are placed in a separate row above the associated row of cells. <tr><th>Column 1</th><th>Column 2</th></tr>

Column 1Column 2
Column One Column Two

Removing the Border

This is the basic code for the following table:
<table width="400" border="0">
<tr><td align="center">
Button One </td>
<td align="center"><img src="button.bmp"></td>
</tr></table>

Button One Two column button diagram


Note the changes made to the code, to produce the results.


Tables and CSS

these are afew of the most common CSS setting used to define tables.

For Table tag:

table {
  width: 100% or 200px;  relative or absolute
  height: 200px;
  border: solid #000 1px; Black border all 4 sides
  background-color: #99ccff;
  background-image : URL(images/);
  background-repeat : repeat, no-repeat;

}

For the tr tag:

 tr {
   vertical-align: top, middle, bottom replaces valign=""
 }

For the td tag:

td {
  text-align: left, center,right replace align=""
  padding: 0 0 0 0 replaces cellpadding
  margin: 0 0 0 0 replaces cellspacing
  border: solid #000000 1px black border all 4 sides
  background-color: #ffffff;
  background-image : URL(images/);
  background-repeat : repeat, no-repeat;
}

Note: For W3C compliance, include the summary attribute in all your tables. Provide the user with a summary of the contents of the table.
<table summary="What's in this table">


Check out our Free Frames Template Kit or try our Free Frames Kit Demo