HTML Tables:
HTML Table Basics to Advanced
HTML tables are used to organize data into rows and columns. They can be styled and enhanced for layout, comparison, or data presentation.
Basic Table Structure
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th>Role</th>
</tr>
<tr>
<td>John Doe</td>
<td>john@example.com</td>
<td>Admin</td>
</tr>
</table>
Tags Used:
<table>
- defines the table container<tr>
- table row<th>
- table header cell (bold and centered by default)<td>
- table data cell
Adding a Caption
<table>
<caption>Employee Directory</caption>
<!-- table content -->
</table>
The <caption>
adds a title above the table (by default) that describes the table's purpose.
Merging Cells
Column Span (colspan)
<table border="1">
<tr>
<th colspan="2">Full Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>30</td>
</tr>
</table>
Row Span (rowspan)
<table border="1">
<tr>
<th rowspan="2">Department</th>
<th colspan="2">Employees</th>
</tr>
<tr>
<th>Name</th>
<th>ID</th>
</tr>
</table>
Table Structure with <thead>, <tbody>, <tfoot>
<table>
<thead>
<tr>
<th>Product</th>
<th>Qty</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Widget A</td>
<td>5</td>
<td>$10.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total</td>
<td>$50.00</td>
</tr>
</tfoot>
</table>
<thead>
- header section (for column headings)<tbody>
- main data section<tfoot>
- footer section (for totals, summaries)
Advanced Styling with CSS
<style>
table {
border-collapse: collapse;
width: 100%;
font-family: Arial, sans-serif;
margin: 20px 0;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
th {
background-color: #4CAF50;
color: white;
position: sticky;
top: 0;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #e9e9e9;
}
caption {
font-weight: bold;
font-size: 1.2em;
margin-bottom: 10px;
}
</style>
Responsive Table Example
<div style="overflow-x: auto;">
<table>
<!-- Wide table content -->
<tr>
<th>Name</th>
<th>Position</th>
<th>Department</th>
<th>Salary</th>
<th>Join Date</th>
<th>Email</th>
<th>Phone</th>
</tr>
<!-- More rows -->
</table>
</div>
Best Practices
- Use tables for tabular data, not for page layout
- Always include proper header cells (
<th>
) - Use semantic structure (
<thead>
,<tbody>
,<tfoot>
) - Make tables responsive for mobile devices
- Ensure sufficient contrast for readability
- Add captions for complex tables
- Use CSS for styling instead of HTML attributes
- Consider accessibility (screen readers)
- Keep tables simple - break complex data into multiple tables if needed
Accessibility Considerations
<table aria-describedby="table-desc">
<caption id="table-desc">Quarterly Sales Report 2023</caption>
<thead>
<tr>
<th scope="col">Quarter</th>
<th scope="col">Sales</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Q1</th>
<td>$10,000</td>
</tr>
</tbody>
</table>
Key accessibility features:
aria-describedby
links to descriptive textscope
attributes define header relationships- Proper
<caption>
for table description - Clear row and column headers