HTML Table Styling
Last Updated :
24 Jan, 2024
HTML Table Styling offers various styling techniques to make the table more presentable and attractive. The article will cover various HTML Table Styling including, HTMLÂ Table Styling-Zebra Stripes using tr:nth-child(even)
, Vertical Zebra Stripes using td:nth-child(even) and th:nth-child(even)
and many more using different CSS properties.
Syntax
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 2px;
text-align: center;
}
tr:nth-child(even) {
background-color: rgb(190, 250, 230);
}
HTMLÂ Table Styling with Zebra Stripes
HTML Table Styling with Zebra Stripes uses the :nth-child(even)
a selector to apply a background color to every even table row, creating a visually distinct zebra stripe pattern. Use the :nth-child(odd)
a selector to apply a background color to every odd table row.
Example: Illustration of the HTMLÂ table Zebra Stripes using tr:nth-child(even)
.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
content=" width = device -width,
initial-scale = 1 .0">
< title >HTML Table Styling</ title >
< style >
h1,h3 {
text-align: center;
color: green;
}
table {
width: 100%;
border-collapse: collapse;
}
th,
td {
padding: 2px;
text-align: center;
}
tr:nth-child(even) {
background-color: rgb(190, 250, 230);
}
</ style >
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
< h3 >HTMLÂ Table Styling with Zebra Stripes</ h3 >
< table >
< tr >
< th >Name</ th >
< th >Class</ th >
< th >
Roll No
</ th >
</ tr >
< tr >
< td >Mahima</ td >
< td >10</ td >
< td >1</ td >
</ tr >
< tr >
< td >Krishn</ td >
< td >8</ td >
< td >3</ td >
</ tr >
< tr >
< td >Shivika</ td >
< td >8</ td >
< td >5</ td >
</ tr >
</ table >
</ body >
</ html >
|
Output:
HTMLÂ Table Styling with Vertical Zebra Stripes
HTML Table Styling with Vertical Zebra Stripes uses the :nth-child(even)
selector for both the elements (<td> and <th>) to apply a background color to every even table column, creating a visually distinct zebra stripe pattern. Use the :nth-child(odd)
selector to apply a background color to every odd table column.
Example: Illustrattion of the styling on Vertical Zebra Stripes using td:nth-child(even) and th:nth-child(even)
.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
content=" width = device -width,
initial-scale = 1 .0">
< title >HTML Table Styling</ title >
< style >
h1,h3 {
text-align: center;
color: green;
}
table {
width: 100%;
border-collapse: collapse;
}
th,
td {
padding: 2px;
text-align: center;
}
td:nth-child(even) {
background-color: rgb(196, 244, 228);
}
th:nth-child(even) {
background-color: rgb(196, 244, 228);
}
</ style >
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
< h3 >HTMLÂ Table Styling with
Vertical Zebra Stripes
</ h3 >
< table >
< tr >
< th >Name</ th >
< th >Class</ th >
< th >Section</ th >
< th >
Roll No
</ th >
</ tr >
< tr >
< td >Mahima</ td >
< td >10</ td >
< td >A</ td >
< td >1</ td >
</ tr >
< tr >
< td >Krishn</ td >
< td >8</ td >
< td >A</ td >
< td >3</ td >
</ tr >
< tr >
< td >Shivika</ td >
< td >8</ td >
< td >A</ td >
< td >5</ td >
</ tr >
</ table >
</ body >
</ html >
|
Output:
Combine Vertical and Horizontal Zebra Stripes
HTML Table Styling with Combine Vertical and Horizontal Zebra Stripes uses the :nth-child(even)
selector for both the elements (<td>, <th>, and <td>) to apply a background color to every even table column and row, creating a visually distinct zebra stripe pattern.
Example: Illustration of combining the Vertical and Horizontal Zebra Stripes using td:nth-child(even) and th:nth-child(even).
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
content=" width = device -width,
initial-scale = 1 .0">
< title >HTML Table Styling</ title >
< style >
h1,
h3 {
text-align: center;
color: green;
}
table {
width: 100%;
}
table,
th,
td {
border-collapse: collapse;
padding: 10px;
text-align: center;
}
tr:nth-child(even) {
background-color: rgba(89, 208, 97, 0.4);
}
th:nth-child(even),
td:nth-child(even) {
background-color: rgba(89, 208, 97, 0.4);
}
</ style >
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
< h3 >HTML Table Styling with Combine
Vertical and Horizontal Zebra Stripes
</ h3 >
< table >
< tr >
< th >Name</ th >
< th >Class</ th >
< th >Section</ th >
< th >Roll No</ th >
< th >School</ th >
</ tr >
< tr >
< td >Mahima</ td >
< td >10</ td >
< td >A</ td >
< td >1</ td >
< td >MVM</ td >
</ tr >
< tr >
< td >Krishn</ td >
< td >8</ td >
< td >A</ td >
< td >3</ td >
< td >MVM</ td >
</ tr >
< tr >
< td >Shivika</ td >
< td >8</ td >
< td >A</ td >
< td >5</ td >
< td >MVM</ td >
</ tr >
</ table >
</ body >
</ html >
|
Output:
Horizontal Dividers
Horizontal Dividers after each row can be achieved using the border-bottom property.
Example: Illustration of the Horizontal Dividers using border-bottom property.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
content=" width = device -width,
initial-scale = 1 .0">
< title >HTML Table Styling</ title >
< style >
h1,
h3 {
text-align: center;
color: green;
}
table {
width: 100%;
border-collapse: collapse;
}
th,
td {
padding: 2px;
text-align: center;
}
tr {
border-bottom: 2px solid black;
}
</ style >
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
< h3 >Table with Horizontal Dividers
</ h3 >
< table >
< thead >
< tr >
< th >Name</ th >
< th >Class</ th >
< th >
Roll No
</ th >
</ tr >
</ thead >
< tbody >
< tr >
< td >Mahima</ td >
< td >10</ td >
< td >1</ td >
</ tr >
< tr >
< td >Krishn</ td >
< td >8</ td >
< td >3</ td >
</ tr >
< tr >
< td >Shivika</ td >
< td >8</ td >
< td >5</ td >
</ tr >
</ tbody >
</ table >
</ body >
</ html >
|
Output:
Hoverable Table
The hoverable Table effect on each row can be achieved by using:hover selector to the <tr> element
Example: Illustration of creating a Hoverable Table effect using different CSS properties.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
content=" width = device -width,
initial-scale = 1 .0">
< title >HTML Table Styling</ title >
< style >
h1,
h3 {
text-align: center;
color: green;
}
table {
width: 100%;
border-collapse: collapse;
}
th,
td {
padding: 1px;
text-align: center;
border-bottom: 1px solid black;
}
tr:hover {
background-color: rgb(205, 243, 187);
}
</ style >
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
< h3 >Hoverable Table</ h3 >
< table >
< thead >
< tr >
< th >Name</ th >
< th >Class</ th >
< th >
Roll No
</ th >
</ tr >
</ thead >
< tbody >
< tr >
< td >Mahima</ td >
< td >10</ td >
< td >1</ td >
</ tr >
< tr >
< td >Krishn</ td >
< td >8</ td >
< td >3</ td >
</ tr >
< tr >
< td >Shivika</ td >
< td >8</ td >
< td >5</ td >
</ tr >
</ tbody >
</ table >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...