Introduction to HTML Tables
HTML tables are used to display tabular data in a structured format. They consist of rows and columns created using the <table>, <tr>, <td>, and <th> tags.
Basic Table Structure
1. Simple Table Example
A basic table with rows and columns.
Code Example:
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John Doe</td>
<td>30</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
<td>Los Angeles</td>
</tr>
</table>Output:
| Name | Age | City |
|---|---|---|
| John Doe | 30 | New York |
| Jane Smith | 25 | Los Angeles |
Table Borders
1. HTML Border Attribute
Using the border attribute (deprecated, use CSS instead).
Code Example:
<!-- Deprecated border attribute -->
<table border="1">
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>Laptop</td>
<td>$999</td>
</tr>
</table>2. CSS Borders (Recommended)
Modern approach using CSS for table borders.
Code Example:
<style>
.table-with-borders {
border-collapse: collapse;
width: 100%;
}
.table-with-borders th,
.table-with-borders td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
.table-with-borders th {
background-color: #f2f2f2;
}
</style>
<table class="table-with-borders">
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>Laptop</td>
<td>$999</td>
</tr>
</table>Output:
| Product | Price |
|---|---|
| Laptop | $999 |
| Phone | $599 |
Table Sizes
1. Table Dimensions
Controlling table width and height.
Code Example:
<!-- Fixed width table -->
<table style="width: 100%;">
<!-- content -->
</table>
<!-- Fixed pixel width -->
<table style="width: 600px;">
<!-- content -->
</table>
<!-- Minimum width -->
<table style="min-width: 500px; max-width: 800px;">
<!-- content -->
</table>
<!-- Height control -->
<table style="height: 300px;">
<!-- content -->
</table>2. Responsive Tables
Making tables work on different screen sizes.
Code Example:
<style>
.responsive-table {
width: 100%;
overflow-x: auto;
}
.responsive-table table {
min-width: 600px;
}
@media (max-width: 768px) {
.responsive-table table {
min-width: 100%;
}
}
</style>
<div class="responsive-table">
<table>
<!-- wide table content -->
</table>
</div>Table Headers
1. Basic Header Usage
Using <th> tags for table headers.
Code Example:
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
</table>2. Scope Attribute
Improving accessibility with the scope attribute.
Code Example:
<table>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
<th scope="col">City</th>
</tr>
<tr>
<th scope="row">John Doe</th>
<td>30</td>
<td>New York</td>
</tr>
<tr>
<th scope="row">Jane Smith</th>
<td>25</td>
<td>Los Angeles</td>
</tr>
</table>Padding & Spacing
1. Cell Padding
Controlling space inside table cells.
Code Example:
<!-- Using cellpadding attribute (deprecated) -->
<table cellpadding="10">
<!-- content -->
</table>
<!-- Using CSS (recommended) -->
<style>
.table-padding th,
.table-padding td {
padding: 15px;
text-align: left;
}
</style>
<table class="table-padding">
<!-- content -->
</table>2. Cell Spacing
Controlling space between table cells.
Code Example:
<!-- Using cellspacing attribute (deprecated) -->
<table cellspacing="5">
<!-- content -->
</table>
<!-- Using CSS border-spacing (recommended) -->
<style>
.table-spacing {
border-spacing: 10px;
border-collapse: separate;
}
</style>
<table class="table-spacing">
<!-- content -->
</table>Colspan & Rowspan
1. Colspan Attribute
Merging cells horizontally across columns.
Code Example:
<table>
<tr>
<th colspan="2">Personal Information</th>
<th>Contact</th>
</tr>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td rowspan="2">john@example.com</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</table>Output:
| Personal Information | Contact | |
|---|---|---|
| First Name | Last Name | john@example.com |
| John | Doe | |
2. Rowspan Attribute
Merging cells vertically across rows.
Code Example:
<table>
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Scores</th>
</tr>
<tr>
<th>Math</th>
<th>Science</th>
</tr>
<tr>
<td>John Doe</td>
<td>95</td>
<td>88</td>
</tr>
</table>Table Styling
1. CSS Styling Examples
Advanced table styling with CSS.
Code Example:
<style>
.stylish-table {
width: 100%;
border-collapse: collapse;
margin: 25px 0;
font-size: 0.9em;
font-family: sans-serif;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.stylish-table thead tr {
background-color: #009879;
color: #ffffff;
text-align: left;
}
.stylish-table th,
.stylish-table td {
padding: 12px 15px;
}
.stylish-table tbody tr {
border-bottom: 1px solid #dddddd;
}
.stylish-table tbody tr:nth-of-type(even) {
background-color: #f3f3f3;
}
.stylish-table tbody tr:last-of-type {
border-bottom: 2px solid #009879;
}
.stylish-table tbody tr:hover {
background-color: #f1f1f1;
}
</style>
<table class="stylish-table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>Engineering</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>Marketing</td>
</tr>
</tbody>
</table>Table Colgroup
1. Colgroup Element
Styling columns with the colgroup element.
Code Example:
<table>
<colgroup>
<col span="2" style="background-color: #f2f2f2">
<col style="background-color: #e6f7ff">
</colgroup>
<tr>
<th>Product</th>
<th>Price</th>
<th>Stock</th>
</tr>
<tr>
<td>Laptop</td>
<td>$999</td>
<td>In Stock</td>
</tr>
<tr>
<td>Phone</td>
<td>$599</td>
<td>Out of Stock</td>
</tr>
</table>Output:
| Product | Price | Stock |
|---|---|---|
| Laptop | $999 | In Stock |
| Phone | $599 | Out of Stock |
Best Practices
- Use tables only for tabular data, not for layout
- Always include proper table headers (
<th>) - Use the scope attribute for better accessibility
- Implement responsive design for mobile devices
- Use CSS for styling instead of deprecated HTML attributes
- Keep tables simple and avoid excessive nesting
- Test with screen readers for accessibility
- Consider using captions for table descriptions
- Use appropriate padding and spacing for readability
- Avoid using tables for complex page layouts
