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 row can 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/cell is defined with the <td> tag.

<!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>

Output

HTML Table Tag Examples
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.

<!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.


<!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.

<!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'

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.


<!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>

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.


<!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 colspan="2"> Mobile </th>
</tr>
<tr>
<td> Bill Gates </td>
<td> 9998887776 </td>
<td> 9998887775 </td>
</tr>
</table>
</body>
</html>

Output

HTML Table Colspan Attribute Example
Person_Name
Mobile
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 align attribute with values - left/right/top/bottom.
  • The default alignment is top.

<!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>

Output

HTML Table Caption Attribute Example
Monthly savings
Month Savings
January $100
February $50

Browser Support

Element
Microsoft Edge browser.png Edge
Chrome browser.png Chrome
Firefox browser.png Firefox
Opera browser.png Opera
safari browser.png Safari
<table>
Yes
Yes
Yes
Yes
Yes









Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.