Tables CSS

How to color the Table with CSS?

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

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

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

th {
    background-color: brown;
    color: white;
}

Try it

How to set the Table width and height in CSS?

table, td, th {
    border: 3px solid purple;
}

table {
    border-collapse: collapse;
    width: 600px;
   color: red;
}

th {
    height: 60px;
    color: purple;
}

Try it

How to decorate Table with CSS?

table {
    border: 5px solid purple;
    width: 100%;
}

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

tr:nth-child(even){background-color: hotpink}

tr:nth-child(odd){background-color: red}

Try it

How to collapse the table borders?

table {
    border-collapse: collapse;
    font-size: 30px;
}

table, td, th {
    border: 5px solid red;
}

Try it

Code to hover the table rows and column

tr:hover 
{
background-color:red;
}

Try it

How to set different CSS on even and odd rows?

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

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

Try it

Table Vertical Align CSS

td {
    height: 70px;
    vertical-align: bottom;
    color: purple;
}

Try it

How to add Border  on tables in CSS?

table, th, td {
    border: 5px groove pink;
    font-size: 30px;
    color: red;
}

Try it

Video Lecture