HTML tables

Tables are used to display content in a structured format.

This lesson focuses on:

Creating a table
Table elements and attributes
Nesting tables

Creating a table

A table is created using the <table> tag and a closing </table> tag. A table generally consists of rows and columns, there can also be headers or captions.

Example:

<table>
<tr>
<td>Column one</td>
<td>Column two</td>
<td>Column three</td>
</tr>
</table>

Output:

Column one

Column two

Column three

It looks as if we just typed out the text without using any table at all, this is because there is no table border.

The same table, but this time with a border:

<table border="2">
<tr>
<td>Column one</td>
<td>Column two</td>
<td>Column three</td>
</tr>
</table>

Output:

Column one

Column two

Column three

Table elements and attributes

<table>

</table>

All table elements should go in between those two tags.

Table tags:

<tr>
Stands for table row. Begins a new row in the table which will hold a group of cells.
<td>
Stands for table data. Represents one cell in the table and goes between <tr> and </tr> tags.
<caption>
A caption placed over the whole table.
<th>
Stands for table heading. Represents the heading of a table.

Attributes of the <table> tag:

border
this attribute takes a numeric value denoting the thickness of the border around the table.
cellspacing
this attibute takes a numeric value denoting how much space to put between cells.
cellpadding
this attribute denotes how much padding is required between what is in the cells and the walls of the cells.

Table example:

<table border="1" cellspacing="0" cellpadding="2">
<caption>Languages</caption>
<tr>
<th align="center">Language</th>
<th align="center">Generation</th>
<th align="center">Usage</th>
</tr>
<tr>
<td align="center">HTML</td>
<td align="center">3GL</td>
<td align="center">Static web page development</td>
</tr>
<tr>
<td align="center">C++</td>
<td align="center">3GL</td>
<td align="center">Software development</td>
</tr>
<tr>
<td align="center">Javascript</td>
<td align="center">3Gl</td>
<td align="center">Dynamic web page development</td>
</tr>
<tr>
<td align="center">C</td>
<td align="center">3GL</td>
<td align="center">Software development</td>
</tr>
</table>

Output:

Languages
Language	Generation	Usage
HTML	3GL	Static web page development
C++	3GL	Software development
Javascript	3Gl	Dynamic web page development
C	3GL	Software development

Nesting tables

It is possible to include anything inside tables, including other tables. Including a table within a table gives you extra control over your page's layout.

An example of a nested table:

<table border="2" cellspacing="0" cellpadding="5">
<tr>
<td>
<!--first inner table begins here-->
<table border="2" cellspacing="0" cellpadding="5">
<tr>
<td>Table 1, Cell 1</td>
<td>Table 1, Cell 2</td>
</tr>
</table>
<!--first inner table ends here-->
</td>
</tr>
<tr>
<td>
<!--second inner table begins here-->
<table border="2" cellspacing="0" cellpadding="5">
<tr>
<td>Table 2, Cell 1</td>
<td>Table 2, Cell 2</td>
</tr>
</table>
<!--second inner table ends here-->
</td>
</tr>
</table>

Output:

Table 1, Cell 1

Table 1, Cell 2

Table 2, Cell 1

Table 2, Cell 2

Examples

A basic table
This example demonstrates creating a basic table.

Cellpadding
This example demonstrates setting the cellpadding of a table.

Cellspacing
This example demonstrates setting the cellspacing of a table.

Cell background
This example demonstrates changing the background color of cells in a table.

See more table examples