Example
A simple HTML table, containing two columns and two rows
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>The table element</h1>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
The table element
| Month | Savings |
|---|---|
| January | $100 |
| February | $80 |
Definition and Usage
The <table> tag characterizes a HTML table.
A HTML table comprises of one <table> component and at least one <tr>, <th>, and <td> components.
The <tr> component characterizes a table line, the <th> component characterizes a table header, and the <td> component characterizes a table cell.
A HTML table may likewise incorporate <caption>, <colgroup>, <thead>, <tfoot>, and <tbody> components.
More Examples
How to add collapsed borders to a table (with CSS):
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h1>Table with Collapsed Borders</h1>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
The table element
| Month | Savings |
|---|---|
| January | $100 |
| February | $80 |
How to define table cells that span more than one row or one column:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Table Headers</h1>
<h2>Horizontal headers:</h2>
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
<tr>
<td>John Doe</td>
<td>john.doe@example.com</td>
<td>123-45-678</td>
</tr>
</table>
<h2>Vertical headers:</h2>
<table>
<tr>
<th>Name:</th>
<td>John Doe</td>
</tr>
<tr>
<th>Email:</th>
<td>john.doe@example.com</td>
</tr>
<tr>
<th>Phone:</th>
<td>123-45-678</td>
</tr>
</table>
</body>
</html>
Table Headers
Horizontal headers:
| Name | Phone | |
|---|---|---|
| John Doe | john.doe@example.com | 123-45-678 |
Vertical headers:
| Name: | John Doe |
|---|---|
| Email: | john.doe@example.com |
| Phone: | 123-45-678 |
