While HTML provides the structure for tables, CSS is what makes them visually appealing and easy to read. In this lesson, we'll explore best practices for styling tables to create professional, user-friendly data presentations.
Basic Table Styling
Without any CSS, HTML tables look plain with no borders. Let's start with fundamental styling that makes tables readable.
basic-styled-table.html
<style>
table {
width: 100%;
border-collapse: collapse;
font-family: Arial, sans-serif;
}
th, td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
th {
background-color: #4CAF50;
color: white;
font-weight: bold;
}
</style>
<table>
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Stock</th>
</tr>
</thead>
<tbody>
<tr>
<td>Laptop</td>
<td>$999</td>
<td>15</td>
</tr>
<tr>
<td>Mouse</td>
<td>$25</td>
<td>150</td>
</tr>
</tbody>
</table>Understanding border-collapse
The border-collapse property is crucial for table styling. It determines whether table borders are separated or merged.
border-collapse.css
/* Collapsed borders - cleaner look */
table {
border-collapse: collapse;
}
/* Separated borders - distinct cells */
table {
border-collapse: separate;
border-spacing: 5px; /* Gap between cells */
}Striped (Zebra) Rows
Alternating row colors improve readability, especially in tables with many rows. This pattern is called "zebra striping."
striped-table.html
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #2c3e50;
color: white;
}
/* Stripe every other row */
tbody tr:nth-child(even) {
background-color: #f2f2f2;
}
/* Hover effect */
tbody tr:hover {
background-color: #e0e0e0;
}
</style>
<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>john@example.com</td>
<td>Sales</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>jane@example.com</td>
<td>Marketing</td>
</tr>
<tr>
<td>Bob Johnson</td>
<td>bob@example.com</td>
<td>IT</td>
</tr>
</tbody>
</table>Responsive Tables
Tables can be challenging on small screens. Here are strategies to make them mobile-friendly.
Horizontal Scroll Method
responsive-table.html
<style>
.table-container {
overflow-x: auto;
margin: 20px 0;
}
table {
width: 100%;
min-width: 500px; /* Prevents table from getting too narrow */
border-collapse: collapse;
}
th, td {
padding: 10px;
border: 1px solid #ddd;
white-space: nowrap; /* Prevents text wrapping */
}
</style>
<div class="table-container">
<table>
<thead>
<tr>
<th>Date</th>
<th>Transaction</th>
<th>Amount</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>2024-01-15</td>
<td>Office Supplies</td>
<td>$245.50</td>
<td>Completed</td>
</tr>
</tbody>
</table>
</div>Stacked Layout for Mobile
stacked-mobile.css
/* Desktop view - normal table */
table {
width: 100%;
border-collapse: collapse;
}
/* Mobile view - stack cells */
@media screen and (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
}
thead tr {
display: none; /* Hide header on mobile */
}
tr {
margin-bottom: 15px;
border: 1px solid #ddd;
}
td {
text-align: right;
padding-left: 50%;
position: relative;
}
td::before {
content: attr(data-label);
position: absolute;
left: 10px;
font-weight: bold;
text-align: left;
}
}Professional Table Styling
Here's a complete example with modern, professional styling that you can adapt for your projects.
professional-table.html
<style>
.data-table {
width: 100%;
border-collapse: collapse;
background-color: white;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
border-radius: 8px;
overflow: hidden;
}
.data-table thead {
background: linear-gradient(to right, #667eea, #764ba2);
}
.data-table th {
padding: 16px;
text-align: left;
color: white;
font-weight: 600;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 0.5px;
}
.data-table td {
padding: 14px 16px;
border-bottom: 1px solid #e5e7eb;
}
.data-table tbody tr:last-child td {
border-bottom: none;
}
.data-table tbody tr:hover {
background-color: #f9fafb;
transition: background-color 0.2s ease;
}
/* Status badges */
.status-badge {
padding: 4px 12px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
}
.status-active {
background-color: #d1fae5;
color: #065f46;
}
.status-pending {
background-color: #fed7aa;
color: #92400e;
}
</style>
<table class="data-table">
<thead>
<tr>
<th>Customer</th>
<th>Order ID</th>
<th>Amount</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice Cooper</td>
<td>#12345</td>
<td>$342.00</td>
<td><span class="status-badge status-active">Active</span></td>
</tr>
<tr>
<td>Bob Wilson</td>
<td>#12346</td>
<td>$198.50</td>
<td><span class="status-badge status-pending">Pending</span></td>
</tr>
</tbody>
</table>Accessibility Best Practices
Good table styling should enhance accessibility, not hinder it. Keep these principles in mind:
♿ Accessibility Principles:
- Sufficient contrast: Ensure text has enough contrast against backgrounds (minimum 4.5:1 ratio for normal text).
- Readable font sizes: Use at least 14-16px for body text.
- Clear hover states: Help users track rows with visible hover effects.
- Adequate padding: Give content breathing room with proper cell padding.
- Avoid color-only indicators: Don't rely solely on color to convey information (use icons or text too).
Common Styling Mistakes to Avoid
avoid-these.css
/* DON'T: Too little padding - hard to read */
td {
padding: 2px;
}
/* DO: Adequate padding */
td {
padding: 12px 16px;
}
/* DON'T: Fixed pixel widths on mobile */
table {
width: 800px;
}
/* DO: Flexible widths */
table {
width: 100%;
max-width: 800px;
}
/* DON'T: Overcomplicated borders */
table {
border: 5px double red;
}
/* DO: Simple, clean borders */
table {
border: 1px solid #ddd;
}Practical Styling Tips
Align Numbers to the Right
For better readability, align numeric data to the right:
number-alignment.css
td.number {
text-align: right;
font-variant-numeric: tabular-nums; /* Equal-width numbers */
}Sticky Table Headers
Keep headers visible when scrolling through long tables:
sticky-headers.css
thead th {
position: sticky;
top: 0;
background-color: #2c3e50;
z-index: 10;
}Key Takeaways
- Use
border-collapse: collapsefor cleaner tables - Add padding to cells for better readability (12-16px recommended)
- Use zebra striping for tables with many rows
- Add hover effects to help users track rows
- Make tables responsive with scrolling or stacking techniques
- Ensure sufficient color contrast for accessibility
- Align numbers to the right for easier comparison
- Keep styling simple and consistent
What's Next?
Congratulations! You've completed the Tables section. Next, we'll move into Forms, where you'll learn how to create interactive elements that collect user input. Forms are essential for any website that needs to gather information from visitors.