HTML Tables
HTML tables let you arrange data into rows and columns.
Example
A table of companies, contacts, and countries.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tables Intro</title>
</head>
<body>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
</body>
</html>
Define an HTML Table
A table is made of table cells arranged in rows and columns, all inside a <table> element.
Example
A simple table with a header row and two data rows.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Table</title>
</head>
<body>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
</body>
</html>
Table Cells
Each table cell is defined by a <td> and a </td> tag. "td" stands for table data, and everything between the tags is the cell's content.
Note: A cell can hold all kinds of HTML: text, images, lists, links, even other tables.
Example
A row of three data cells.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Cells</title>
</head>
<body>
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
</body>
</html>
Table Rows
Each table row starts with a <tr> tag and ends with </tr>. "tr" stands for table row. You can have as many rows as you like; just keep the number of cells the same in each row.
Note: Sometimes a row can have fewer or more cells than another; you will learn about that in a later chapter.
Example
A table with two rows.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Rows</title>
</head>
<body>
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
</body>
</html>
Table Headers
When you want a cell to be a header, use the <th> tag instead of <td>. "th" stands for table header. By default, header text is bold and centered, but you can change that with CSS.
Example
A table whose first row is made of header cells.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Headers</title>
</head>
<body>
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
</body>
</html>
HTML Table Tags
The table-related tags are: <table> (a table), <th> (a header cell), <tr> (a row), <td> (a cell), <caption> (a table caption), <colgroup> (a group of columns for formatting), <col> (column properties within a colgroup), <thead> (groups the header content), <tbody> (groups the body content), and <tfoot> (groups the footer content).