Tuesday, June 21, 2022

HTML Table Styling


Use CSS to make your tables look better.


HTML Table - Zebra Stripes

If you add a background color on every other table row, you will get a nice zebra stripes effect.

1234
5678
9101112
13141516
17181920

To style every other table row element, use the :nth-child(even) selector like this:

Example

tr:nth-child(even) {
  background-color: #D6EEEE;
}
Try it Yourself »
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.

1234
5678
9101112
13141516
17181920

Set the :nth-child(even) for table data elements like this:

Example

td:nth-child(even), th:nth-child(even) {
  background-color: #D6EEEE;
}
Try it Yourself »

Note: Put the :nth-child() selector on both th and td elements if you want to have the styling on both headers and regular table cells.

Combine Vertical and Horizontal Zebra Stripes

You can combine the styling from the two examples above and you will have stripes on every other row and every other column.

If you use a transparent color you will get an overlapping effect.

         
         
         
         
         

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);
}
Try it Yourself »

Horizontal Dividers

First NameLast NameSavings
PeterGriffin$100
LoisGriffin$150
JoeSwanson$300

If you specify borders only at the bottom of each table row, you will have a table with horizontal dividers.

Add the border-bottom property to all tr elements to get horizontal dividers:

Example

tr {
  border-bottom: 1px solid #ddd;
}
Try it Yourself »

Hoverable Table

Use the :hover selector on tr to highlight table rows on mouse over:

First NameLast NameSavings
PeterGriffin$100
LoisGriffin$150
JoeSwanson$300

Example

tr:hover {background-color: #D6EEEE;}
Try it Yourself » 

SHARE THIS

Author:

urdufundastory.blogspot.com is the first of its kind of trendsetting venture existent in Pakistan. It is for the first time in the history of this nation that a large scale project of such nature, evolved from an extraordinarily revolutionizing concept to a practical fulfillment.

0 Comments: