Full Example of HTML Table Styling
If you add a background color on every other table row, you will get a nice zebra stripes effect. Here we put a style calls ""zebra stripes effect" One by one rows colors use. To style every other table row element, use the :nth-child(even) selector like this:
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
table { border-collapse: collapse; width: 100%;
}
th, td { text-align: left; padding: 8px;
}
tr:nth-child(even) { background-color: #D6EEEE;
}
</style>
</head>
<body>
<h2>Zebra Striped Table</h2>
<p>For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table rows:</p>
<table> <tr> <th>First Name</th> <th>Last Name</th> <th>Points</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> <td>$100</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> <td>$150</td> </tr> <tr> <td>Joe</td> <td>Swanson</td> <td>$300</td> </tr> <tr> <td>Cleveland</td> <td>Brown</td> <td>$250</td> </tr>
</table>
</body>
</html>
Output should be:
| Full Example of HTML Table Styling | HTML Table Styling |
| HTML Table Styling | HTML Table Styling |
| How to create HTML Table - Zebra Stripes | HTML Table Styling |
| How to create HTML Table - Vertical Zebra Stripes | HTML Table Styling |
| How to create HTML Table Combine Vertical and Horizontal Zebra Stripes | HTML Table Styling |
| How to create HTML Table Horizontal Dividers | HTML Table Styling |
| How to create HTML Hoverable Table | HTML Table Styling |
|
Type
: |
html |
|
Category
: |
Web Tutorial |
|
Sub Category
: |
HTML Table Styling |
|
Uploaded by
: |
Admin |