11
HTML tables are used to display tabular data in rows and columns. They are created using the <table> tag, along with supporting tags like <tr>, <th>, and <td>. This tutorial will cover everything from basic table creation to advanced formatting.
1. Basic Table Structure
A basic HTML table consists of:
- <table>: The container for the table.
- <tr>: Table row.
- <th>: Table header cell.
- <td>: Table data cell.
Example 1: Basic Table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Basic Table</title>
</head>
<body>
<h1>Basic Table Example</h1>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
<td>USA</td>
</tr>
<tr>
<td>Maria</td>
<td>30</td>
<td>Canada</td>
</tr>
<tr>
<td>Lee</td>
<td>28</td>
<td>South Korea</td>
</tr>
</table>
</body>
</html>
Explanation:
- <th>: Creates header cells with bold and centered text by default.
- <td>: Creates regular data cells.
- border=”1″: Adds a simple border around the table (use CSS for modern styling).
2. Adding a Caption
You can add a caption to describe your table using the <caption> tag.
Example 2: Table with Caption
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table Caption</title>
</head>
<body>
<h1>Table with Caption</h1>
<table border="1">
<caption>Student Information</caption>
<tr>
<th>Name</th>
<th>Age</th>
<th>Grade</th>
</tr>
<tr>
<td>Alice</td>
<td>20</td>
<td>A</td>
</tr>
<tr>
<td>Bob</td>
<td>22</td>
<td>B</td>
</tr>
</table>
</body>
</html>
Output: The caption “Student Information” appears above the table.
3. Table Borders and Cell Padding
Use the border-collapse and padding properties in CSS to style borders and add space inside cells.
Example 3: Styled Table with CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Styled Table</title>
<style>
table {
border-collapse: collapse;
width: 50%;
margin: auto;
}
th, td {
border: 1px solid black;
padding: 10px;
text-align: center;
}
th {
background-color: lightblue;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>Styled Table Example</h1>
<table>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
</tr>
<tr>
<td>Apples</td>
<td>$2.00</td>
<td>50</td>
</tr>
<tr>
<td>Bananas</td>
<td>$1.50</td>
<td>100</td>
</tr>
<tr>
<td>Cherries</td>
<td>$3.00</td>
<td>30</td>
</tr>
</table>
</body>
</html>
Explanation:
- border-collapse: collapse;: Combines adjacent borders into a single border.
- padding: Adds space inside table cells.
- tr:nth-child(even): Highlights alternate rows for better readability.
4. Spanning Columns and Rows
You can merge cells across rows or columns using the colspan and rowspan attributes.
Example 4: Spanning Columns and Rows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Spanning Cells</title>
</head>
<body>
<h1>Table with Colspan and Rowspan</h1>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Contact Info</th>
</tr>
<tr>
<td>John</td>
<td>Email</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Maria</td>
<td rowspan="2">Phone</td>
<td>+123456789</td>
</tr>
<tr>
<td>Lee</td>
<td>+987654321</td>
</tr>
</table>
</body>
</html>
Explanation:
- colspan=”2″: Merges two columns into one.
- rowspan=”2″: Merges two rows into one.
5. Adding a Header, Body, and Footer
HTML tables can be divided into sections using <thead>, <tbody>, and <tfoot> tags for better organization.
Example 5: Table with Header, Body, and Footer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table Sections</title>
</head>
<body>
<h1>Table with Sections</h1>
<table border="1">
<thead>
<tr>
<th>Item</th>
<th>Price</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>Milk</td>
<td>$2.50</td>
<td>10</td>
</tr>
<tr>
<td>Bread</td>
<td>$1.50</td>
<td>20</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total</td>
<td>30</td>
</tr>
</tfoot>
</table>
</body>
</html>
Output:
- <thead> contains the table headers.
- <tbody> contains the main data.
- <tfoot> contains the summary or footer row.
6. Responsive Tables
For responsive designs, you can make tables scrollable on smaller screens using CSS.
Example 6: Responsive Table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Responsive Table</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
.table-container {
overflow-x: auto;
}
</style>
</head>
<body>
<h1>Responsive Table</h1>
<div class="table-container">
<table>
<thead>
<tr>
<th>Item</th>
<th>Description</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Phone</td>
<td>Smartphone with 6GB RAM</td>
<td>$500</td>
</tr>
<tr>
<td>Laptop</td>
<td>15-inch display, 8GB RAM</td>
<td>$800</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Explanation:
- The .table-container div allows horizontal scrolling on small screens.
Conclusion
In this tutorial, you learned how to:
- Create a basic HTML table.
- Use captions, borders, and padding.
- Merge cells with colspan and rowspan.
- Add sections with <thead>, <tbody>, and <tfoot>.
- Style tables for better readability.
- Make tables responsive for modern web designs.
With these examples, you can now create well-structured and visually appealing tables for your web pages