Learn how to build and design websites with our tutorials.

HTML and HTML5 Tables Tutorial

View Tutorial Contents


Introduction to HTML Tables

HTML tables are meant to be used to present tabular data, much like a spreadsheet. HTML tables are made up of table rows and columns. Tables are defined with the <table> tag.

Tables are divided into rows with the <tr> tag and table rows are further divided into table data cells with the <td> tag. Table data cells are the data containers and can contain other HTML elements such as text, images, lists, forms, other tables, etc.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

</head>
<body>

<table>
	<tr>
		<td>Row 1, cell 1</td>
		<td>Row 1, cell 2</td>
		<td>Row 1, cell 3</td>
	</tr>
	<tr>
		<td>Row 2, cell 1</td>
		<td>Row 2, cell 2</td>
		<td>Row 2, cell 3</td>
	</tr>
	<tr>
		<td>Row 3, cell 1</td>
		<td>Row 3, cell 2</td>
		<td>Row 3, cell 3</td>
	</tr>
	<tr>
		<td>Row 4, cell 1</td>
		<td>Row 4, cell 2</td>
		<td>Row 4, cell 3</td>
	</tr>
</table>

</body>
</html> 

Row 1, cell 1 Row 1, cell 2 Row 1, cell 3
Row 2, cell 1 Row 2, cell 2 Row 2, cell 3
Row 3, cell 1 Row 3, cell 2 Row 3, cell 3
Row 4, cell 1 Row 4, cell 2 Row 4, cell 3

Table Borders

A border can be added to a table using either the table border attribute or through the use of CSS, however, it is always recommended that you use CSS to add styles to HTML tables.


The <th> Tag

A table cell can also be a heading instead with the <th> tag.

Heading 1 Heading 2 Heading 3
Row 1, cell 1 Row 1, cell 2 Row 1, cell 3
Row 2, cell 1 Row 2, cell 2 Row 2, cell 3
Row 3, cell 1 Row 3, cell 2 Row 3, cell 3
Row 4, cell 1 Row 4, cell 2 Row 4, cell 3

Table Cells that Span Multiple Columns

The colspan attribute is used to make a data cell span more than one column.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
table, table tr, table td, table th{
border: 1px solid black;
}
</style>
</head>
<body>

<table>
	<tr>
		<th>Heading 1</th>
		<th colspan="2">Heading 2</th>
	</tr>
	<tr>
		<td>Row 1, cell 1</td>
		<td>Row 1, cell 2</td>
		<td>Row 1, cell 3</td>
	</tr>
</table>

</body>
</html> 

Heading 1 Heading 2
Row 1, cell 1 Row 1, cell 2 Row 1, cell 3

Table Cells that Span Multiple Rows

The rowspan attribute is used to make a data cell span more than one row.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
table, table tr, table td, table th{
border: 1px solid black;
}
</style>
</head>
<body>

<table>
	<tr>
		<th>Heading 1</th>
		<th>Heading 2</th>
	</tr>
	<tr>
		<td rowspan="2">Row 1, cell 1</td>
		<td>Row 1, cell 2</td>
	</tr>
	<tr>
		<td>Row 2, cell 2</td>
	</tr>
</table>

</body>
</html> 

Heading 1 Heading 2
Row 1, cell 1 Row 1, cell 2
Row 2, cell 2

HTML Tables with Captions

The <caption> tag is used to add a caption (a title) to a table.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

</head>
<body>

<table>
	<caption>This is a caption</caption>
	<tr>
		<th>Heading 1</th>
		<th>Heading 2</th>
		<th>Heading 3</th>
	</tr>
	<tr>
		<td>Row 1, cell 1</td>
		<td>Row 1, cell 2</td>
		<td>Row 1, cell 3</td>
	</tr>
	<tr>
		<td>Row 2, cell 1</td>
		<td>Row 2, cell 2</td>
		<td>Row 2, cell 3</td>
	</tr>
</table>

</body>
</html> 

This is a caption
Heading 1 Heading 2 Heading 3
Row 1, cell 1 Row 1, cell 2 Row 1, cell 3
Row 2, cell 1 Row 2, cell 2 Row 2, cell 3

<thead>, <tbody> and <tfoot> Elements

The <thead>, <tbody> and <tfoot> elements are used in conjunction with each other to specify each part of an HTML table (header, body and footer) to web browsers. All three tags must be contained within an HTML table.

The <thead> tag is used to group the header content within an HTML table. It must come after any <caption> and <colgroup> elements if they are included and before any <tbody>, <tfoot>, and <tr> elements.

The <tbody> tag is used to group the body content within an HTML table. The <tbody> element must contain one or more <tr> tags.

The <tfoot> tag is used to group footer content within an HTML table. It must come after any <caption> and <colgroup> elements if they are included and before any <tbody> and <tr> elements. The reason for having the <tfoot> come before the <tbody> within an HTML table is for printing purposes. It allows the web browser to have the option to specify that the table printed with the table header and table footer at the top or bottom of a printed page.

The <thead> and <tfooter> tags can be used only once within an HTML table.

Web browsers can use the <thead>, <tbody> and >foot> elements to enable scrolling of the <body> element within an HTML table.

The code example below contains an HTML table with <thead>, <tbody> and <tfoot> elements.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

</head>
<body>

<table>
	<caption>This is a caption</caption>
	<thead>
		<tr>
			<th>Heading 1</th>
			<th>Heading 2</th>
		</tr>
	</thread>
	<tfoot>
		<tr>
			<td>Footer 1</td>
			<td>Footer 2</td>
		</tr>
	</tfoot>
	<tbody>
		<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>
	</tbody>
</table>

</body>
</html> 

The code above outputs the HTML table below.

This is a caption
Heading 1 Heading 2
Footer 1 Footer 2
Row 1, cell 1 Row 1, cell 2
Row 2, cell 1 Row 2, cell 2