HTML Tables

You can create tables using HTML.

Example

Table
This example demonstrates how to create tables in an HTML document.
Table borders
This example demonstrates various types of table borders.

(More examples can be found at the bottom of this page)

Table

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, that is, the content of the data cell. Data cells can contain text, images, lists, paragraphs, forms, horizontal lines, tables, and so on.

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

It is displayed in the browser as follows:

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

Table and border attribute

If the border attribute is not defined, the table will not display a border. Sometimes this is useful, but most of the time, we want to display the border.

Use the border attribute to display a table with a border:

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

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>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

It is displayed in the browser as follows:

Heading Another Heading
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

Empty cells in the table

In some browsers, the display of table cells without content is not very good. If a cell is empty (without content), the browser may not be able to display the border of this cell.

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td></td>
<td>row 2, cell 2</td>
</tr>
</table>

The browser may display it as follows:

Empty cells in the table

Note:The border of this empty cell is not displayed. To avoid this, add a space placeholder in the empty cell to display the border.

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td> </td>
<td>row 2, cell 2</td>
</tr>
</table>

It is displayed in the browser as follows:

row 1, cell 1 row 1, cell 2
　 row 2, cell 2

More examples

Table without border
This example demonstrates a table without a border.
Table header (Heading) in the table
This example demonstrates how to display the table header.
Empty cells
This example demonstrates how to handle empty cells with " ".
Table with title
This example demonstrates a table with a title (caption).
Table cells that span rows or columns
This example demonstrates how to define table cells that span rows or columns.
Tags within the table
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.
Add background color or background image to the table
This example demonstrates how to add a background to the table.
Add background color or background image to table cells
This example demonstrates how to add a background to one or more table cells.
Align content within table cells
This example demonstrates how to use the "align" attribute to align the cell content to create an attractive table.
Frame (frame) attribute
This example demonstrates how to use the "frame" attribute to control the border around the table.

Table Tag

Table Description
<table> Define the table
<caption> Define the table title.
<th> Define the header of the table.
<tr> Define the row of the table.
<td> Define the table cell.
<thead> Define the header of the table.
<tbody> Define the body of the table.
<tfoot> Define the footer of the table.
<col> Define attributes used for table columns.
<colgroup> Define a group of table columns.