Following is a simple table. It has a border, table headings, and a few rows, each of which has two columns. Tables are started with the <table> opening tag and closed with the </table> tag. The opening tag can specify various attributes. This one uses the border attribute; it sets the border to a width of 1 using border=“1”.
The <th> tag introduces a table heading. Table headings are bold and centered on the table cell. The <tr>... </tr> element is a table row. Table rows contain table cells, which are created with the <td>... </td> element.
| Country | Population Estimate |
|---|---|
| People's Republic of China | 1,337,960,000 |
| India | 1,181,854,000 |
| United States | 309,449,000 |
| Indonesia | 231,369,500 |
In the table above, the numbers are not lined up on the right hand side,
which is how numbers are supposed to be written. To align the numbers we need
to tell the browser to line up the cell contents on the right. The correct way
to do this is to modify the "text-align" style property of the table data tag.
In this table, each table data tag looks like:
<td style="text-align:right">
The table below also has a caption, created with the <caption> tag, and a thicker border.
| Country | Population Estimate |
|---|---|
| People's Republic of China | 1,337,960,000 |
| India | 1,181,854,000 |
| United States | 309,449,000 |
| Indonesia | 231,369,500 |