HTML tables allow us to organize and display data in a structured format using rows and columns. In this guide, we will learn how to create and style tables, merge cells, and ensure responsiveness for different devices.
A simple HTML table consists of the <table> element, with rows defined using <tr> and cells using <td>.
<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
<table border="1">
<tr>
<td>Alice</td>
<td>25</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
</tr>
</table>
The <th> element defines header cells in a table. Headers are typically bold and centered by default.
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
</tr>
</table>
<table border="1">
<tr>
<th colspan="2">Full Name</th>
</tr>
<tr>
<td>Alice</td>
<td>Bob</td>
</tr>
</table>
Using these elements helps organize and structure a table for better readability and accessibility.
<table border="1">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Laptop</td>
<td>$800</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$800</td>
</tr>
</tfoot>
</table>
We can use CSS to improve table appearance by adding borders, background colors, and spacing.
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: center;
border: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
</style>
Tables can be made scrollable to fit smaller screens.
<div style="overflow-x:auto;">
<table>
<!-- Table content here -->
</table>
</div>
Beyond the basic structure of HTML tables, we can incorporate interactive and advanced functionalities to improve usability, accessibility, and responsiveness. Below are several key enhancements for better table management.
To make tables accessible for screen readers, we should use attributes like scope and headers to define relationships between table headers and data cells.
<table border="1">
<tr>
<th id="product">Product</th>
<th id="price">Price</th>
</tr>
<tr>
<td headers="product">Laptop</td>
<td headers="price">$800</td>
</tr>
</table>
Allowing users to download table data enhances usability. Below is a JavaScript function to export an HTML table to a CSV file.
<button onclick="exportTableToCSV('table-data.csv')">Download CSV</button>
<script>
function exportTableToCSV(filename) {
let csv = [];
let rows = document.querySelectorAll("table tr");
for (let row of rows) {
let cols = row.querySelectorAll("td, th");
let rowData = [];
for (let col of cols) {
rowData.push(col.innerText);
}
csv.push(rowData.join(","));
}
let csvFile = new Blob([csv.join("\n")], { type: "text/csv" });
let link = document.createElement("a");
link.href = URL.createObjectURL(csvFile);
link.download = filename;
link.click();
}
</script>
Adding clickable headers to sort table columns makes it easier to organize data dynamically.
<script>
function sortTable(n) {
let table = document.querySelector("table");
let rows = Array.from(table.rows).slice(1);
let isAscending = table.dataset.order !== "asc";
rows.sort((rowA, rowB) => {
let cellA = rowA.cells[n].innerText.trim();
let cellB = rowB.cells[n].innerText.trim();
return isAscending ? cellA.localeCompare(cellB) : cellB.localeCompare(cellA);
});
table.tBodies[0].append(...rows);
table.dataset.order = isAscending ? "asc" : "desc";
}
</script>
<table border="1" data-order="asc">
<tr>
<th onclick="sortTable(0)">Name ⬆⬇</th>
<th onclick="sortTable(1)">Age ⬆⬇</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
</tr>
</table>
Adding a search feature allows users to filter table content dynamically.
<input type="text" id="searchInput" onkeyup="searchTable()" placeholder="Search for names...">
<script>
function searchTable() {
let input = document.getElementById("searchInput").value.toLowerCase();
let rows = document.querySelectorAll("table tr");
rows.forEach((row, index) => {
if (index === 0) return;
let text = row.innerText.toLowerCase();
row.style.display = text.includes(input) ? "" : "none";
});
}
</script>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
</tr>
</table>
By implementing these advanced table features, we can create dynamic, accessible, and responsive tables that enhance user experience. Sorting, searching, and exporting data improve table usability, making them more practical for real-world applications.
HTML tables are essential for displaying structured data. By utilizing headers, merging cells, and applying CSS styles, we can create well-organized and visually appealing tables. Implementing best practices ensures accessibility and usability across various devices.
Read more on Table background Imageveerender | 04-10-2012 |
thank u |