CSS Tables
What are CSS Tables?
CSS Tables are used to improve the appearance of HTML tables. By default, HTML tables display simple rows and columns, but CSS allows you to change their colors, borders, spacing, alignment, hover effects, and overall layout. Well-designed tables make data easier to read and create a more professional-looking webpage.
Why Use CSS Tables?
CSS helps create attractive and readable tables without changing the HTML structure. You can style headers, alternate row colors, add hover effects, adjust borders, and make tables responsive for different screen sizes.
Basic CSS Table Syntax
<!DOCTYPE html>
<html>
<head>
<style>
table{
border:1px solid black;
}
th,td{
border:1px solid black;
padding:10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
</body>
</html>Step 1: Add Borders to a Table
Borders make tables easier to read by separating rows and columns. You can apply borders to the table, table headers, and table cells.
<!DOCTYPE html>
<html>
<head>
<style>
table{
border-collapse:collapse;
}
table,th,td{
border:2px solid #333;
}
th,td{
padding:12px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Course</th>
<th>Duration</th>
</tr>
<tr>
<td>HTML</td>
<td>2 Weeks</td>
</tr>
</table>
</body>
</html>Step 2: Style the Table Header
The table header can be highlighted using background colors, text colors, and bold fonts to distinguish it from the table data.
<!DOCTYPE html>
<html>
<head>
<style>
table{
border-collapse:collapse;
}
th{
background:#007BFF;
color:white;
padding:12px;
}
td{
padding:12px;
border:1px solid #ddd;
}
</style>
</head>
<body>
<table>
<tr>
<th>Student</th>
<th>Marks</th>
</tr>
<tr>
<td>Emma</td>
<td>92</td>
</tr>
</table>
</body>
</html>Step 3: Add Zebra Striping
Zebra striping uses alternating row colors to improve readability, especially in large tables.
<!DOCTYPE html>
<html>
<head>
<style>
table{
border-collapse:collapse;
width:100%;
}
th{
background:#28a745;
color:white;
}
th,td{
padding:12px;
border:1px solid #ddd;
}
tr:nth-child(even){
background:#f2f2f2;
}
</style>
</head>
<body>
<table>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>Laptop</td>
<td>$900</td>
</tr>
<tr>
<td>Mouse</td>
<td>$25</td>
</tr>
<tr>
<td>Keyboard</td>
<td>$40</td>
</tr>
</table>
</body>
</html>Step 4: Add Hover Effect
Hover effects highlight the row when the mouse pointer moves over it, making tables easier to read.
<!DOCTYPE html>
<html>
<head>
<style>
table{
border-collapse:collapse;
width:100%;
}
th{
background:#ff9800;
color:white;
}
th,td{
border:1px solid #ddd;
padding:12px;
}
tr:hover{
background:#fff3cd;
}
</style>
</head>
<body>
<table>
<tr>
<th>City</th>
<th>Country</th>
</tr>
<tr>
<td>Paris</td>
<td>France</td>
</tr>
<tr>
<td>Tokyo</td>
<td>Japan</td>
</tr>
</table>
</body>
</html>Step 5: Create a Responsive Table
Wrapping a table inside a container with horizontal scrolling prevents the table from breaking on smaller screens.
<!DOCTYPE html>
<html>
<head>
<style>
.table-container{
overflow-x:auto;
}
table{
width:100%;
border-collapse:collapse;
}
th{
background:#007BFF;
color:white;
}
th,td{
border:1px solid #ddd;
padding:12px;
}
</style>
</head>
<body>
<div class="table-container">
<table>
<tr>
<th>Employee</th>
<th>Department</th>
<th>Salary</th>
</tr>
<tr>
<td>David</td>
<td>Sales</td>
<td>$4500</td>
</tr>
</table>
</div>
</body>
</html>Complete CSS Table Example
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family:Arial;
background:#f5f9ff;
}
table{
width:100%;
border-collapse:collapse;
}
th{
background:#007BFF;
color:white;
}
th,td{
border:1px solid #ddd;
padding:12px;
text-align:left;
}
tr:nth-child(even){
background:#f8f9fa;
}
tr:hover{
background:#dbeafe;
}
</style>
</head>
<body>
<table>
<tr>
<th>Course</th>
<th>Level</th>
<th>Duration</th>
</tr>
<tr>
<td>HTML</td>
<td>Beginner</td>
<td>2 Weeks</td>
</tr>
<tr>
<td>CSS</td>
<td>Intermediate</td>
<td>3 Weeks</td>
</tr>
<tr>
<td>JavaScript</td>
<td>Advanced</td>
<td>6 Weeks</td>
</tr>
</table>
</body>
</html>Advantages of CSS Tables
Best Practices
- Use border-collapse: collapse; for clean borders.
- Add enough padding for better readability.
- Highlight table headers with a different background color.
- Use zebra striping for large tables.
- Add hover effects for interactive tables.
- Keep text aligned consistently.
- Make tables responsive for mobile devices.
- Avoid using too many colors and borders.
Web Resources on CSS Tables
1. MDN Web Docs : CSS table
2. MDN Web Docs : Styling tables
3. CSS Tricks.com : Accessible, Simple, Responsive Tables
4. Dev.to : A Guide to Styling Tables
🧪 Test Your CSS Code
Edit the CSS code on the left and click “Run Code” to see the result on the right.
Click “Run Code” to see the result here.