CSS zebra crossing table creation

CSS Zebra Crossing Table Creation

CSS Zebra Crossing Table is a common web design element, often used to provide better readability and aesthetics. A zebra table uses alternating background colors between rows in a table to create a horizontal striped effect. In this article, we’ll detail how to create a zebra table using CSS, including sample code and a demo.

Basic Zebra Table Style

First, let’s create a basic HTML table and apply a zebra stripe effect to it using CSS. The following is a simple HTML table:

<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
<tr>
<td>Zhang San</td>
<td>25</td>
<td>Male</td>
</tr>
<tr>
<td>Li Si</td>
<td>30</td>
<td>Female</td>
</tr>
<tr>
<td>Wang Wu</td>
<td>22</td>
<td>Male</td>
</tr>
</table>

The above code creates a simple table containing name, age, and gender information. Next, we’ll use CSS to add zebra stripes to the table. Here’s the CSS code:

table {
width: 100%;
border-collapse: collapse;
}

th, td {
padding: 8px;
text-align: left;
}

tr:nth-child(even) {
background-color: #f2f2f2;
}

tr:nth-child(odd) {
background-color: #ffffff;
}

In the CSS code above, we first set the table’s width to 100% and disable border collapsing. Then, we set padding and text alignment for the table header and cells. Finally, we use the :nth-child() selector to set different background colors for the odd and even rows of the table, creating a zebra stripe effect.

Demo

Let’s see the above code in action. Here’s a table with a zebra stripe effect:

As you can see, the rows in the table are displayed in alternating gray and white background colors, creating a zebra stripe effect. This design not only makes the table easier to read but also adds visual appeal.

Advanced Zebra Crossing Table Styles

In addition to the basic zebra crossing styles, we can also customize more CSS properties to create more beautiful and unique zebra crossing tables. Here’s a CSS code example with more styles:

table {
width: 100%;
border-collapse: collapse;
}

th, td {
padding: 12px;
text-align: center;
border-bottom: 1px solid #ddd;
}

tr:nth-child(even) {
background-color: #f7f7f7;
}

tr:nth-child(odd) {
background-color: #e5e5e5;
}

tr:hover {
background-color: #d9d9d9;
}

th {
background-color: #f2f2f2;
color: #333;
text-transform: uppercase;
}

td:first-child {
font-weight: bold; 
}

In the code above, we’ve added background color, text color, and capitalization to the table header. We’ve also added hover effects to the table rows using the :hover pseudo-class, making it easier for users to identify each row when hovering. Additionally, we’ve applied a bold font effect to the first cell in the table to highlight its contents.

Advanced Example

Let’s see the above CSS code in action. Here’s a zebra stripe table with more styles:

As you can see, this table not only applies the zebra stripe effect, but also adds more style attributes to make it look more attractive.

Summary

Creating zebra stripe tables with CSS is a simple yet effective design technique that can enhance the readability and aesthetics of tables. In this article, we introduced how to use CSS to add a zebra stripe effect to tables and provided some sample code and demonstrations.