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.

This is the basic code for the following table: (single row - 2 column)
<table style="width:200px" 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.

Note: Tables of any kind are not liquid in Mozilla and Opera browsers.

The Obsolete and Deprcated Attributes of the table tags are:

( You should use style sheets for these settings.)

Most of these are Obsolete in HTML5

width (obsolete)
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 (obsolete) (Use: CSS padding:)
Specifies the distance in pixels of the text or image from the inside wall of a cell.
cellspacing (obsolete) (Use: CSS margin)
Specifies in pixels, the spacing between cells in a table.
bgcolor (obsolete) (Use: CSS background-color)
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 (Use: CSS background: url())
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 (obsolete)
Horizontal alignment. Choices are left, right or center.
valign (obsolete)
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 (obsolete)
Horizontal alignment. Choices are left, right or center.
valign (obsolete)
Vertical alignment. Choices are top, middle or bottom.
bgcolor (obsolete)
You may set individual background colors for cells.
height (obsolete)
width (obsolete)

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 style="width:400px" border="3">
<tr>
<td style="text-align:center;padding: 2px 2px">Column One</td>
<td style="text-align:center;padding: 2px 2px">Column Two</td>
</tr></table>


Column One Column Two

The changes we made were:

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 style="width:400px; border:none">
<tr><td style="text-align:center;padding: 2px 2px">
Button One </td>
<td style="text-align:center;padding: 2px 2px"><img src="button.bmp"></td>
</tr></table>

Button One Two column button diagram

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

The raised appearance is produced in our website style sheet.

To produce the shadow effect on tables you can add this code to your style sheet:

table {
    box-shadow: 4px 4px 10px #000000  
}

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: #ffffff;
  background-image : URL(images/);
  background-repeat : repeat, no-repeat;
}

CSS Tables

Here's the code and CSS for producing a two column layout by turning your divisions into tables.

<div class="tablecss">
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
</div>
</div>

The CSS:

div.tablecss {
    display: table;
    width: 100%;
    float: left 
}

div.row {
    display: table-row;
    width: 100%
}

div.cell {
	display: table-cell
}

Pretty worthless, but you might find it handy.