Styling Tables

The table-related properties:

Property	Description	Values
border-collapse	Specifies how borders on adjacent cells are handled.	collapse separate
border-spacing	Specifies the spacing between adjacent cell borders.	1 or 2 <length>
caption-side	Specifies the location of the caption element.	top bottom
empty-cells	Specifies how borders are drawn on empty cells.	hide show
table-layout	Specifies the layout style for the table.	auto fixed

Collapsing Table Borders

The border-collapse property controls how to draw borders for the table element. The browser draws a border around the table plus a border around each cell. You can address this by applying the border-collapse property.

 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
        <style> 
            table { 
                border-collapse: collapse; 
            } 
            th, td { 
                padding: 2px; 
            } 
        </style> 
    </head> 
    <body> 
        <table border="1"> 
            <thead> 
                <tr> 
                    <th>Name</th><th>Value</th>
                </tr> 
            </thead> 
            <tbody> 
                <tr> 
                    <th>A</th><td>B</td>
                </tr> 
                <tr> 
                    <th>B:</th><td>C</td>
                </tr> 
            </tbody> 
        </table> 
    </body> 
</html>

Click to view the demo

Home
HTML CSS Book
CSS

Table Style: