CSS Table

The look of an HTML table can be greatly improved with CSS:

NUMBERS 1-5 in VARIOUS LANGUAGES
EnglishEspanolFrancaisItalianoDeutsch
1oneunoununoeins
2twodosdeuxduezwei
3threetrestroistredrei
4fourcuatroquatrequattrovier
5fivecincocinqcinquefunf

Table Borders

To specify table borders in CSS, use the border property. 
table, th, td {
    border:border: 1px solid black;
 }

Collapse Borders

The border-collapse property sets whether the table borders are collapsed into a single border or separated:

table {
    border-collapse:collapse;
 }
table, th, td {
    border:border: 1px solid black;
 }

Table Width and Height

Width and height of a table is defined by the width and height properties. 
table {
    width:100%;
}

th {
    width:50px;
}

Table Text Alignment

The text in a table is aligned with the text-align and vertical-align properties.

The text-align property sets the horizontal alignment, like left, right, or center:

td {
    text-align:right;
 }
The vertical-align property sets the vertical alignment, like top, bottom, or middle: 
td {
    height:50px;
    vertical-align:bottom;
 }

Table Padding

To control the space between the border and content in a table, use the padding property on td and th elements: 
td {
    padding:15px;
 }

Table Color

the color of the borders, and the text and background color of th elements: 
<html>
     <head>
        <style type="text/css">
        table, td, th {
        border:1px solid #000;
        }
        th {
        background-color:#0a4171;
        color:#fff;
        }
        </style>
        </head>
        <body>
        <table>
         <tr>
           <th>Name</th>
           </tr>
           <tr>
           <td>Ashwani</td>
           </tr>
           <tr>
           <td>Sachin</td>
         </tr>
        </table>
     </body>
    </html>

         

           Name
           

           

           Ashwani
         

         

         Sachin

Empty Cells

The empty-cells property indicates whether a cell without any content should have a border displayed.

This property can have one of the three values show, hide or inherit.

<html>
     <head>
        <style type="text/css">
        table.empty {
        border-collapse:separate;
        empty-cells:hide;
        }
        td.empty {
        padding:5px;
        border:1px solid #000;
        }
        </style>
        </head>
        <body>
        <table class="empty">
         <tr>
           <td class="empty">ACER</td>
           <td class="empty">DELL</td>
           <td class="empty"></td>
         </tr>
         
         <tr>
           <td class="empty"></td>
           <td class="empty">SONY</td>
           <td class="empty">HP</td>
         </tr>
        </table>
     </body>
    </html>
Output

         

           ACER
           DELL
           
         

         

           
           SONY
           HP

Table Layout

The table-layout Allows browsers to speed up layout of a table by using the first width properties it comes across for the rest of a column rather than having to load the whole table before rendering it.

This property can have one of the three values fixed, auto or inherit.

<html>
     <head>
        <style type="text/css">
        table.auto{
        table-layout:auto;
        }
        table.fixed{
        table-layout:fixed;
        }
        </style>
        </head>
        <body>
        <table border="1px" width="100%" class="auto">
         <tr>
           <td width="20%">123456789876543215712345678765432587346</td>
           <td width="80%">123456789876</td>
         </tr>
        </table>
        
        <table border="1px"  width="100%"  class="fixed">
         <tr>
           <td width="20%">123456789876543215712345678765432587346</td>
           <td width="80%">123456789876</td>
         </tr>
        </table>
     </body>
    </html>
Output

         

           123456789876543215712345678765432587346
           123456789876
         

        
 

         

           123456789876543215712345678765432587346
           123456789876
Share this article on