Table Styling
If you want your tables to look better, use CSS(Table Styling).
HTML Table - Zebra Stripes
An attractive zebra-striped look can be achieved by adding a background color to each other table row.
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
Use the :nth-child(even) selector in the following manner to style each additional table row element:
Example
tr:nth-child(even) {
background-color: #D6EEEE;
}
Note: If you use (odd) instead of (even), the styling will occur on row 1,3,5 etc. instead of 2,4,6 etc.
HTML Table - Vertical Zebra Stripes
To make vertical zebra stripes, style every other column, instead of every other row.
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
Set the : nth-child(even) for table data elements like this:
Example
td:nth-child(even), th:nth-child(even) {
background-color: #D6EEEE;
}
Note: If you want the styling to appear on both headers and regular table cells, place the :nth-child() selector on both the th and td elements.
Combine Vertical and Horizontal Zebra Stripes
Stripes can be added to every other row and column by combining the styling from the first two instances.
Use of a translucent color will result in an effect of overlapping.
Use an rgba() color to specify the transparency of the color:
Example
tr:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}
th:nth-child(even),td:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}
Horizontal Dividers
| First Name | Last Name | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
You will get a table with horizontal dividers if you just define borders at the bottom of each row.
To create horizontal dividers, give each tr element the border-bottom property:
Example
tr {
border-bottom: 2px solid #ddd;
}
Hoverable Table
To highlight table rows when the mouse is over them, use the :hover selector on tr:
| First Name | Last Name | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
Example
tr:hover {background-color: #D6EEEE;}
Table Styling
CSS
zebra stripes
vertical zebra stripes
horizontal dividers
hoverable table
nth-child
rgba
hover
HTML
HTML5
HTML tutorials
Learn HTML
Free HTML tutorials
HTML Example
HTML Explained
Mastering table styling in HTML is a crucial skill for any web developer. In this blog section, we’ll dive into the various techniques and best practices for creating visually appealing and functional tables.
One of the most common table styling techniques is the use of zebra stripes. By applying alternating background colors to the table rows, you can create a clear visual separation, making the data easier to read. This can be achieved using the `:nth-child()` CSS selector.
In addition to standard zebra stripes, you can also implement vertical zebra stripes by applying the striping to the table columns instead of the rows. This can be particularly useful for wide tables with a large number of columns.
Another effective table styling technique is the use of horizontal dividers. By adding a border-bottom to the table rows, you can create a clear separation between each record, enhancing the overall readability of the table.
To make your tables more interactive, you can add a hover effect that changes the background color or highlights the hovered row. This can be achieved using the `:hover` pseudo-class in CSS.
Finally, you can experiment with more advanced table styling techniques, such as using the `rgba()` function to apply semi-transparent background colors, or leveraging the `:nth-child()` selector to target specific rows or columns for unique styling.
By mastering these table styling techniques, you can create visually appealing and user-friendly tables that enhance the overall user experience of your web applications.
Tables are a fundamental element in HTML, and styling them can significantly enhance the overall presentation and user experience of a web page. In this blog section, we will explore various techniques for styling tables using CSS.
One popular technique is creating zebra stripes, which involves alternating the background color of table rows to improve readability. This can be achieved using the `:nth-child()` selector in CSS. Vertical zebra stripes can also be created by applying styles to table columns.
Another useful technique is adding horizontal dividers between table rows, which can be accomplished by styling the `border-bottom` property. This can help visually separate the data and make the table more organized.
Additionally, you can make your tables more interactive by adding a hover effect. This can be done by targeting the `:hover` pseudo-class and applying styles to change the background color or highlight the hovered row.
Finally, you can experiment with more advanced table styling techniques, such as using the `rgba()` function to apply semi-transparent colors or incorporating custom icons and graphics to enhance the overall aesthetic of your tables.
By exploring these table styling techniques, you can create visually appealing and user-friendly tables that seamlessly integrate with the design of your web pages
