HTML Table
To display a group of data in a tabular form the HTML table tag is used. To serve this purpose the HTML <table> element is used, with <tr> tag to define the table row, <th> tag to define the table header and the <td> tag to define the table data. However, to manage the layout of the page like the header section and the footer section, the use of div tag over the table element is recommended.
HTML Table Tags:
TAG |
USES |
<table> |
To define a table. |
<tr> |
To define a row in a table. |
<th> |
To define a header cell in a table. |
<td> |
To define a cell in a table. |
<caption> |
To define the table caption. |
<colgroup> |
To specify a group of one or more columns in a table for formatting. |
<col> |
To specify column properties for each column. Used with the <colgroup> element. |
<tbody> |
To group the body content in a table. |
<thead> |
To group the header content in a table. |
<tfooter> |
To group the footer content in a table. |
Table with defined Width in HTML: Example:
<!DOCTYPE html>
<html>
<body>
<h3>Students Table</h3>
<table style="width:50%">
<tr>
<th>NAME</th>
<th>AGE</th>
<th>CITY</th>
</tr>
<tr>
<td>Tom</td>
<td>10</td>
<td>London</td>
</tr>
<tr>
<td>Jerry</td>
<td>8</td>
<td>London</td>
</tr>
<tr>
<td>Bruno</td>
<td>12</td>
<td>Wells</td>
</tr>
</table>
</body>
</html> |
<!DOCTYPE html>
<html>
<body>
<h3>Students Table</h3>
<table style="width:50%">
<tr>
<th>NAME</th>
<th>AGE</th>
<th>CITY</th>
</tr>
<tr>
<td>Tom</td>
<td>10</td>
<td>London</td>
</tr>
<tr>
<td>Jerry</td>
<td>8</td>
<td>London</td>
</tr>
<tr>
<td>Bruno</td>
<td>12</td>
<td>Wells</td>
</tr>
</table>
</body>
</html>
Output:
Students Table
Explanation: In the above example, a table is created with three header cells namely, “NAME,” “AGE”, and “CITY”. There are three rows, where each row is defined by the tr tag and the data in each row for each column is defined by the td tag. Here, the width of the table is also defined to be 50
HTML Table with Border Example 1: Using the border attribute of the HTML table.
<!DOCTYPE html>
<html>
<body>
<h3>Students Table</h3>
<table style="width:50%" border="2">
<tr>
<th>NAME</th>
<th>AGE</th>
<th>CITY</th>
</tr>
<tr>
<td>Tom</td>
<td>10</td>
<td>London</td>
</tr>
<tr>
<td>Jerry</td>
<td>8</td>
<td>London</td>
</tr>
<tr>
<td>Bruno</td>
<td>12</td>
<td>Wells</td>
</tr>
</table>
</body>
</html> |
<!DOCTYPE html>
<html>
<body>
<h3>Students Table</h3>
<table style="width:50%" border="2">
<tr>
<th>NAME</th>
<th>AGE</th>
<th>CITY</th>
</tr>
<tr>
<td>Tom</td>
<td>10</td>
<td>London</td>
</tr>
<tr>
<td>Jerry</td>
<td>8</td>
<td>London</td>
</tr>
<tr>
<td>Bruno</td>
<td>12</td>
<td>Wells</td>
</tr>
</table>
</body>
</html>
Output:
Students Table
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 2px solid black;
}
</style>
</head>
<body>
<h3>Students Table</h3>
<table style="width:50%">
<tr>
<th>NAME</th>
<th>AGE</th>
<th>CITY</th>
</tr>
<tr>
<td>Tom</td>
<td>10</td>
<td>London</td>
</tr>
<tr>
<td>Jerry</td>
<td>8</td>
<td>London</td>
</tr>
<tr>
<td>Bruno</td>
<td>12</td>
<td>Wells</td>
</tr>
</table>
</body>
</html> |
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 2px solid black;
}
</style>
</head>
<body>
<h3>Students Table</h3>
<table style="width:50%">
<tr>
<th>NAME</th>
<th>AGE</th>
<th>CITY</th>
</tr>
<tr>
<td>Tom</td>
<td>10</td>
<td>London</td>
</tr>
<tr>
<td>Jerry</td>
<td>8</td>
<td>London</td>
</tr>
<tr>
<td>Bruno</td>
<td>12</td>
<td>Wells</td>
</tr>
</table>
</body>
</html>
Output:
Students Table
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 2px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h3>Students Table</h3>
<table style="width:50%">
<tr>
<th>NAME</th>
<th>AGE</th>
<th>CITY</th>
</tr>
<tr>
<td>Tom</td>
<td>10</td>
<td>London</td>
</tr>
<tr>
<td>Jerry</td>
<td>8</td>
<td>London</td>
</tr>
<tr>
<td>Bruno</td>
<td>12</td>
<td>Wells</td>
</tr>
</table>
</body>
</html> |
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 2px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h3>Students Table</h3>
<table style="width:50%">
<tr>
<th>NAME</th>
<th>AGE</th>
<th>CITY</th>
</tr>
<tr>
<td>Tom</td>
<td>10</td>
<td>London</td>
</tr>
<tr>
<td>Jerry</td>
<td>8</td>
<td>London</td>
</tr>
<tr>
<td>Bruno</td>
<td>12</td>
<td>Wells</td>
</tr>
</table>
</body>
</html>
Output:
Students Table
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 2px solid black;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<h3>Students Table</h3>
<table style="width:50%">
<tr>
<th>NAME</th>
<th>AGE</th>
<th>CITY</th>
</tr>
<tr>
<td>Tom</td>
<td>10</td>
<td>London</td>
</tr>
<tr>
<td>Jerry</td>
<td>8</td>
<td>London</td>
</tr>
<tr>
<td>Bruno</td>
<td>12</td>
<td>Wells</td>
</tr>
</table>
</body>
</html> |
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 2px solid black;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<h3>Students Table</h3>
<table style="width:50%">
<tr>
<th>NAME</th>
<th>AGE</th>
<th>CITY</th>
</tr>
<tr>
<td>Tom</td>
<td>10</td>
<td>London</td>
</tr>
<tr>
<td>Jerry</td>
<td>8</td>
<td>London</td>
</tr>
<tr>
<td>Bruno</td>
<td>12</td>
<td>Wells</td>
</tr>
</table>
</body>
</html>
Output:
Students Table
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 2px solid black;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<h3>Students Table</h3>
<table style="width:50%">
<tr>
<th>NAME</th>
<th colspan = "2">Marks</th>
</tr>
<tr>
<td>Tom</td>
<td>100</td>
<td>20</td>
</tr>
<tr>
<td>Jerry</td>
<td>80</td>
<td>15</td>
</tr>
<tr>
<td>Bruno</td>
<td>75</td>
<td>10</td>
</tr>
</table>
</body>
</html> |
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 2px solid black;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<h3>Students Table</h3>
<table style="width:50%">
<tr>
<th>NAME</th>
<th colspan = "2">Marks</th>
</tr>
<tr>
<td>Tom</td>
<td>100</td>
<td>20</td>
</tr>
<tr>
<td>Jerry</td>
<td>80</td>
<td>15</td>
</tr>
<tr>
<td>Bruno</td>
<td>75</td>
<td>10</td>
</tr>
</table>
</body>
</html>
Output:
Students Table
Marks
Tom |
100 |
20 |
Jerry |
80 |
15 |
Bruno |
75 |
10 |
Explanation: In the above example, a table is created with three header cells namely, “NAME,” “AGE”, and “CITY”. Here, the width of the table is also defined to be 50
Table with rowspan in HTML: Example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<h3>Students Table</h3>
<table style="width:50%">
<tr>
<th>NAME</th>
<td>Tom</td>
</tr>
<tr>
<th rowspan="2">Marks</th>
<td>100</td>
</tr>
<tr>
<td>20</td>
</tr>
</table>
</body>
</html> |
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<h3>Students Table</h3>
<table style="width:50%">
<tr>
<th>NAME</th>
<td>Tom</td>
</tr>
<tr>
<th rowspan="2">Marks</th>
<td>100</td>
</tr>
<tr>
<td>20</td>
</tr>
</table>
</body>
</html>
Output:
Students Table
Explanation: In the above example, a table is created with three header cells namely, “NAME,” “AGE”, and “CITY”. Here, the width of the table is also defined to be 50
HTML table using Caption: Example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 2px solid black;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<h3>Students Table</h3>
<table style="width:50%">
<caption>Students Info</caption>
<tr>
<th>NAME</th>
<th>AGE</th>
<th>CITY</th>
</tr>
<tr>
<td>Tom</td>
<td>10</td>
<td>London</td>
</tr>
<tr>
<td>Jerry</td>
<td>8</td>
<td>London</td>
</tr>
<tr>
<td>Bruno</td>
<td>12</td>
<td>Wells</td>
</tr>
</table>
</body>
</html> |
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 2px solid black;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<h3>Students Table</h3>
<table style="width:50%">
<caption>Students Info</caption>
<tr>
<th>NAME</th>
<th>AGE</th>
<th>CITY</th>
</tr>
<tr>
<td>Tom</td>
<td>10</td>
<td>London</td>
</tr>
<tr>
<td>Jerry</td>
<td>8</td>
<td>London</td>
</tr>
<tr>
<td>Bruno</td>
<td>12</td>
<td>Wells</td>
</tr>
</table>
</body>
</html>
Output:
Students Table
<!DOCTYPE html>
<html>
<head>
<style>
table {
width:100%;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
}
table#t1 tr:nth-child(even) {
background-color: crimson;
color: white;
}
table#t1 tr:nth-child(odd) {
background-color: wheat;
}
table#t1 th {
background-color: black;
color: white;
}
</style>
</head>
<body>
<h3>Students Table</h3>
<table id="t1">
<tr>
<th>NAME</th>
<th>AGE</th>
<th>CITY</th>
</tr>
<tr>
<td>Tom</td>
<td>10</td>
<td>London</td>
</tr>
<tr>
<td>Jerry</td>
<td>8</td>
<td>London</td>
</tr>
<tr>
<td>Bruno</td>
<td>12</td>
<td>Wells</td>
</tr>
</table>
</body>
</html> |
<!DOCTYPE html>
<html>
<head>
<style>
table {
width:100%;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
}
table#t1 tr:nth-child(even) {
background-color: crimson;
color: white;
}
table#t1 tr:nth-child(odd) {
background-color: wheat;
}
table#t1 th {
background-color: black;
color: white;
}
</style>
</head>
<body>
<h3>Students Table</h3>
<table id="t1">
<tr>
<th>NAME</th>
<th>AGE</th>
<th>CITY</th>
</tr>
<tr>
<td>Tom</td>
<td>10</td>
<td>London</td>
</tr>
<tr>
<td>Jerry</td>
<td>8</td>
<td>London</td>
</tr>
<tr>
<td>Bruno</td>
<td>12</td>
<td>Wells</td>
</tr>
</table>
</body>
</html>
Output:
Students Table
NAME |
AGE |
CITY |
Tom |
10 |
London |
Jerry |
8 |
London |
Bruno |
12 |
Wells |
Explanation: In the above example, a table is created with three header cells namely, “NAME,” “AGE”, and “CITY”. Here, the width of the table is also defined to be 100