CSS Style for Html Table Element

here you learn how to write CSS Style for Html Table Element, we can design beautiful table for your all WebPages, and to keep them standard throughout the application we can write all style in single CSS class, then call that class on any html 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.

HTML Table CSS

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

As you can see in above example, we have written some css properties for hover effect, similarly you can define css properties for text, hyperlink etc.

You may check following tutorials

CSS Style Examples