HTML Tables
Learn about essential HTML tables and their purpose in building web pages.
1. Basic Table Structure
HTML tables are created using the <table> element. A basic table consists of rows defined by <tr> tags, and each row contains cells, defined by either <th> (header cells) or <td> (data cells) tags.
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alice</td>
<td>24</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
</tr>
</table>
Result:
| Name | Age |
|---|---|
| Alice | 24 |
| Bob | 30 |
2. Adding Borders and Styling
Tables can be styled using CSS. You can add borders, padding, and colors to improve readability.
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alice</td>
<td>24</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
</tr>
</table>
3. Table Head, Body, and Footer
HTML tables can be divided into three sections: <thead> for the header, <tbody> for the body, and <tfoot> for the footer.
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>24</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total: 2 people</td>
</tr>
</tfoot>
</table>
Result:
| Name | Age |
|---|---|
| Alice | 24 |
| Bob | 30 |
| Total: 2 people | |
4. Merging Cells with colspan and rowspan
To merge cells in a table, use the colspan and rowspan attributes:
<table>
<tr>
<td colspan="2">Merged Cell</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>
Result:
| Merged Cell | |
| Cell 1 | Cell 2 |
5. Accessible Tables
For accessibility, add captions and use scope attributes on header cells to improve screen reader navigation.
<table>
<caption>Student Ages</caption>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
</tr>
<tr>
<td>Alice</td>
<td>24</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
</tr>
</table>
Result:
| Name | Age |
|---|---|
| Alice | 24 |
| Bob | 30 |
6. Zebra Striping for Rows
Using CSS, you can add a striped effect to table rows to improve readability, especially for large tables. This technique is called "zebra striping."
<style>
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alice</td>
<td>24</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
</tr>
</table>
7. Hover Effect on Table Rows
Add a hover effect to table rows to highlight them when the user hovers over them. This helps in identifying the active row in a large table.
<style>
tr:hover {
background-color: #ddd;
}
</style>
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alice</td>
<td>24</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
</tr>
</table>
8. Table Caption
Using the <caption> element, you can provide a title for your table. This is especially useful for accessibility as it describes the purpose of the table to screen readers.
<table>
<caption>Student Information</caption>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alice</td>
<td>24</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
</tr>
</table>
9. Aligning Text in Table Cells
You can align text in table cells by using CSS properties like text-align and vertical-align.
<style>
th, td {
text-align: left;
vertical-align: middle;
}
</style>
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alice</td>
<td>24</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
</tr>
</table>
10. Responsive Tables
For better viewing on small screens, you can make tables responsive by using CSS properties like overflow-x: auto.
<style>
.table-responsive {
overflow-x: auto;
}
</style>
<div class="table-responsive">
<table class="table">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alice</td>
<td>24</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
</tr>
</table>
</div>
11. Highlighting a Column
You can highlight specific columns by using CSS pseudo-classes or applying a class to the cells in that column.
<style>
.highlight-column {
background-color: #f9f9f9;
}
</style>
<table>
<tr>
<th>Name</th>
<th class="highlight-column">Age</th>
</tr>
<tr>
<td>Alice</td>
<td class="highlight-column">24</td>
</tr>
<tr>
<td>Bob</td>
<td class="highlight-column">30</td>
</tr>
</table>
12. Sortable Table Columns
Using JavaScript, you can make table columns sortable by clicking on the headers.
<script>
function sortTable(n) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById("myTable");
switching = true;
dir = "asc";
while (switching) {
switching = false;
rows = table.rows;
for (i = 1; i < (rows.length - 1); i++) {
shouldSwitch = false;
x = rows[i].getElementsByTagName("TD")[n];
y = rows[i + 1].getElementsByTagName("TD")[n];
if (dir == "asc") {
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
shouldSwitch = true;
break;
}
} else if (dir == "desc") {
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
shouldSwitch = true;
break;
}
}
}
if (shouldSwitch) {
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
switchcount ++;
} else {
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;
}
}
}
}
</script>
<table id="myTable">
<tr>
<th onclick="sortTable(0)">Name</th>
<th onclick="sortTable(1)">Age</th>
</tr>
<tr>
<td>Alice</td>
<td>24</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
</tr>
</table>