HTML Table
HTML table tag is used to arrange data in tabular form row and column. There can be many columns in a row.
You can create a table using the <table> element. Inside the <table> element, you can use the <tr> elements to create rows, and to create columns inside a row you can use the <td> elements. You can also define a cell as a header for a group of table cells using the <th> element.
HTML Table Tags:
Tag Description
<table> Defines a table.
<tr> Defines a row in a table.
<th> Defines a header cell in a table.
<td> Defines a cell in a table.
<caption> Defines the table caption.
<colgroup> Group of one or more columns in a table for formatting.
<col> Column properties for each column.
<tbody> Group the body content in a table.
<thead> Group the header content in a table.
<tfooter> Group the footer content in a table.
HTML Table Example:
<!DOCTYPE> <html> <body> <table> <tr><th>FirstName</th><th>LastName</th><th>Marks</th></tr> <tr><td>Name1</td><td>Name11</td><td>60</td></tr> <tr><td>Name2</td><td>Name22</td><td>80</td></tr> <tr><td>Name3</td><td>Name33</td><td>82</td></tr> <tr><td>Name4</td><td>Name44</td><td>72</td></tr> </table> </body> </html>
OUTPUT:
Add a Border:
Use the border property of CSS to provides the border in the table.
Example:
<!DOCTYPE>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr><th>FirstName</th><th>LastName</th><th>Marks</th></tr>
<tr><td>Name1</td><td>Name11</td><td>60</td></tr>
<tr><td>Name2</td><td>Name22</td><td>80</td></tr>
<tr><td>Name3</td><td>Name33</td><td>82</td></tr>
<tr><td>Name4</td><td>Name44</td><td>72</td></tr>
</table>
</body>
</html>
OUTPUT:
Collapsed Borders:
If you want to collapse all the borders in one border by border-collapse property. It will collapse the border into one.
Example:
<!DOCTYPE>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Name1</td><td>Name11</td><td>60</td></tr>
<tr><td>Name2</td><td>Name22</td><td>80</td></tr>
<tr><td>Name3</td><td>Name33</td><td>82</td></tr>
<tr><td>Name4</td><td>Name44</td><td>72</td></tr>
</table>
</body>
</html>
OUTPUT:
Add Cell Padding:
It provides the space between the cell content and its borders.
- By cell padding attribute of table in HTML
- By padding property in CSS
Example:
<!DOCTYPE>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr><th>FirstName</th><th>LastName</th><th>Marks</th></tr>
<tr><td>Name1</td><td>Name11</td><td>90</td></tr>
<tr><td>Name2</td><td>Name22</td><td>80</td></tr>
<tr><td>Name3</td><td>Name33</td><td>72</td></tr>
<tr><td>Name4</td><td>Name44</td><td>68</td></tr>
</table>
</body>
</html>
OUTPUT:
HTML Table width:
We can provide the HTML table width using the CSS width property. It can be specified in pixels or percentages.
Example:
<!DOCTYPE html>
<html>
<head>
<title>table</title>
<style>
table{
border-collapse: collapse;
width: 100%;
}
th,td{
border: 2px solid green;
padding: 15px;
}
</style>
</head>
<body>
<table>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Age</th>
</tr>
<tr>
<td>name1</td>
<td>name2</td>
<td>name3</td>
</tr>
<tr>
<td>2 name1</td>
<td>2 name2</td>
<td>2 name3</td>
</tr>
<tr>
<td>3 name1</td>
<td>3 name2</td>
<td>3 name3</td>
</tr>
</table>
</body>
</html>
OUTPUT:
Table with colspan:
Divide one cell or row into multiple columns, and the number of columns depends on the value of colspan attribute.
Example:
<!DOCTYPE>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Mobile No.</th>
</tr>
<tr>
<td>FIrst name</td>
<td>1234567890</td>
<td>0987654321</td>
</tr>
<tr>
<th>Name</th>
<th colspan="2">Mobile No.</th>
</tr>
<tr>
<td>FIrst name</td>
<td>1234567890</td>
<td>0987654321</td>
</tr>
</table>
</body>
</html>
OUTPUT:
Table with rowspan:
Divide a cell into multiple rows. The number of divided rows will depend on row span values.
Example:
<!DOCTYPE>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr><th>Name</th><td>Name 11</td></tr>
<tr><th rowspan="2">Mobile No.</th><td>1234567890</td></tr>
<tr><td>0987654321</td></tr>
<tr><th>Name</th><td>Name 22</td></tr>
<tr><th rowspan="2">Mobile No.</th><td>1234567890</td></tr>
<tr><td>0987654321</td></tr>
</table>
</body>
</html>
OUTPUT:
Table with caption:
HTML caption is diplayed above the table.
Example:
<!DOCTYPE>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<table>
<caption>Name LIST</caption>
<tr><th>FirstName</th><th>LastName</th><th>Marks</th></tr>
<tr><td>Name1</td><td>Name11</td><td>70</td></tr>
<tr><td>Name2</td><td>Name22</td><td>60</td></tr>
<tr><td>Name3</td><td>Name33</td><td>42</td></tr>
<tr><td>Name4</td><td>Name44</td><td>62</td></tr>
</table>
</body>
</html>
OUTPUT:
HTML table even and odd cells:
Example:
<!DOCTYPE>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
table#alter tr:nth-child(even) {
background-color: #eee;
}
table#alter tr:nth-child(odd) {
background-color: #fff;
}
table#alter th {
color: white;
background-color: gray;
}
</style>
</head>
<body>
<table id="alter">
<tr><th>FirstName</th><th>LastName</th><th>Marks</th></tr>
<tr><td>Name1</td><td>Name11</td><td>60</td></tr>
<tr><td>Name2</td><td>Name22</td><td>80</td></tr>
<tr><td>Name3</td><td>Name33</td><td>82</td></tr>
<tr><td>Name4</td><td>Name44</td><td>72</td></tr>
</table>
</body>
</html>
OUTPUT:
Note: In HTML5, the <tfoot> tag can be placed either before or after the <tbody> and <tr> elements, but must appear after any <caption>, <colgroup>, and <thead> elements.