HTML tables look plain by default — but with a few CSS properties, you can turn them into clean, professional, and visually appealing data tables.
This chapter will show you how to add borders, colors, spacing, hover effects, and full styling control over your tables.
Default Table Look
By default, an HTML table only shows data without borders or spacing.
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alissha</td>
<td>28</td>
</tr>
</table>
Output:
A plain table with no visible borders or styles.
Adding Basic Borders
You can add a border to your table using either the HTML border attribute (not recommended anymore) or CSS styling.
Using HTML Attribute (Old Method)
<table border="1">
<tr><th>Name</th><th>Age</th></tr>
<tr><td>Alissha</td><td>28</td></tr>
</table>⚠️ Not recommended in HTML5 — use CSS instead.
Using CSS (Modern Method)
<style>
table, th, td {
border: 1px solid black;
}
</style>
<table>
<tr><th>Name</th><th>Age</th></tr>
<tr><td>Alissha</td><td>28</td></tr>
</table>Explanation:
border: 1px solid black;adds a one-pixel black border.- The same rule applies to
<table>,<th>, and<td>.
Removing Double Borders
When adding borders to both <table> and <td>, you may see double borders.
Use the border-collapse property to fix this.
<style>
table {
border-collapse: collapse;
width: 60%;
}
th, td {
border: 1px solid #29AB87;
padding: 8px;
text-align: left;
}
</style>
<table>
<tr><th>Name</th><th>Age</th></tr>
<tr><td>Swapnil</td><td>30</td></tr>
<tr><td>Alissha</td><td>28</td></tr>
</table>Adding Table Padding & Spacing
Padding — space inside a cell
th, td {
padding: 10px;
}
Spacing — space between cells
table {
border-spacing: 5px;
}
💡 Tip: border-collapse: collapse; removes cell spacing, while border-spacing adds it.
Adding Colors & Backgrounds
You can style your table cells using CSS background and text colors.
<style>
th {
background-color: #29AB87;
color: white;
}
td {
background-color: #f9f9f9;
}
</style>Output:
- Header row has a green background and white text.
- Table data has a soft gray background.
Adding Hover Effects
Hover effects make tables more interactive and readable.
<style>
tr:hover {
background-color: #eafaf3;
}
</style>
When you move your mouse over a row, it changes color.
Aligning Text
You can align text left, center, or right using text-align.
th {
text-align: center;
}
td {
text-align: right;
}
Table Width, Height, and Alignment
You can set table dimensions using CSS:
table {
width: 100%;
height: auto;
}
To center your table:
table {
margin-left: auto;
margin-right: auto;
}
Stylish Table Example
Here’s a complete example showing modern styling, hover, and even zebra stripes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Table Styling Example</title>
<style>
table {
width: 80%;
border-collapse: collapse;
margin: 20px auto;
font-family: Arial, sans-serif;
}
caption {
caption-side: top;
font-weight: bold;
margin-bottom: 10px;
color: #29AB87;
}
th, td {
border: 1px solid #ddd;
padding: 10px 15px;
text-align: left;
}
th {
background-color: #29AB87;
color: #fff;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:hover {
background-color: #e6f5ef;
}
</style>
</head>
<body>
<h2>Styled Employee Data Table</h2>
<table>
<caption>Employee Information</caption>
<tr>
<th>Name</th>
<th>Department</th>
<th>Salary</th>
</tr>
<tr>
<td>Alissha</td>
<td>Design</td>
<td>$5000</td>
</tr>
<tr>
<td>Swapnil</td>
<td>Development</td>
<td>$6000</td>
</tr>
<tr>
<td>Rahul</td>
<td>Marketing</td>
<td>$4500</td>
</tr>
</table>
</body>
</html>What you’ll see:
- A centered table with borders, background colors, zebra stripes, and hover effects.
- Beautiful readability and professional structure.
Responsive Table Design (for Mobile)
To make your table scrollable on small screens:
<div style="overflow-x:auto;">
<table> ... </table>
</div>
This ensures that your table does not break layout on mobile devices.
Conclusion
HTML tables become visually appealing with just a few CSS rules.
By adding borders, colors, padding, and hover effects, you make your tables cleaner, more readable, and mobile-friendly.
Remember: always use CSS for styling, not old HTML attributes.
