HTML Tutorial
HTML Introduction
HTML Tutorial
HTML Tags
HTML Attributes
HTML Formatting
HTML Heading
HTML Paragraph
HTML Anchor
HTML Image
HTML Table
HTML Fonts
HTML Lists
HTML Ordered List
HTML Unordered List
HTML Description List
HTML Forms
HTML Forms
HTML Input Types
HTML Form Attributes
HTML Tags
HTML Title
HTML Marquee Tag
HTML Code
HTML Quotes
HTML Button Tag
HTML BR Tag
HTML HR Tag
HTML Bold Tag
HTML 5
HTML5 Tutorial
HTML Meter
HTML Article Tag
HTML Footer Tag
HTML Figure Tag
HTML Dialog Tag
HTML 5 Advance
HTML Doctype
HTML Meta Tags
HTML Styles
HTML Scripts
HTML Progress Tag
HTML Symbols
HTML Media
HTML Video Tag
HTML Audio Tag
HTML Youtube Video
HTML 5 Form
HTML Datalist Tag
HTML keygen Tag
HTML output Tag
HTML 5 Graphics
HTML Canvas
HTML SVG
Reading Section
Interview Questions
HTML 5 Quiz
Advertisement
Advertisement
HTML Table
An HTML table is defined with the<table> tag.
A table is used to display data in tabular form (rows * column).
- A table
rowcan be defined with the<tr>tag and a table header with the<th>tag. By default, table headings are bold and centered. - A table
data/cellis defined with the<td>tag.
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<HTML>
<head>
<meta charset="UTF-8">
<title> HTML Table </title>
</head>
<body>
<table>
<tr>
<th> Name </th>
<th> Salary </th>
<th> Age </th>
</tr>
<tr>
<td> Anshuman </td>
<td> Rs. 2,00,000 </td>
<td> 25 </td>
</tr>
<tr> <td> Kuldeep </td>
<td> Rs. 5,00,000 </td>
<td> 22 </td>
</tr>
</table> </body>
</html>
<html lang="en">
<HTML>
<head>
<meta charset="UTF-8">
<title> HTML Table </title>
</head>
<body>
<table>
<tr>
<th> Name </th>
<th> Salary </th>
<th> Age </th>
</tr>
<tr>
<td> Anshuman </td>
<td> Rs. 2,00,000 </td>
<td> 25 </td>
</tr>
<tr> <td> Kuldeep </td>
<td> Rs. 5,00,000 </td>
<td> 22 </td>
</tr>
</table> </body>
</html>
Output
| Name | Salary | Age |
|---|---|---|
| Anshuman | Rs. 2,00,000 | 25 |
| Kuldeep | Rs. 5,00,000 | 22 |
Table Attributes
The 'border' Attribute
There are two ways to specify border for HTML tables.
- By
border attribute of table in HTML.
- By
border property in CSS.
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Table Border Attribute </title>
</head>
<body>
<table width="100%">
<tr>
<th> Name </th>
<th> Salary </th>
<th> Age </th>
</tr>
<tr>
<td> Anshuman </td>
<td> Rs. 2,00,000 </td>
<td> 25 </td>
</tr>
<tr>
<td> Kuldeep </td>
<td> Rs. 5,00,000 </td>
<td> 22 </td>
</tr>
</table>
</body>
</html>
Output
HTML Table Border Attribute
Name
Salary
Age
Anshuman
Rs. 2,00,000
25
Kuldeep
Rs. 5,00,000
22
The width attribute is used to sizing the table.
Table CSS Border
You can use CSS Style to make table more interactive.
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Table Border Style </title>
<style>
table, th, td {
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<table width="100%">
<tr>
<th> Name </th>
<th> Salary </th>
<th> Age </th>
</tr>
<tr>
<td> Anshuman </td>
<td> Rs. 2,00,000 </td>
<td> 25 </td>
</tr>
<tr>
<td> Kuldeep </td>
<td> Rs. 5,00,000 </td>
<td> 22 </td>
</tr>
</table>
</body>
</html>
Output
HTML Table Border Style
Name
Salary
Age
Anshuman
Rs. 2,00,000
25
Kuldeep
Rs. 5,00,000
22
The 'Cellpadding' and 'Cellspacing' Attribute
These "cellpadding" and "Cellspacing" attributes are used to adjust the white spaces in your table cells.
- The
cellpadding represents the distance between cell borders and the content within a cell.
- The
cellspacing attribute defines the width of the border.
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Table Cellpadding Attribute </title>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="5" style="width:100%">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Peter</td>
<td>5000</td>
</tr>
<tr>
<td>John</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
Output
HTML Table Cellpadding Attribute
Name Salary
Peter
5000
John
7000
The 'Colspan' and 'Rowspan' Attribute
The 'Rowspan'
border attribute of table in HTML.border property in CSS.
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Table Border Attribute </title>
</head>
<body>
<table
<tr>
<th> Name </th>
<th> Salary </th>
<th> Age </th>
</tr>
<tr>
<td> Anshuman </td>
<td> Rs. 2,00,000 </td>
<td> 25 </td>
</tr>
<tr>
<td> Kuldeep </td>
<td> Rs. 5,00,000 </td>
<td> 22 </td>
</tr>
</table>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Table Border Attribute </title>
</head>
<body>
<table
width="100%"> <tr>
<th> Name </th>
<th> Salary </th>
<th> Age </th>
</tr>
<tr>
<td> Anshuman </td>
<td> Rs. 2,00,000 </td>
<td> 25 </td>
</tr>
<tr>
<td> Kuldeep </td>
<td> Rs. 5,00,000 </td>
<td> 22 </td>
</tr>
</table>
</body>
</html>
| Name | Salary | Age |
|---|---|---|
| Anshuman | Rs. 2,00,000 | 25 |
| Kuldeep | Rs. 5,00,000 | 22 |
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Table Border Style </title>
<style>
table, th, td {
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<table width="100%">
<tr>
<th> Name </th>
<th> Salary </th>
<th> Age </th>
</tr>
<tr>
<td> Anshuman </td>
<td> Rs. 2,00,000 </td>
<td> 25 </td>
</tr>
<tr>
<td> Kuldeep </td>
<td> Rs. 5,00,000 </td>
<td> 22 </td>
</tr>
</table>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Table Border Style </title>
<style>
table, th, td {
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<table width="100%">
<tr>
<th> Name </th>
<th> Salary </th>
<th> Age </th>
</tr>
<tr>
<td> Anshuman </td>
<td> Rs. 2,00,000 </td>
<td> 25 </td>
</tr>
<tr>
<td> Kuldeep </td>
<td> Rs. 5,00,000 </td>
<td> 22 </td>
</tr>
</table>
</body>
</html>
Output
| Name | Salary | Age |
|---|---|---|
| Anshuman | Rs. 2,00,000 | 25 |
| Kuldeep | Rs. 5,00,000 | 22 |
The 'Cellpadding' and 'Cellspacing' Attribute
These"cellpadding" and "Cellspacing" attributes are used to adjust the white spaces in your table cells.
- The
cellpaddingrepresents the distance between cell borders and the content within a cell. - The
cellspacingattribute defines the width of the border.
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Table Cellpadding Attribute </title>
</head>
<body>
<table border="1"
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Peter</td>
<td>5000</td>
</tr>
<tr>
<td>John</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Table Cellpadding Attribute </title>
</head>
<body>
<table border="1"
cellpadding="5" cellspacing="5" style="width:100%"><tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Peter</td>
<td>5000</td>
</tr>
<tr>
<td>John</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
Output
| Peter | 5000 |
| John | 7000 |
The 'Colspan' and 'Rowspan' Attribute
The 'Rowspan'
The rowspan attribute is used to merge two or more rows together to form a single row. A single row occupies space of the number of merged rows.
Example
Try this code »
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>9998887776</td>
</tr>
<tr>
<td>9998887776</td>
</tr>
</table>
</body>
</html>
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>9998887776</td>
</tr>
<tr>
<td>9998887776</td>
</tr>
</table>
</body>
</html>
Output
| Name: | Bill Gates |
|---|---|
| Telephone: | 9998887776 |
| 9998887776 |
The 'Colspan'
The colspan attribute is used to merge two or more columns into a single column. single column occupies space of the number of merged columns.
Example
Try this code »
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Table Colspan Attribute </title>
</head>
<body>
<table border="1" width="80%">
<tr>
<th> Person_Name </th>
<th
</tr>
<tr>
<td> Bill Gates </td>
<td> 9998887776 </td>
<td> 9998887775 </td>
</tr>
</table>
</body>
</html>
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Table Colspan Attribute </title>
</head>
<body>
<table border="1" width="80%">
<tr>
<th> Person_Name </th>
<th
colspan="2"> Mobile </th></tr>
<tr>
<td> Bill Gates </td>
<td> 9998887776 </td>
<td> 9998887775 </td>
</tr>
</table>
</body>
</html>
Output
| Bill Gates | 9998887776 | 9998887775 |
HTML Caption
To add a caption to a table, use the<caption> tag.
- A caption can be aligned around the table by using
alignattribute with values - left/right/top/bottom. - The default alignment is top.
Example
Try this code »
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Table Caption Attribute </title>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
</body>
</html>
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Table Caption Attribute </title>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
</body>
</html>
Output
| Month | Savings |
|---|---|
| January | $100 |
| February | $50 |
Browser Support
 Edge |
 Chrome |
 Firefox |
 Opera |
 Safari |
|
|---|---|---|---|---|---|
<table> |
Recommended :