Online Training for Asp.net MVC Web Designing Development, MS SQL, Digital Marketing

CSS Style for Html Table, CSS Tutorial


Table is another commonly used element in HTML, so while designing website it’s necessary to create a common design for all the tables across the web pages

One way you can write class for table row, header and footer, but another way to do it writing just one class and specifying different CSS properties for each Table element.

Here is how you should write CSS class for html table
.tableCss
{
border: solid 1px #e6e5e5;
}

/*for header*/
.tableCss thead
{
background-color: #0094ff;
color:#fff;
padding: 10px;
text-align:center;
}

.tableCss td
{
border: solid 1px #e6e5e5;
padding: 10px;
}

/*for footer*/
.tabTask tfoot
{
background-color: #000;
color: #fff;
padding: 10px;
}

/*for body*/
.tabTask tbody
{
background-color: #e9e7e7;
color: #000;
padding: 10px;
}


Now if you call the able class in a table, just mention the class name <table class="tabTask">, this is how the table will look like.
CSS on Table Header Example
Country Currency
India INR
USA USD
UK GBP
Australia AUD
CSS on Table Footer Example

Now if you want to add a hover effect on table row, just add below line to same class
.tableCss tr:hover
{
background-color: #096f2d;
color:#fff;
}

 
CSS Style for Html Table, CSS Tutorial

Group Training