Lynxsia IT Solution

With the help of CSS we can improve the style of HTML tables.

To specify table borders in CSS, use the border property.

We can set border for entire table <table>, table row <tr>, table head <th>, table data <td>, header <thead>, body <tbody>, footer <tfoot>, etc.

					 
        
          table, th, td {
            border: 1px solid #faed12;
          }

To specify table size in CSS, use the width and height property.

We can set size of entire table <table>, table row <tr>, table head <th>, table data <td>, header <thead>, body <tbody>, footer <tfoot>, etc.

					 
        
          table {
            width: 90%;
            height: 50px;
          }

To specify text alignment inside table in CSS, use the text-align (horizontally) and vertical-align (vertically) property.

We can set the alignment of the table head <th>, table data <td>

					 
        
          td {
            text-align: center;
            vertical-align: middle;
          }

Create stripped, hoverable, header and footer

					 
        
          th {
            background-color: #04AA6D;
            color: white;
          }

To define responsive table, use overflow property.

					 
        
          table {
            overflow-x: auto;
          }

How you feel about this blog:

Share this blog on:

If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com

Ads