HTML Tables

Tables are actually many small cells that are arranged in order. They have many rows and columns. This layout composed of rows and columns is called a table, and tables are defined by the table tag.

HTML table example:

Online example

HTML table
This example demonstrates how to create tables in an HTML document.

<table border="1" width="300">
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>

HTML Tables

Tables are defined by the <table> tag. Each table has several rows (defined by the <tr> tag), and each row is divided into several cells (defined by the <td> tag). The letter td stands for table data, which is the content of the data cell. Data cells can contain text, images, lists, paragraphs, forms, horizontal lines, and tables, etc.

Table example

<table border="1">
　　　　<tr>
　　　　　　　　<td>Row　1, Column　1</td>
　　　　　　　　<td>Row　1, Column　2</td>
　　　　</tr>
　　　　<tr>
　　　　　　　　<td>Row　2, Column　1</td>
　　　　　　　　<td>Row　2, Column　2</td>
　　　　</tr>
</table>

It is displayed in the browser as follows:

HTML tables and border attributes

If the border attribute is not defined, the table will not display borders. This can be useful sometimes, but most of the time, we want to display borders.

Use the border attribute to display a table with borders:

<table border="1">
　　　　<tr>
　　　　　　　　<td>Row　1, Column　1</td>
　　　　　　　　<td>Row　1, Column　2</td>
　　　　</tr>
</table>

HTML table headers

Table headers are defined using the <th> tag.

Most browsers will display table headers as bold centered text:

<table border="1">
　　　　<tr>
　　　　　　　　<th>Header one</<th>
　　　　　　　　<th>Header two</<th>
　　　　</tr>
　　　　<tr>
　　　　　　　　<td>Row　1, Column　1</td>
　　　　　　　　<td>Row　1, Column　2</td>
　　　　</tr>
　　　　<tr>
　　　　　　　　<td>Row　2, Column　1</td>
　　　　　　　　<td>Row　2, Column　2</td>
　　　　</tr>
</table>

It is displayed in the browser as follows:

More examples

Table without borders
This example demonstrates a table without borders.

Table headers (Heading) in the table
This example demonstrates how to display table headers.

Table with a caption
This example demonstrates a table with a caption (caption).

Table cells that span rows or columns
This example demonstrates how to define table cells that span rows or columns.

Tags within tables
This example demonstrates how to display elements within different elements.

Cell padding (Cell padding)
This example demonstrates how to use Cell padding to create space between the cell content and its border.

Cell spacing (Cell spacing)
This example demonstrates how to use Cell spacing to increase the distance between cells.

HTML table tags