HTML Table Styling
What is Table Styling?
Table styling involves using CSS to make tables visually appealing and functional. This includes colors, fonts, backgrounds, hover effects, and responsive design. Well-styled tables improve readability and user experience.
Basic Table Styling
Here's a basic styled table:
Example
<style>
table {
border-collapse: collapse;
width: 100%;
font-family: Arial, sans-serif;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
th {
background-color: #4b3190;
color: white;
font-weight: bold;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
<td>London</td>
</tr>
</table>Zebra Stripes
Alternate row colors (zebra stripes) improve readability:
Example
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
th {
background-color: #4b3190;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:nth-child(odd) {
background-color: white;
}
</style>
<table>
<tr>
<th>Product</th>
<th>Price</th>
<th>Stock</th>
</tr>
<tr>
<td>Apple</td>
<td>$1.00</td>
<td>50</td>
</tr>
<tr>
<td>Banana</td>
<td>$0.50</td>
<td>30</td>
</tr>
<tr>
<td>Orange</td>
<td>$0.75</td>
<td>40</td>
</tr>
</table>Hover Effects
Add hover effects to highlight rows when users hover over them:
Example
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
th {
background-color: #4b3190;
color: white;
}
tr:hover {
background-color: #fdbb30;
cursor: pointer;
}
</style>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
<td>London</td>
</tr>
</table>Rounded Corners
Add rounded corners to tables using border-radius:
Example
<style>
table {
border-collapse: separate;
border-spacing: 0;
width: 100%;
border-radius: 10px;
overflow: hidden;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
}
th {
background-color: #4b3190;
color: white;
}
th:first-child {
border-top-left-radius: 10px;
}
th:last-child {
border-top-right-radius: 10px;
}
</style>
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>Responsive Tables
Make tables responsive for mobile devices:
Example
<style>
.table-container {
overflow-x: auto;
}
table {
border-collapse: collapse;
width: 100%;
min-width: 600px;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
th {
background-color: #4b3190;
color: white;
}
@media (max-width: 600px) {
table {
font-size: 12px;
}
th, td {
padding: 8px;
}
}
</style>
<div class="table-container">
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
</table>
</div>Best Practices
- Use consistent styling: Maintain consistent colors and fonts
- Ensure readability: Use sufficient contrast between text and background
- Add hover effects: Provide visual feedback for interactivity
- Use zebra stripes: Alternate row colors improve readability
- Make it responsive: Ensure tables work on mobile devices
- Test accessibility: Ensure styled tables remain accessible