WebTrainingRoom Online Courses
Learn CSS StyleSheet, Free CSS Tutorial for Beginners, Responsive CSS Examples

How to write CSS Style for Html Table Element


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;
       }

Comment
Name Email Website
Subscribe
 
CSS Style for Html Table, CSS Tutorial



Consulting