HTML tables are a powerful way to display tabular data. Styling these tables enhances readability, making the information more visually appealing. In this tutorial, we’ll explore different methods to style HTML tables, including basic structure, applying borders, and advanced techniques like zebra stripes.
Understanding Normal HTML Tables #
A normal HTML table doesn’t have any specific styling beyond the default browser-rendered appearance. Let’s first create a basic table and then apply some styles to improve its look and feel.
Defining a Basic HTML Table
Below is an example of a normal table. We’ve set the border attribute for each cell and used unique IDs for the table elements, which will help us style them later.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Basic HTML Table</title>
</head>
<body>
<table id="basicTable" border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Aman Gupta</td>
<td>6000</td>
</tr>
<tr>
<td>Megha Singh</td>
<td>7500</td>
</tr>
</table>
</body>
</html>Popular Table Styling Techniques #
We can style HTML tables in many ways to make them more readable and visually appealing. Some common styling techniques include:
1. Border Collapse
Using the border-collapse property, we can control the spacing between table cells. Setting it to collapse removes the gap between cells, while separate adds spacing.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#separateTable {
border-collapse: separate;
}
#collapseTable {
border-collapse: collapse;
}
</style>
</head>
<body>
<table id="separateTable" border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Aman Gupta</td>
<td>6000</td>
</tr>
<tr>
<td>Megha Singh</td>
<td>7500</td>
</tr>
</table>
<br />
<table id="collapseTable" border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Aman Gupta</td>
<td>6000</td>
</tr>
<tr>
<td>Megha Singh</td>
<td>7500</td>
</tr>
</table>
</body>
</html>2. Horizontal Zebra Stripes
Zebra striping enhances readability by applying alternating colors to rows. You can use the :nth-child(even) selector to alternate the background color of every other row.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Aman Gupta</td>
<td>6000</td>
</tr>
<tr>
<td>Megha Singh</td>
<td>7500</td>
</tr>
<tr>
<td>Rahul Verma</td>
<td>8200</td>
</tr>
</table>
</body>
</html>3. Vertical Zebra Stripes
In addition to rows, you can apply zebra striping to columns. This helps users differentiate between different columns.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
td:nth-child(even),
th:nth-child(even) {
background-color: #D6EEEE;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
<th>Department</th>
</tr>
<tr>
<td>Aman Gupta</td>
<td>6000</td>
<td>Marketing</td>
</tr>
<tr>
<td>Megha Singh</td>
<td>7500</td>
<td>HR</td>
</tr>
</table>
</body>
</html>4. Combining Horizontal & Vertical Zebra Stripes
Combining both horizontal and vertical zebra stripes further enhances the table’s readability, especially when the table contains multiple rows and columns.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
tr:nth-child(even) {
background-color: #f9f9f9;
}
th:nth-child(even),
td:nth-child(even) {
background-color: rgba(212, 212, 255, 0.4);
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
<th>Department</th>
</tr>
<tr>
<td>Aman Gupta</td>
<td>6000</td>
<td>Marketing</td>
</tr>
<tr>
<td>Megha Singh</td>
<td>7500</td>
<td>HR</td>
</tr>
<tr>
<td>Rahul Verma</td>
<td>8200</td>
<td>Finance</td>
</tr>
</table>
</body>
</html>5. Text Alignment
You can align text within the table cells by using the text-align and vertical-align properties for better presentation of the content.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
td,
th {
text-align: center;
vertical-align: middle;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Aman Gupta</td>
<td>6000</td>
</tr>
<tr>
<td>Megha Singh</td>
<td>7500</td>
</tr>
</table>
</body>
</html>6. Hover Effects
Adding a hover effect to table rows improves user interaction. The following example changes the row background color when the mouse pointer hovers over it.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
tr:hover {
background-color: #D6EEEE;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Aman Gupta</td>
<td>6000</td>
</tr>
<tr>
<td>Megha Singh</td>
<td>7500</td>
</tr>
</table>
</body>
</html>Styling HTML tables allows you to present tabular data in a clean, readable format. With CSS, you can create everything from simple bordered tables to highly interactive and visually appealing layouts using hover effects and zebra stripes. Keep experimenting with these styles to build tables that suit your design needs.
Want to learn HTML with an instructor, either offline or online? Find experienced tutors near you and join Coaching Wallah—completely free for students!
Leave your comment