Welcome to The Coding College, where we turn complex coding concepts into simple tutorials. In this guide, you’ll learn how to style HTML tables to make them more visually appealing and professional using CSS.
Why Style HTML Tables?
Well-styled tables:
- Improve readability and user experience.
- Align with your website’s theme and branding.
- Make your data visually engaging and easy to interpret.
Let’s dive into the essential techniques for styling HTML tables.
Basic HTML Table Structure
Here’s a simple table to start with:
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td>John</td>
<td>30</td>
<td>USA</td>
</tr>
<tr>
<td>Anna</td>
<td>25</td>
<td>UK</td>
</tr>
</table>Adding Basic Table Borders
Borders enhance the table’s structure and make it easier to follow.
Example: Basic Borders
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse; /* Avoid double borders */
}
th, td {
padding: 10px; /* Adds spacing inside cells */
text-align: left;
}
</style>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td>John</td>
<td>30</td>
<td>USA</td>
</tr>
<tr>
<td>Anna</td>
<td>25</td>
<td>UK</td>
</tr>
</table>Adding Striped Rows
Striped rows make tables easier to read, especially for large datasets.
Example: Zebra Stripes
<style>
table {
width: 100%; /* Full width */
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f9f9f9; /* Light gray */
}
tr:hover {
background-color: #f1f1f1; /* Highlight on hover */
}
th {
background-color: #4CAF50; /* Green header */
color: white;
}
</style>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td>John</td>
<td>30</td>
<td>USA</td>
</tr>
<tr>
<td>Anna</td>
<td>25</td>
<td>UK</td>
</tr>
</table>Adding Table Width and Alignment
You can control the width and alignment of table columns for better formatting.
Example: Column Width and Center Alignment
<style>
table {
width: 80%; /* Table width */
margin: 20px auto; /* Center table */
border-collapse: collapse;
}
th, td {
border: 1px solid black;
text-align: center; /* Center align */
padding: 8px;
}
</style>
<table>
<tr>
<th style="width: 40%;">Name</th>
<th style="width: 20%;">Age</th>
<th style="width: 40%;">Country</th>
</tr>
<tr>
<td>John</td>
<td>30</td>
<td>USA</td>
</tr>
<tr>
<td>Anna</td>
<td>25</td>
<td>UK</td>
</tr>
</table>Adding Hover Effects
Hover effects can make your tables interactive and modern.
Example: Hover Effects
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 10px;
}
tr:hover {
background-color: #f5f5f5; /* Light gray hover */
}
th {
background-color: #333;
color: white;
text-transform: uppercase;
}
</style>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td>John</td>
<td>30</td>
<td>USA</td>
</tr>
<tr>
<td>Anna</td>
<td>25</td>
<td>UK</td>
</tr>
</table>Advanced Styling with Borders and Shadows
Create visually appealing tables with custom borders and shadows.
Example: Styled Borders and Shadows
<style>
table {
border-collapse: collapse;
margin: 20px auto;
width: 90%;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
th, td {
border: 1px solid #ddd;
padding: 10px;
text-align: left;
}
th {
background-color: #6c757d; /* Gray header */
color: white;
}
tr:nth-child(odd) {
background-color: #f9f9f9; /* Light gray rows */
}
</style>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td>John</td>
<td>30</td>
<td>USA</td>
</tr>
<tr>
<td>Anna</td>
<td>25</td>
<td>UK</td>
</tr>
</table>Tips for Styling Tables
- Use Consistent Colors: Match table styles with your website’s theme.
- Add Padding: Ensure text doesn’t feel cramped.
- Test Responsiveness: Use media queries to adjust styles for smaller screens.
- Use Hover Effects: Make tables interactive to enhance UX.
Conclusion
Styling HTML tables transforms boring data grids into engaging visuals. By using CSS, you can add borders, padding, shadows, and hover effects to make your tables stand out.
Explore more web development tutorials at The Coding College and elevate your coding skills.