To define a table we need to use three main tags: <table>, <tr> and <td>.
<table> defines the limits of a table, within it you can also specify some table
characteristics that we will discuss later. <tr> defines each table row. <td> defines
the data within the table rows. Each table row can have several <td>. Lets see an example:
<table>
<tr>
<td>Canada</td>
<td>Ontario</td>
</tr>
<tr>
<td>USA</td>
<td>Washington</td>
</tr>
<tr>
<td>England</td>
<td>London</td>
</tr>
</table>
The result is:
Canada Ontario
USA Washington
England London
<table> attributes:
<table> tag has many properties, here we are going to discuss the main ones.
The border attribute lets you define the width of the table border.
To add a border to the above table we will have to modify the table tag this way
<table
border=2>
The table below shows the result
| Canada | Ontario |
| USA | Washington |
| England | London |
The bgcolor attribute let us modify the background color. For example:
<table
border=2 bgcolor="yellow">
Will result in
| Canada | Ontario |
| USA | Washington |
| England | London |
Use width attribute to change the width of the table
<table
border=2 bgcolor="yellow" width=100%>
| Canada | Ontario |
| USA | Washington |
| England | London |
Another example will be
<table
border=2 bgcolor="yellow" width=30%>
| Canada | Ontario |
| USA | Washington |
| England | London |
Cellpadding will modify the space between the text and the cell border
<table
border=2 bgcolor="yellow" cellpadding=10>
| Canada | Ontario |
| USA | Washington |
| England | London |
The table below shows a complete list of <table> attributes:
Attribute | Description |
Border | Size of table border |
Cellpadding | Space between cell text and its border |
Cellspacing | Space between cells |
Width | Width of the table |
Bgcolor | Background color of the table |
Background | Background image of the table |
Align | Alignment of table (left, center, right) |
hspace | Horizontal space between table and text |
vspace | Vertical space between table and text |
Height | Height of the table |
Frame | Parts in the outside border that are available |
rules | sets if there will be internal borders or not |
Bordercolor | color of the border |
Bordercolorlight | color of the "light" part of the table border |
Bordercolordark | color of the "dark" part of the table border |
summary | A summary of the table |