Tables in HTML help structure data in rows and columns, similar to spreadsheets. In this guide, we’ll cover everything about HTML tables, including essential tags like <table>, <tr>, <td>, <th>, and <caption>.
By the end of this post, you’ll know how to create and customize tables effectively!
Run the Below Code Snippets in VS Code to Understand Better….
1️⃣ Basic Table Structure
To create a table, we use the <table> tag. Inside it:
<tr>(table row) defines a row.<td>(table data) defines a cell.<th>(table header) creates bold column headers.
Example: Simple Table
<!DOCTYPE html>
<html>
<head>
<title>Simple Table</title>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
</table>
</body>
</html>
2️⃣ Adding a Table Caption (<caption>)
The <caption> tag provides a title for the table.
Example: Table with a Caption
<!DOCTYPE html>
<html>
<head>
<title>Table Caption</title>
</head>
<body>
<table border="1">
<caption>Student Information</caption>
<tr>
<th>Name</th>
<th>Grade</th>
</tr>
<tr>
<td>Alice</td>
<td>A</td>
</tr>
</table>
</body>
</html>
3️⃣ Merging Cells (colspan & rowspan)
colspan→ Expands a cell across multiple columns.rowspan→ Expands a cell across multiple rows.
Example: Using colspan to Merge Columns
<!DOCTYPE html>
<html>
<head>
<title>Colspan Example</title>
</head>
<body>
<table border="1">
<tr>
<th colspan="2">Full Name</th>
</tr>
<tr>
<td>First Name</td>
<td>Last Name</td>
</tr>
</table>
</body>
</html>
Example: Using rowspan to Merge Rows
<!DOCTYPE html>
<html>
<head>
<title>Rowspan Example</title>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<td rowspan="2">John Doe</td>
</tr>
<tr>
<th>Age</th>
</tr>
</table>
</body>
</html>
4️⃣ Grouping Table Content (<thead>, <tbody>, <tfoot>)
<thead>→ Groups table headers.<tbody>→ Groups main content.<tfoot>→ Groups footer rows (e.g., totals).
Example: Grouping Table Sections
<!DOCTYPE html>
<html>
<head>
<title>Table Sections</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Laptop</td>
<td>$1000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$1000</td>
</tr>
</tfoot>
</table>
</body>
</html>
5️⃣ Nested Tables (Table Inside a Table)
You can insert a table inside a <td> cell to create a nested table.
Example: Nested Table
<!DOCTYPE html>
<html>
<head>
<title>Nested Table</title>
</head>
<body>
<table border="1">
<tr>
<td>Main Table</td>
<td>
<table border="1">
<tr>
<td>Nested Table</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
6️⃣ Making Tables Responsive
To ensure tables fit on smaller screens, wrap them inside a div with overflow-x: auto;.
Example: Responsive Table
<!DOCTYPE html>
<html>
<head>
<title>Responsive Table</title>
<style>
.table-container {
overflow-x: auto;
}
</style>
</head>
<body>
<div class="table-container">
<table border="1">
<tr>
<th>Country</th>
<th>Population</th>
<th>Capital</th>
</tr>
<tr>
<td>India</td>
<td>1.4 Billion</td>
<td>New Delhi</td>
</tr>
</table>
</div>
</body>
</html>
Follow me on Instagram for daily web development tips! INSTAGRAM
View my Previous Post – Top 15 Patterns