HTML Tables

Table of two rows and three columns
 
<table border="1">
<tr>
<td>USA </td>
<td>Canada </td>
<td>UK </td>
<tr>
<td>UK </td>
<td>Canada </td>
<td>USA </td>
</table>
 
The entire table is contained between <table> and </table> tags

Each table row starts with a <tr> tag.

Each cell starts with a <td> tag. A cell is one column of one row.

Attributes of the <table> tag  

The <table> tag allows a number of optional attributes that specify the properties of the entire table.

• <table align="right"> positions the table at the right side of the viewer window; align="center" centers it; and align="left" places it on the left side.

• The width="50" attribute (<table width="50">) sets the width of the entire table;

• border="1" tells the browser to draw a border around the entire table. The dimension  specifies how border thick to make the border.             For example: <table border="1">

Captioning a table

To add a title to a table, place the caption text between <caption> and </caption> tags just after the <table> tag:
 
<table border="1">
<caption> Animals </caption>
<tr>
<td>Lions
<td>Elephants
<tr>
<td>Cows
<td>Tigers
</table>

You can use an align="bottom" attribute in the <caption> tag to position the caption below the table. (default => top)
 For example:
<caption align="bottom"> Animals</caption>
 
Specifying dimensions
 
<table width="50%"> 

</table>
The width attribute of a <table> tag specifies how wide the table is, relative to the size of the browser window. The above example says to make the table 1/2 the width of the window.

Posted in: HTML