HTML Tables
Organizing data in rows and columns
📊 What are HTML Tables?
HTML tables display data in rows and columns, like a spreadsheet. They're perfect for showing structured information like prices, schedules, or statistics.
<!-- Simple table example -->
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
Output:
| Name | Age |
|---|---|
| John | 25 |
Table Elements
<table>
Container for the entire table
<table>
<!-- table content -->
</table><tr>
Table row
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr><td>
Table data cell
<td>Regular cell</td><th>
Table header cell
<th>Header cell</th>🔹 Basic Table Structure
Every table follows this basic pattern:
<table>
<!-- Header row -->
<tr>
<th>Product</th>
<th>Price</th>
<th>Stock</th>
</tr>
<!-- Data rows -->
<tr>
<td>Laptop</td>
<td>$999</td>
<td>15</td>
</tr>
<tr>
<td>Phone</td>
<td>$599</td>
<td>32</td>
</tr>
<tr>
<td>Tablet</td>
<td>$399</td>
<td>8</td>
</tr>
</table>Output:
| Product | Price | Stock |
|---|---|---|
| Laptop | $999 | 15 |
| Phone | $599 | 32 |
| Tablet | $399 | 8 |
🔹 Table Sections
Organize large tables with semantic sections:
<table>
<!-- Table header section -->
<thead>
<tr>
<th>Student</th>
<th>Math</th>
<th>Science</th>
<th>Average</th>
</tr>
</thead>
<!-- Table body section -->
<tbody>
<tr>
<td>Alice</td>
<td>95</td>
<td>88</td>
<td>91.5</td>
</tr>
<tr>
<td>Bob</td>
<td>87</td>
<td>92</td>
<td>89.5</td>
</tr>
</tbody>
<!-- Table footer section -->
<tfoot>
<tr>
<td><strong>Class Average</strong></td>
<td><strong>91</strong></td>
<td><strong>90</strong></td>
<td><strong>90.5</strong></td>
</tr>
</tfoot>
</table>🔹 Spanning Cells
Make cells span multiple rows or columns:
🔸 Column Span (colspan)
<table>
<tr>
<th colspan="3">Sales Report</th>
</tr>
<tr>
<th>Q1</th>
<th>Q2</th>
<th>Q3</th>
</tr>
<tr>
<td>$10k</td>
<td>$15k</td>
<td>$12k</td>
</tr>
</table>🔸 Row Span (rowspan)
<table>
<tr>
<th rowspan="2">Department</th>
<th>Morning</th>
<th>Evening</th>
</tr>
<tr>
<td>Sales: 5</td>
<td>Sales: 3</td>
</tr>
<tr>
<th rowspan="2">Support</th>
<td>Support: 8</td>
<td>Support: 2</td>
</tr>
</table>🔹 Table Styling
Add borders and styling to make tables look better:
<!-- Basic styling with CSS -->
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
font-weight: bold;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
</style>
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th>Role</th>
</tr>
<tr>
<td>John Doe</td>
<td>[email protected]</td>
<td>Developer</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>[email protected]</td>
<td>Designer</td>
</tr>
</table>🔹 Responsive Tables
Make tables work on mobile devices:
<!-- Scrollable table container -->
<div style="overflow-x: auto;">
<table>
<tr>
<th>Product ID</th>
<th>Product Name</th>
<th>Category</th>
<th>Price</th>
<th>Stock</th>
<th>Supplier</th>
</tr>
<tr>
<td>001</td>
<td>Wireless Mouse</td>
<td>Electronics</td>
<td>$25.99</td>
<td>150</td>
<td>TechCorp</td>
</tr>
</table>
</div>