An HTML table is used to organize and display data in rows and columns.
Tables are useful when we need to present related information in a structured format, such as student marks, employee details, product information, prices, and schedules.
An HTML table is created using the
<table>tag.
HTML Table Elements
<table>-used to element defines the complete table.
Table row — The <tr> element creates a row in the table.
Table Header —the <th> element defines a heading or header cell.
- By default, the text is usually bold and centered.
Table Data - The <td> element defines a normal data cell.
Table Title - The <caption> element adds a title to the table.
Table Header Section - The <thead> element groups the header rows of a table.
Table Body Section - The <tbody> element groups the main data rows of a table.
Table Footer Section - The <tfoot> element groups the footer or summary rows of a table.
Column Group - The <colgroup> element is used to group one or more columns in a table.
HTML Table Attributes
colspan - The colspan attribute allows one cell to occupy multiple columns.
rowspan - The rowspan attribute allows one cell to occupy multiple rows.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Details</title>
<style>
table {
width: 100%; border-collapse: collapse;
}
th, td {
border: 1px solid black; padding: 10px; text-align: left;
}
th {
background-color: lightgray;
}
</style>
</head>
<body>
<table>
<caption>Student Details</caption>
<thead>
<tr>
<th>Name</th>
<th>Course</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Aswin</td>
<td>Full Stack Development</td>
<td>24</td>
</tr>
<tr>
<td>Ravi</td>
<td>Web Development</td>
<td>25</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Student Information</td>
</tr>
</tfoot>
</table>
</body>
</html>
output:
Top comments (0)