HTML Tables allow you to display data in a structured, tabular format with rows and columns.
Tables are commonly used for schedules, pricing lists, reports, and any content that requires clear organization.
Basic Table Structure
A table is created using the <table> tag.
Each row is defined by <tr>, and each cell by <td> (data cell) or <th> (header cell).
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Alissha</td>
<td>28</td>
<td>Delhi</td>
</tr>
<tr>
<td>Swapnil</td>
<td>30</td>
<td>Mumbai</td>
</tr>
</table>
Table Header, Body & Footer
HTML5 introduced semantic tags for better structure:
<thead>→ Table header section<tbody>→ Main table content<tfoot>→ Footer section (like totals or notes)
<table border="1">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Laptop</td>
<td>$800</td>
</tr>
<tr>
<td>Tablet</td>
<td>$400</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$1200</td>
</tr>
</tfoot>
</table>Why use these?
They improve readability, structure, and accessibility, especially when using JavaScript or styling with CSS.
Adding Captions
The <caption> tag provides a title or description for your table.
<table border="1">
<caption>Monthly Sales Report</caption>
...
</table>Merging Cells (Rowspan & Colspan)
To merge multiple cells together:
colspanmerges columnsrowspanmerges rows
<table border="1">
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Marks</th>
</tr>
<tr>
<th>Math</th>
<th>Science</th>
</tr>
<tr>
<td>Alissha</td>
<td>95</td>
<td>89</td>
</tr>
</table>Styling Tables with CSS
You can control borders, padding, and colors using CSS.
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #29AB87;
padding: 10px;
text-align: left;
}
th {
background-color: #f3f3f3;
}
tr:nth-child(even) {
background-color: #fafafa;
}
</style>
<table border="1">
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Marks</th>
</tr>
<tr>
<th>Math</th>
<th>Science</th>
</tr>
<tr>
<td>Alissha</td>
<td>95</td>
<td>89</td>
</tr>
</table>Responsive Tables
Large tables can overflow on small screens.
Use CSS for horizontal scrolling or stacking layout.
<div style="overflow-x:auto;">
<table border="1" style="width: 800px;">
<tr><th>Name</th><th>City</th><th>Email</th></tr>
<tr><td>Alissha</td><td>Delhi</td><td>alissha@mail.com</td></tr>
<tr><td>Swapnil</td><td>Mumbai</td><td>swapnil@mail.com</td></tr>
</table>
</div>Table Accessibility Tips
To make your tables screen-reader friendly:
- Use
<th>for headers, not<td>. - Add
scope="col"orscope="row"for clarity. - Use
<caption>to describe the table’s purpose.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessible HTML Table Example</title>
<style>
table {
width: 100%;
border-collapse: collapse;
margin-top: 15px;
}
caption {
caption-side: top;
font-weight: bold;
margin-bottom: 10px;
text-align: left;
color: #29AB87;
}
th, td {
border: 1px solid #ccc;
padding: 10px;
text-align: left;
}
th {
background-color: #f5f5f5;
}
tr:nth-child(even) {
background-color: #fafafa;
}
tr:hover {
background-color: #f0f9f6;
}
</style>
</head>
<body>
<h2>Student Information Table</h2>
<table>
<caption>List of Students with Age and City</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
<th scope="col">City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alissha</td>
<td>28</td>
<td>Delhi</td>
</tr>
<tr>
<td>Swapnil</td>
<td>30</td>
<td>Mumbai</td>
</tr>
<tr>
<td>Rahul</td>
<td>26</td>
<td>Pune</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total Students: 3</td>
</tr>
</tfoot>
</table>
</body>
</html>
Explanation:
<thead>,<tbody>,<tfoot>— provide clear structure.<th scope="col">— defines header cells for each column, improving screen-reader accessibility.<caption>— gives the table a descriptive title.- CSS styling adds borders, colors, and hover effects for better readability.
Advanced Table Attributes (Legacy)
Older HTML supports attributes (now replaced by CSS):
border→ Defines table bordercellpadding→ Space inside cellscellspacing→ Space between cellsalign,bgcolor,width→ Outdated, use CSS instead
Conclusion
HTML Tables provide a powerful way to display and organize data in rows and columns.
Using <thead>, <tbody>, <tfoot>, and CSS styling helps make your tables more structured, accessible, and responsive.
