HTML Table Tags and Their Uses
Tag Description
<table> Defines a table.
<tr> Table row.
<th> Table header cell
(bold & centered by
default).
<td> Table data/cell.
<caption> Table title (displayed
above the table).
<thead> Groups the header
content.
<tbody> Groups the main body
content.
<tfoot> Groups footer rows
(summary, totals,
etc.).
colgroup Specifies column
properties.
<col> Defines column styles
inside <colgroup>.
Basic Table with Borders
<table border="1">
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
</tr>
<tr>
<td>Apple</td>
<td>$1</td>
<td>10</td>
</tr>
<tr>
<td>Banana</td>
<td>$0.5</td>
<td>20</td>
</tr>
</table>
2. Table with colspan and rowspan
<table border="1">
<tr>
<th colspan="2">Employee Info</th>
</tr>
<tr>
<td>Name</td>
<td>John Doe</td>
</tr>
<tr>
<td rowspan="2">Address</td>
<td>New York, USA</td>
</tr>
<tr>
<td>London, UK</td>
</tr>
</table>
colspan="2" → Merges two columns into one.
rowspan="2" → Merges two rows into one.
3. Styled Table with Hover Effect
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Styled Table</title>
<style>
table {
width: 70%;
border-collapse: collapse;
margin: 20px auto;
}
th, td {
border: 1px solid black;
padding: 12px;
text-align: center;
}
th {
background-color: #4CAF50;
color: white;
}
tr:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<table>
<tr>
<th>Course</th>
<th>Duration</th>
<th>Price</th>
</tr>
<tr>
<td>Web Development</td>
<td>6 Months</td>
<td>$500</td>
</tr>
<tr>
<td>Data Science</td>
<td>12 Months</td>
<td>$1000</td>
</tr>
</table>
</body>
</html>
tr:hover → Highlights row when hovered.
4. Responsive Table (Scroll on Small Screens)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Table</title>
<style>
.table-container {
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 10px;
text-align: left;
}
th {
background-color: #333;
color: white;
}
</style>
</head>
<body>
<div class="table-container">
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
<th>Email</th>
</tr>
<tr>
<td>David</td>
<td>32</td>
<td>USA</td>
<td>david@[Link]</td>
</tr>
<tr>
<td>Sophia</td>
<td>27</td>
<td>Canada</td>
<td>sophia@[Link]</td>
</tr>
</table>
</div>
</body>
</html>
✅ Feature:
overflow-x: auto; → Allows horizontal scrolling on small
screens.
Table with Images
<table border="1">
<tr>
<th>Product</th>
<th>Image</th>
<th>Price</th>
</tr>
<tr>
<td>Laptop</td>
<td><img src="[Link]" width="100"></td>
<td>$800</td>
</tr>
<tr>
<td>Phone</td>
<td><img src="[Link]" width="80"></td>
<td>$500</td>
</tr>
</table>
✅ Feature:Displays images inside table cells.
Table with thead, tbody, and tfoot
<table border="1">
<thead>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Milk</td>
<td>$3</td>
</tr>
<tr>
<td>Bread</td>
<td>$2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td><strong>Total</strong></td>
<td><strong>$5</strong></td>
</tr>
</tfoot>
</table>
HTML Table Example
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
<td>USA</td>
</tr>
<tr>
<td>Lisa</td>
<td>30</td>
<td>UK</td>
</tr>
</table>
🎨 Styled Table with CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled Table</title>
<style>
table {
width: 60%;
border-collapse: collapse;
margin: 20px 0;
th, td {
border: 1px solid black;
padding: 10px;
text-align: center;
th {
background-color: #4CAF50;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
</style>
</head>
<body>
<table>
<caption><strong>Student Details</strong></caption>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>22</td>
<td>Canada</td>
</tr>
<tr>
<td>Bob</td>
<td>28</td>
<td>Germany</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">End of Data</td>
</tr>
</tfoot>
</table>
</body>
</html>
