Free WebSchools.com
Google



Submit ArticleForumsLive chat WebhostingSEO ToolsLink TO UsResources


HOME

HTML Basic

HTML Introduction
HTML Basic Tags
HTML Formatting
HTML Entities
HTML Links
HTML Frames
HTML Tables



HTML Lists
HTML Forms
HTML Images
HTML Background
HTML Colors

HTML Advanced
HTML Fonts
HTML Styles
HTML Head
HTML Meta
HTML Scripts
HTML Events

Introduction to tables

The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells. table is an arrangement of horizontal rows and verticl columns .the intersection of rows and column is called a cell.html tables are not difficult to create but need proper organization.Html tables begins with <table> tag and end with </table>inbetween these 2 tags



  • <tr>............defines a horizontal row
  • <td>.............defines vertical rows
  • <th>............specifies a data cell as a table heading
HTML Tables are contained within a TABLE element. The TABLE element denotes the range of the table, and uses attribute to define properties of it. For example, the BORDER attribute indicates the size of the border to draw around the table and between each of the table's cells -- in the notation of tables, each box within the table is called a cell. There are several other attributes besides BORDER. These are discussed in a later document.
The only two elements allowed inside a table are CAPTION, and TR. CAPTION defines a table caption, and can take one attribute -- ALIGN -- to define where the caption should be placed. Possible values are "top", "bottom" "left" and "right".

Example

OUTPUT

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

Headings in a Table

Headings in a table are defined with the <th> tag.
output
Heading Another Heading
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

Empty Cells in a Table


Table cells with no content are not displayed very well in most browsers.
 output
row 1, cell 1 row 1, cell 2
row 2, cell 1

Adding caption to the table


output

This table has a caption, and a thick border:

My Caption
cell 1 cell 2 cell 3
cell 4 cell 5 cell 6

Cellspacing


CELLPADDING sets the amount of space between the contents of the cell and the cell wall. The default is 1. CELLPADDING is usually more effective than CELLSPACING for spreading out the contents of the table.
OUTPUT

Without cellspacing:

First Row
Second Row

With cellspacing:

First Row
Second Row

Cell padding


Output

Without cellpadding:

First Row
Second Row

With cellpadding:

First Row
Second

Adding background color and image to the table

output

A background color:

First Row
Second Row

A background image:

First Row
Second Row

Table Tags

Tag Description
<table> Defines a table
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table cell
<caption> Defines a table caption
<colgroup> Defines groups of table columns
<col> Defines the attribute values for one or more columns in a table
<thead> Defines a table head
<tbody> Defines a table body
<tfoot> Defines a table footer