HTML Tables
The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and columns of cells. Try HTML tables examples!
In HTML, you can create tables for your website using the <table> tag in conjunction with the <tr>, <td> and <th> tags.
The HTML tables allow displaying the data (e.g. image, text, link) in columns and rows of cells. Table rows can be grouped into a head, foot, and body sections through the <thead>, <tfoot> and <tbody> elements, respectively.
In HTML5, we can place <tfoot> either before or after <tbody> tag. They must come after any <caption>, <colgroup>, and <thead> elements.
Most of the attributes of the <table> element are not used in HTML5. If you want to style the appearance of the table, you can use CSS instead.
Data tables vs. layout tables. Use tables only for tabular data — information that has a meaningful relationship between rows and columns. Don't use tables to lay out a page (positioning a sidebar, a navigation bar, etc.). Layout tables confuse screen readers and make responsive design hard. For page layout, use CSS Flexbox or Grid instead.
Syntax
The <table> tag comes in pairs. The content is written between the opening <table> and the closing </table> tags.
Example of the HTML <table> tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table, th, td {
border: 1px solid #666;
}
</style>
</head>
<body>
<table style="width:80%;">
<tr>
<th>Month</th>
<th>Date</th>
</tr>
<tr>
<td>January</td>
<td>10.01.2014</td>
</tr>
<tr>
<td>February</td>
<td>10.01.2014</td>
</tr>
</table>
</body>
</html>Result
| Month | Date |
|---|---|
| January | 10.01.2014 |
| February | 10.01.2014 |
In the given example, we use the <table> tag to create a table. Then, we use the <tr> tag to divide the table into rows. The <th> tag is used for the table header cells, where the title is written. In other words, the table row is divided into headings. The <td> tag is used for table cells where the information is written.
Grouping Rows with <thead>, <tbody>, and <tfoot>
For larger tables, you can group the rows into a header section, a body section, and a footer section using the <thead>, <tbody>, and <tfoot> elements. This makes the markup more readable, lets you style each section independently with CSS, and helps browsers repeat the header and footer when a long table is printed across several pages.
Example of grouping table rows:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table, th, td {
border: 1px solid #666;
}
</style>
</head>
<body>
<table style="width:80%;">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$180</td>
</tr>
</tfoot>
</table>
</body>
</html>Accessibility: Headers and Captions
Tables can be hard for people using screen readers to follow, because a cell on its own ("$80") is meaningless without knowing which row and column it belongs to. A few simple practices make your tables understandable to everyone.
Mark header cells with <th>. A <th> cell is announced as a header, and screen readers use it to label the data cells beneath or beside it. Using <td> for headings — or faking headers with bold <td> text — removes that relationship.
Add a scope attribute. The scope attribute tells assistive technology whether a header applies to its column or its row. Use scope="col" for column headings and scope="row" for row headings. This is especially important when a table has headers on both the top and the left side.
Example of headers with the scope attribute:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table, th, td {
border: 1px solid #666;
}
</style>
</head>
<body>
<table style="width:80%;">
<caption>Monthly savings</caption>
<tr>
<th scope="col">Month</th>
<th scope="col">Savings</th>
</tr>
<tr>
<th scope="row">January</th>
<td>$100</td>
</tr>
<tr>
<th scope="row">February</th>
<td>$80</td>
</tr>
</table>
</body>
</html>Give the table a <caption>. A <caption> is a title for the whole table. It is the first child of the <table> element and is announced before the table's contents, so a screen-reader user knows what the table is about before navigating into it. By default it renders at the top of the table; you can move it with the CSS caption-side property.
Example of a table with a <caption>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table, th, td {
border: 1px solid #666;
}
caption {
font-weight: bold;
padding: 8px;
}
</style>
</head>
<body>
<table style="width:80%;">
<caption>Delivery schedule</caption>
<tr>
<th scope="col">Month</th>
<th scope="col">Date</th>
</tr>
<tr>
<td>January</td>
<td>10.01.2014</td>
</tr>
<tr>
<td>February</td>
<td>10.02.2014</td>
</tr>
</table>
</body>
</html>Spanning Multiple Rows and Columns
It is possible to extend a cell across several other rows or columns. Normally a cell cannot reach into the space above, below, or beside another cell — but the colspan and rowspan attributes let one cell occupy the area of several.
If you want a single heading to stretch across two or more columns, use the colspan attribute on the cell with the number of columns it should cover.
Example of the HTML <table> tag with the colspan attribute:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table, th, td {
border: 1px solid #666;
}
</style>
</head>
<body>
<table style="width:80%;">
<tr>
<th colspan="2">Month and Date</th>
</tr>
<tr>
<td>January</td>
<td>10.01.2014</td>
</tr>
<tr>
<td>February</td>
<td>10.01.2014</td>
</tr>
</table>
</body>
</html>Result
| Month and Date | |
|---|---|
| January | 10.01.2014 |
| February | 10.01.2014 |
Here the single <th colspan="2"> heading sits above both the Month and Date columns.
The same can be done with rows, using the rowspan attribute. A cell with rowspan="2" extends downward into the row below it, so the next row needs one fewer cell. This is useful when one value applies to several consecutive rows.
Example of the HTML <table> tag with the rowspan attribute:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table, th, td {
border: 1px solid #666;
}
</style>
</head>
<body>
<table style="width:80%;">
<tr>
<th>Month</th>
<th>Date</th>
</tr>
<tr>
<td>January</td>
<td rowspan="2">10.01.2014</td>
</tr>
<tr>
<td>February</td>
</tr>
</table>
</body>
</html>Result
| Month | Date |
|---|---|
| January | 10.01.2014 |
| February | (shares the cell above) |
In this example, the 10.01.2014 cell uses rowspan="2", so it spans both January's and February's rows, and the February row only needs the Month cell.
Related Tags
<table>— the table container<tr>— a table row<th>— a header cell<td>— a data cell<caption>— the table's title<colgroup>— groups columns for styling