How to Use CSS Table Properties With Example?

We use the table to make any information appear category wise but css is used to make the table attractive.After creating a table in html, you cannot customize the table as much as all those facilities are not available in html.

That is why we use css to customize the table because the facility to customize the table has been provided in css.We use some property of css to design our table, which we have given below some property created for the table.

  • border-collapse
  • table-layout
  • border-spacing
  • empty-cells
  • caption-side

border-collapse

When you apply border in table then border is applied above every table data and a border is applied on the whole table.Which is the border of our table, in such a way our table is not visible well but you want to apply a single border on top of our table and also have merg among ourselves.

So here you can use border-collapse property and the value of border-collapse property is collapse and separate and as soon as we use border collapse property then our border collapse.

Example:-

<html>
<head>
<style type="text/css">
table,th,td { border: 2px solid red; border-collapse: collapse; }
</style>
</head>
<body>
<table>
<tr>
<th>SR NO</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>Rahul</td>
</tr>
<td>2</td>
<td>Sahani</td>
</tr>
</table>
</body>
</html>

 

border-spacing

With border-spacing property in CSS, you can spacing your cell, that is, how much you want to show the cells that are made in your table, you define it in border-spacing property and its value is always given in pixels.

Example:-

<html>
<head>
<style type="text/css">
table,th,td { border: 2px solid red; border-collapse: separate; border-spacing : 60px;}
</style>
</head>
<body>
<table>
<tr>
<th>SR NO</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>Rahul</td>
</tr>
<td>2</td>
<td>Sahani</td>
</tr>
</table>
</body>
</html>

 

empty cells

When you use empty-cells property and if a cell is empty in your table, then that cell will either be hidden. Or we can see it. Because we can use only two values ​​in empty-cells property, the first value is hide and the second value is show.

Example:-

<html>
<head>
<style type="text/css">
table,th,td { border: 2px solid red;
border-collapse: separate; 
border-spacing : 60px; 
table-layout: auto;
empty-cells: hide; 
}
</style>
</head>
<body>
<table>
<tr>
<th>SR NO</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>Rahul</td>
</tr>
<td>2</td>
<td>Sahani</td>
</tr>
</table>
</body>
</html>