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:

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:

• Setting the width of the table to 400px
• Changed border setting to 3 for a three dimensional effect.
• Added the inline style tag <td style="text-align:center;padding: 2px 2px"> 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 1	Column 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

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.