What is HTML Table ?
The HTML tables enable web authors to arrange information such as text, pictures, links, etc. into cell rows and columns.
HTML tables are created with the <table> tag used for creating table rows with the <tr> tag and <td> tag used for creating data cells. The items in <td> are regular and default to the left.
Syntax:
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr><td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Basic HTML Table</h2>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Rohit</td>
<td>Negi</td>
<td>30</td>
</tr>
<tr>
<td>Mohit</td>
<td>Rawat</td>
<td>25</td>
</tr>
<tr>
<td>Anjali</td>
<td>Bisht</td>
<td>20</td>
</tr>
</table>
</body>
</html>
Output:
Basic HTML Table
| Firstname | Lastname | Age |
|---|---|---|
| Rohit | Negi | 30 |
| Mohit | Rawat | 25 |
| Anjali | Bisht | 20 |
Note: The elements < td > are the table's data containers. They may include all kinds of HTML elements, text, images, lists, tables, etc.
HTML Table Border
If the border of the table is not specified, the border will appear without Border.
The CSS border property is used to set a border:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Bordered HTML Table</h2>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Rohit</td>
<td>Negi</td>
<td>30</td>
</tr>
<tr>
<td>Mohit</td>
<td>Rawat</td>
<td>25</td>
</tr>
<tr>
<td>Anjali</td>
<td>Bisht</td>
<td>20</td>
</tr>
</table>
</body>
</html>
Output:
Bordered HTML Table
| Firstname | Lastname | Age |
|---|---|---|
| Rohit | Negi | 30 |
| Mohit | Rawat | 25 |
| Anjali | Bisht | 20 |
HTML Table Collapsed Borders
Add the border-collapse property to CSS if we want to collapsed the border into one border.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Collapsed Borders HTML Table</h2>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Rohit</td>
<td>Negi</td>
<td>30</td>
</tr>
<tr>
<td>Mohit</td>
<td>Rawat</td>
<td>25</td>
</tr>
<tr>
<td>Anjali</td>
<td>Bisht</td>
<td>20</td>
</tr>
</table>
</body>
</html>
Output:
Collapsed Borders HTML Table
| Firstname | Lastname | Age |
|---|---|---|
| Rohit | Negi | 30 |
| Mohit | Rawat | 25 |
| Anjali | Bisht | 20 |
HTML Table Cell Padding
The space between the cell content and the borders is specified by cell-padding. When a padding is not given, the table cells appear without padding.
Use the CSS padding feature to set the padding:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
</style>
</head>
<body>
<h2>Cellpadding HTML Table</h2>
<p>Cell padding sets the space between the content
of a cell and its boundaries.</p>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Rohit</td>
<td>Negi</td>
<td>30</td>
</tr>
<tr>
<td>Mohit</td>
<td>Rawat</td>
<td>25</td>
</tr>
<tr>
<td>Anjali</td>
<td>Bisht</td>
<td>20</td>
</tr>
</table>
</body>
</html>
Output:
Cellpadding HTML Table
Cell padding sets the space between the content of a cell and its boundaries.
| Firstname | Lastname | Age |
|---|---|---|
| Rohit | Negi | 30 |
| Mohit | Rawat | 25 |
| Anjali | Bisht | 20 |
HTML Table Left Aalign Headings
The tables are bold and centered by default. Use the text-aligned CSS property to align the table headings to the left:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
th {
text-align: left;
}
</style>
</head>
<body>
<h2>Left Align Headings HTML Table</h2>
<p>Use the CSS text align property to align the table headings to the left.</p>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Rohit</td>
<td>Negi</td>
<td>30</td>
</tr>
<tr>
<td>Mohit</td>
<td>Rawat</td>
<td>25</td>
</tr>
<tr>
<td>Anjali</td>
<td>Bisht</td>
<td>20</td>
</tr>
</table>
</body>
</html>
Output:
Cellpadding HTML Table
Cell padding sets the space between the content of a cell and its boundaries.
| Firstname | Lastname | Age |
|---|---|---|
| Rohit | Negi | 30 |
| Mohit | Rawat | 25 |
| Anjali | Bisht | 20 |
HTML Table Border Spacing
The space between cells is indicated by the border spacing. Use the CSS border-spacing property to set the border distance of spacing for table:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
table {
border-spacing: 15px;
}
</style>
</head>
<body>
<h2>Border Spacing</h2>
<p>The space between the cells is specifiable at the border.</p>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Rohit</td>
<td>Negi</td>
<td>30</td>
</tr>
<tr>
<td>Mohit</td>
<td>Rawat</td>
<td>25</td>
</tr>
<tr>
<td>Anjali</td>
<td>Bisht</td>
<td>20</td>
</tr>
</table>
</body>
</html>
Output:
Border Spacing HTML Table
The space between the cells is specifiable at the border.
| Firstname | Lastname | Age |
|---|---|---|
| Rohit | Negi | 30 |
| Mohit | Rawat | 25 |
| Anjali | Bisht | 20 |
HTML Table Cells that Span Many Columns
Use the colspan attribute to make a cell span of more than one column:
<table style="width:100%">
<tr>
<th>State</th>
<th colspan="2">Country</th>
</tr>
<tr>
<td>Uttarakahnd</td>
<td>Bharat</td>
<td>55577855</td>
</tr>
</table>
Example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Cell that spans two columns</h2>
<p>Use the colspan attribute to make a cell span of more than one column..</p>
<table style="width:100%">
<tr>
<th>State</th>
<th colspan="2">Country</th>
</tr>
<tr>
<td>Uttarakhand</td>
<td>Bharat</td>
<td>55577855</td>
</tr>
</table>
</body>
</html>
Output:
Cell that spans two columns
Use the colspan attribute to make a cell span of more than one column..
| State | Country | |
|---|---|---|
| Uttarakhand | Bharat | 55577855 |
HTML Table Cells that Span Many Rows
Use the rowspan attribute to make a cell span of more than one row:
<table style="width:100%">
<tr>
<th>Country</th>
<td>State</td>
</tr>
<tr>
<th rowspan="2">Bharat (India)</th>
<td>Uttarakhand</td>
</tr>
<tr>
<td>Delhi</td>
</tr>
</table>
Example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Cell that spans two rows</h2>
<p>To make a cell span more than one row, use the rowspan attribute.</p>
<table style="width:100%">
<tr>
<th>Country</th>
<td>Sate</td>
</tr>
<tr>
<th rowspan="2">Bharat (India)</th>
<td>Uttarakhand</td>
</tr>
<tr>
<td>Delhi</td>
</tr>
</table>
</body>
</html>
Output
Cell that spans two rows
To make a cell span more than one row, use the rowspan attribute.
| Country | Sate |
|---|---|
| Bharat (India) | Uttarakhand |
| Delhi |
HTML Table Adding a Caption
To add a caption to a table, use the <caption> tag:
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>₹10000</td>
</tr>
<tr>
<td>February</td>
<td>₹50000</td>
</tr>
</table>
Example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Table Caption</h2>
<p>To add a caption to a table, use the caption tag.</p>
<table style="width:100%">
<caption>Monthly Savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>₹10000</td>
</tr>
<tr>
<td>February</td>
<td>₹50000</td>
</tr>
</table>
</body>
</html>
Output:
Table Caption
To add a caption to a table, use the caption tag.
| Month | Savings |
|---|---|
| January | ₹10000 |
| February | ₹50000 |
Note: The <caption> tag must be inserted immediately after the <table> tag.
HTML Table Backgrounds
We can use one of the two ways to set the table background
Attribute background-color − For whole table or only one cell, we can set background color.
For Example:
<!DOCTYPE html>
<html>
<head>
<style>
table {
width:100%;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
text-align: left;
}
table#t1 tr:nth-child(even) {
background-color: #eee;
}
table#t1 tr:nth-child(odd) {
background-color: #fff;
}
table#t1 th {
background-color: black;
color: white;
}
</style>
</head>
<body>
<h2>Styling Tables</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Rohit</td>
<td>Negi</td>
<td>30</td>
</tr>
<tr>
<td>Mohit</td>
<td>Rawat</td>
<td>25</td>
</tr>
<tr>
<td>Anjali</td>
<td>Bisht</td>
<td>20</td>
</tr>
</table>
<br>
<table id="t1">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Rohit</td>
<td>Negi</td>
<td>30</td>
</tr>
<tr>
<td>Mohit</td>
<td>Rawat</td>
<td>25</td>
</tr>
<tr>
<td>Anjali</td>
<td>Bisht</td>
<td>20</td>
</tr>
</table>
</body>
</html>
Output:
Styling Tables
| Firstname | Lastname | Age |
|---|---|---|
| Rohit | Negi | 30 |
| Mohit | Rawat | 25 |
| Anjali | Bisht | 20 |
| Firstname | Lastname | Age |
|---|---|---|
| Rohit | Negi | 30 |
| Mohit | Rawat | 25 |
| Anjali | Bisht | 20 |