HTML Tables Tutorial
Tables are used to organize and format information on a web page. The cells of a table can contain text, images, URLs, etc.
A basic table uses the following tags:
| Element |
Desciption |
| <TABLE border=n cellspacing="x" cellpadding="y"> |
Table definition, with an attribute to control the thickness
of the line bordering the cells. With border="0", the table has no border.
Cellspacing is the space between cells, while cellpadding is the
space between the cell contents and the border of the cell. |
| <CAPTION align="bottom"> |
Defines a caption for the table. The default caption location is the top-centered |
| <TR> |
Table row, one or more per table. Each table row is independent. |
| <TD> |
Table data element or cell. A row is composed of one or more data items. |
| <TH> |
Table header. It bolds the content of the cell. |
| The following attributes are available for the elements of
<TR>,<TH> and <TD> |
| COLSPAN="n" |
Defines number of columns that a cell spans. |
| ROWSPAN="n" |
Defines number of rows that a cell spans. |
| WIDTH="n" or "n%" |
Table is "n" pixels wide or n% of the browser window or cell is n pixels wide or n% of the table |
| HEIGHT="n" or "n%" |
Height can be defined same as the width. |
Study the table sample bellow:
<table border="1">
<Caption align="center">My sample table</caption>
<tr>
<th> Car</th>
<th> Year</th>
<th> Price</th>
</tr>
<tr>
<td>Old Alero</td>
<td>1999</td>
<td>$14,000</td></tr>
<tr>
<td>Chev Blazer LT</td>
<td>2001</td>
<td>$23,000</td></tr>
<tr>
<td>Chev Silverado SL</td>
<td>2002</td>
<td>$25,000</td></tr>
</table>
| Table creation starts with the table tag <table>, then we define the border.
The border of this table is 1 and the caption is default, which is
top-centered. No cellspaces or cellpadding were specified.
A row of heading was defined using table row <tr> and table heading <th> tags.
Then three more rows of data were created using table row and table data <td> tags. Each tag closes when it's content ends. Result
|
Table cells that span more than one row/column
You can span cells more than one row or column by specifying # of rows or columns in td, eg <td colspan="3">. The following is cell that spans two columnms:
| Example | Result |
|---|
<table border="1">
<tr>
<th>Made</th>
<th colspan="2">Model
</th>
<tr>
<td>BMW</td>
<td>Coupe</td>
<td>Exotic</td>
</tr>
</table>
|
| Made |
Model |
| BMW |
Coupe |
Exotic |
|
Table that spans two rows:
| Example | Result |
|---|
<table border="1">
<tr>
<th> Made:</th>
<td>BMW</td>
</tr>
<tr>
<th rowspan="2">Model:</th>
<td>Coupe</td>
</tr>
<tr>
<td> Exotic</td>
</tr>
</table>
|
| Made: |
BMW |
| Model: |
Coupe |
| Exotic |
|
| Cell colored table | Result |
|---|
<html>
<table border="1">
<Caption>Car Inventory</caption>
<tr>
<th bgcolor="#cc00cc"> Car</th>
<th bgcolor="#00cc00"> Year</th>
<th bgcolor="#cccc00"> Price</th>
</tr><tr>
<td>Old Alero</td>
<td>1999</td>
<td>$14,000</td>
</tr><tr>
<td>Chev Blazer LT</td>
<td>2001</td>
<td>$23,000</td>
</tr><tr>
<td>Chev Silverado SL</td>
<td>2002</td>
<td>$25,000</td>
</tr><tr>
<td bgcolor="#ccff00" colspan="2"><center><b>
Inventory Value</b></center></td>
<td>$62,000</td>
</tr>
</table>
</html>
|
Car Inventory
| Car |
Year |
Price |
| Old Alero |
1999 |
$14,000 |
| Chev Blazer LT |
2001 |
$23,000 |
| Chev Silverado SL |
2002 |
$25,000 |
|
Inventory Value |
$62,000 |
|
|
|| 
|| 
|| 
Introduction
Frames
