HTML Tables
In this tutorial you will learn how to display tabular data using HTML tables.
Creating Tables in HTML
HTML table allows you to arrange data into rows and columns. They are commonly used to display tabular data like product listings, customer’s details, financial reports, and so on.
You can create a table using the <table> element. Inside the <table> element, you can use the <tr> elements to create rows, and to create columns inside a row you can use the <td> elements. You can also define a cell as a header for a group of table cells using the <th> element.
The following example demonstrates the most basic structure of a table.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Creating Tables in HTML</title>
</head>
<body>
<h2>HTML Table (Default Style)</h2>
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Peter Parker</td>
<td>16</td>
</tr>
<tr>
<td>2</td>
<td>Clark Kent</td>
<td>34</td>
</tr>
<tr>
<td>3</td>
<td>Harry Potter</td>
<td>11</td>
</tr>
</table>
</body>
</html
Tables do not have any borders by default. You can use the CSS border property to add borders to the tables. Also, table cells are sized just large enough to fit the contents by default. To add more space around the content in the table cells you can use the CSS padding property.
The following style rules add a 1-pixel border to the table and 10-pixels of padding to its cells.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Adding Borders and Paddings to HTML Tables</title>
<style>
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<h2>Table with Separated Borders</h2>
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Peter Parker</td>
<td>16</td>
</tr>
<tr>
<td>2</td>
<td>Clark Kent</td>
<td>34</td>
</tr>
<tr>
<td>3</td>
<td>Harry Potter</td>
<td>11</td>
</tr>
</table>
</body>
</html
By default, borders around the table and their cells are separated from each other. But you can collapse them into one by using the border-collapse property on the <table> element.
Also, text inside the <th> elements are displayed in bold font, aligned horizontally center in the cell by default. To change the default alignment you can use the CSS text-align property.
The following style rules collapse the table borders and align the table header text to left.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Table with Collapsed Borders</title>
<style>
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
}
th {
text-align: left;
}
</style>
</head>
<body>
<h2>Table with Collapsed Borders</h2>
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Peter Parker</td>
<td>16</td>
</tr>
<tr>
<td>2</td>
<td>Clark Kent</td>
<td>34</td>
</tr>
<tr>
<td>3</td>
<td>Harry Potter</td>
<td>11</td>
</tr>
</table>
<p><strong>Note:</strong> See the tutorial on <a href="/css-tutorial/css-tables.php" target="_top">CSS tables</a> to learn more about collapsing table borders.</p>
</body>
</html
Note: Most of the <table> element’s attribute such as
border,cellpadding,cellspacing,width,align, etc. for styling table appearances in earlier versions has been dropped in HTML5, so avoid using them. Use CSS to style HTML tables instead.
Spanning Multiple Rows and Columns
Spanning allow you to extend table rows and columns across multiple other rows and columns.
Normally, a table cell cannot pass over into the space below or above another table cell. But, you can use the rowspan or colspan attributes to span multiple rows or columns in a table.
Let’s try out the following example to understand how colspan basically works:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Span Multiple Columns in an HTML Table</title>
<style>
table {
width: 300px;
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<h2>Spanning Columns</h2>
<table>
<tr>
<th>Name</th>
<th colspan="2">Phone</th>
</tr>
<tr>
<td>John Carter</td>
<td>5550192</td>
<td>5550152</td>
</tr>
</table>
</body>
</html
Similarly, you can use the rowspan attribute to create a cell that spans more than one row. Let’s try out an example to understand how row spanning basically works:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Span Multiple Rows in an HTML Table</title>
<style>
table {
width: 300px;
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<h2>Spanning Rows</h2>
<table>
<tr>
<th>Name:</th>
<td>John Carter</td>
</tr>
<tr>
<th rowspan="2">Phone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
</body>
</html
Adding Captions to Tables
You can specify a caption (or title) for your tables using the <caption> element.
The <caption> element must be placed directly after the opening <table> tag. By default, caption appears at the top of the table, but you can change its position using the CSS caption-side property.
The following example shows how to use this element in a table.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Adding a Caption to the HTML Table</title>
<style>
table {
width: 300px;
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
}
table.secondary caption {
caption-side: bottom;
}
</style>
</head>
<body>
<h2>Table with Caption at the Top</h2>
<table>
<caption>Users Info</caption>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Peter Parker</td>
<td>16</td>
</tr>
<tr>
<td>2</td>
<td>Clark Kent</td>
<td>34</td>
</tr>
</table>
<h2>Table with Caption at the Bottom</h2>
<table class="secondary">
<caption>Users Info</caption>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Peter Parker</td>
<td>16</td>
</tr>
<tr>
<td>2</td>
<td>Clark Kent</td>
<td>34</td>
</tr>
</table>
</body>
</html
Defining a Table Header, Body, and Footer
HTML provides a series of tags , , and that helps you to create more structured table, by defining header, body and footer regions, respectively.
The following example demonstrates the use of these elements.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Table with a Header, Footer and Body</title>
<style>
table {
width: 300px;
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
text-align: left;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Items</th>
<th>Expenditure</th>
</tr>
</thead>
<tbody>
<tr>
<td>Stationary</td>
<td>2,000</td>
</tr>
<tr>
<td>Furniture</td>
<td>10,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total</th>
<td>12,000</td>
</tr>
</tfoot>
</table>
</body>
</html
Note: In HTML5, the
<tfoot>element can be placed either before or after the<tbody>and<tr>elements, but must appear after any<caption>,<colgroup>, and<thead>elements.
Tip: Do not use tables for creating web page layouts. Table layouts are slower at rendering, and very difficult to maintain. It should be used only to display tabular data.