CSS Table Properties

Hello guys. In this post we will learn to style table using css. Some of the css table properties are: border-collapse property has values collapse and separate. If you use collapse value then table and its cells will share border. If you use separate value then table and its cells will have their own borders.
Example <table style="border-collapse:collapse; width:180px; border:1px solid black;"> <caption>Border collapse : collapse</caption> <tr><td style="border:1px solid black">1</td><td style="border:1px solid black">2</td></tr> <tr><td style="border:1px solid black">3</td><td style="border:1px solid black">4</td></tr> <tr><td style="border:1px solid black">5</td><td style="border:1px solid black">6</td></tr> </table> <br/> <table style="border-collapse:separate; width:180px; border:1px solid black;"> <caption>Border collapse : separate</caption> <tr><td style="border:1px solid black">1</td><td style="border:1px solid black">2</td></tr> <tr><td style="border:1px solid black">3</td><td style="border:1px solid black">4</td></tr> <tr><td style="border:1px solid black">5</td><td style="border:1px solid black">6</td></tr> </table> </table>
Output

Border collapse : collapse

Border collapse : separate

border-spacing is used to specify distance between table cells. You can provide one or two values. If you provide one value then that value is used for both horizontal and vertical distance. If you provide two values then first value is used for horizontal distance and second value is used for vertical distance. Example <table style="width:180px;border:2px solid purple;color:purple;border-spacing:20px;"> <caption>Cells are 20 pixels away from each other both horizontally and vertically.</caption> <tr> <td style="border:2px solid purple;text-align:center">1</td> <td style="border:2px solid purple;text-align:center">2</td> </tr> <tr> <td style="border:2px solid purple;text-align:center">3</td> <td style="border:2px solid purple;text-align:center">4</td> </tr> <tr> <td style="border:2px solid purple;text-align:center">5</td> <td style="border:2px solid purple;text-align:center">6</td> </tr> </table> <br/> <table style="width:180px;border:2px solid purple;color:purple;border-spacing:20px 40px;"> <caption>Cells are 20 pixels away from each other horizontally and 40 pixels away vertically</caption> <tr> <td style="border:2px solid purple;text-align:center">1</td> <td style="border:2px solid purple;text-align:center">2</td> </tr> <tr> <td style="border:2px solid purple;text-align:center">3</td> <td style="border:2px solid purple;text-align:center">4</td> </tr> <tr> <td style="border:2px solid purple;text-align:center">5</td> <td style="border:2px solid purple;text-align:center">6</td> </tr> </table>
Output Cells are 20 pixels away from each other both horizontally and vertically.

1 2

3 4

5 6

Cells are 20 pixels away from each other horizontally and 40 pixels away vertically

empty-cells specify whether cell’s border is to be displayed if cell is empty. Its values are hide, show and inherit.
Example <table style="border: 1px solid black;width:200px;empty-cells:show;"> <tr> <td style="border: 1px dotted black">1</td> <td style="border: 1px dotted black">2</td> <td style="border: 1px dotted black">3</td> </tr> <tr> <td style="border: 1px dotted black">4</td> <td style="border: 1px dotted black"></td> <td style="border: 1px dotted black">6</td> </tr> <tr> <td style="border: 1px dotted black">7</td> <td style="border: 1px dotted black">8</td> <td style="border: 1px dotted black">9</td> </tr> </table>
Output

1 2 3

4 6

7 8 9

Note: border css property contains three values. First value is used to specify thickness of border. Second value is used to specify border style like dotted, solid. Third value is used to specify border color.