HTML Tutorial - Tables

Example 1: Here is a simple table with 4 columns and 3 rows. The table border=1.
Row 1:Cell 1 Row 1:Cell 2 Row 1:Cell 3 Row 1:Cell 4
Row 2:Cell 1 Row 2:Cell 2 Row 2:Cell 3 Row 2:Cell 4
Row 3:Cell 1 Row 3:Cell 2 Row 3:Cell 3 Row 3:Cell 4

Example 2: Here is the same table with the table border=0.
Row 1:Cell 1 Row 1:Cell 2 Row 1:Cell 3 Row 1:Cell 4
Row 2:Cell 1 Row 2:Cell 2 Row 2:Cell 3 Row 2:Cell 4
Row 3:Cell 1 Row 3:Cell 2 Row 3:Cell 3 Row 3:Cell 4

Example 3: A table column can span more than 1 row or column.
Row 1 & 2:Cell 1 Row 1:Cell 2 Row 1:Cell 3 Row 1:Cell 4
Row 2:Cell 2 Row 2:Cell 3 Row 2:Cell 4
Row 3:Cell 1 Row 3:Cell 2 Row 3:Cell 3 & 4

Example 4: A table can have colors.
Row 1:Cell 1 Row 1:Cell 2 Row 1:Cell 3 Row 1:Cell 4
Row 2:Cell 1 Row 2:Cell 2 Row 2:Cell 3 Row 2:Cell 4
Row 3:Cell 1 Row 3:Cell 2 Row 3:Cell 3 Row 3:Cell 4

Example 5: A table can be any width or size.
Row 1:Cell 1 Row 1:Cell 2 Row 1:Cell 3 Row 1:Cell 4
Row 2:Cell 1 Row 2:Cell 2 Row 2:Cell 3 Row 2:Cell 4
Row 3:Cell 1 Row 3:Cell 2 Row 3:Cell 3 Row 3:Cell 4

Here is what the code looks like for Example 1. Change to border=0 for no border as in Example 2.
<table align="center" width="450" border="1">
<tr>
<td>Row 1:Cell 1</td>
<td>Row 1:Cell 2</td>
<td>Row 1:Cell 3</td>
<td>Row 1:Cell 4</td>
</tr>
<tr>
<td>Row 2:Cell 1</td>
<td>Row 2:Cell 2</td>
<td>Row 2:Cell 3</td>
<td>Row 2:Cell 4</td>
</tr>
<tr>
<td>Row 3:Cell 1</td>
<td>Row 3:Cell 2</td>
<td>Row 3:Cell 3</td>
<td>Row 3:Cell 4</td>
</tr>
</table>

Here is what the code looks like for Example 3.
<table align="center" width="450" border="1">
<tr>
<td align=center rowspan=2>Row 1 & 2:Cell 1</td>
<td>Row 1:Cell 2</td>
<td>Row 1:Cell 3</td>
<td>Row 1:Cell 4</td>
</tr>
<tr>
<td>Row 2:Cell 2</td>
<td>Row 2:Cell 3</td>
<td>Row 2:Cell 4</td>
</tr>
<tr>
<td>Row 3:Cell 1</td>
<td>Row 3:Cell 2</td>
<td align=center colspan=2>Row 3:Cell 3 & 4</td>
</tr>
</table>

Here is what the code looks like for Example 4.
<table bgcolor="yellow" bordercolor="red" align="center" width="450" border="1">
<tr>
<td>Row 1:Cell 1</td>
<td bgcolor=orange>Row 1:Cell 2</td>
<td>Row 1:Cell 3</td>
<td>Row 1:Cell 4</td>
</tr>
<tr>
<td>Row 2:Cell 1</td>
<td>Row 2:Cell 2</td>
<td bgcolor=lime>Row 2:Cell 3</td>
<td>Row 2:Cell 4</td>
</tr>
<tr>
<td bgcolor=lightblue>Row 3:Cell 1</td>
<td>Row 3:Cell 2</td>
<td>Row 3:Cell 3</td>
<td>Row 3:Cell 4</td>
</tr>
</table>

Parts of a Table <table> <tr> <td>

Opening Table Tag <table> The table opens with this tag.
Opening Row Tag <tr> Each row starts with this tag. A table can have any number of rows.
Opening Cell Tag <td> Inside the above row tag contains any number of cell tags.
Closing Cell Tag </td> Each cell must be closed with this tag.
Closing Row Tag </tr> Each row must be closed with this tag.
Closing Table Tag </table> The table is closed with this tag.

Tables Tag Attributes <table>

Align
align=center
align=left
align=right
eg: <table align=center>

Width
width=300
width=80% (Can be set as a percentage of screen width.)
eg: <table width=300>

Border
border=0
Can be set between 0 and 5.
eg: <table border=1>

Background Color
bgcolor="red"
bgcolor="FF0000"
eg: <table bgcolor="red">

Cellspacing
cellspacing=0 (The number of pixels between each cell.)
Can be set from 0 - 10.
eg: <table cellspacing=0>

Cellpadding
cellpadding=0 (The number of pixels between the contents of the cell and the cell wall.)
Can be set from 0 - 10.
eg: <table cellpadding=0>

Combine Attributes
All or any of the attributes can be combined in a single opening <table> tag.
eg: <table align=center width=700 cellspacing=0 cellpadding=1 border=1>

Table Cell Attributes <td>

Align
align=center
align=left
align=right
eg: <td align=left>

Valign
Vertical Alignment of cell elements. If not specified the cell items will align to the middle of the table cell.
valign=top
valign=middle
valign=bottom
eg: <td valign=top>

Width
width=100
width=20% (If a table has 4 cells that have width expressed as a percentage then they must add up to 100%.)
eg: <td width=100>

Background Color
bgcolor="blue"
bgcolor="FF0000"
eg: <td bgcolor="blue">

Colspan
colspan=2 (This is used when a column spans more than 1 column as in Example 3.)
When a column spans more than 1 column, the column it spans into must be taken out.
eg: <td colspan=2>

Rowspan
rowspan=2 (This is used when a column spans more than 1 row as in Example 3.)
When a column spans more than 1 row, the column it spans into must be taken out.
eg: <td rowspan=2>

Combine Attributes
All or any of the attributes can be combined in any <td> tag in your table.
eg: <td align=left valign=top width=100 bgcolor=red>

HTML Tutorial     Home