How to style tables with collapse-separate-caption in CSS?

CSS tables

Tables represent data in the form of rows and columns to show reports of your projects. When you display these tables without setting any any style or attributes, the browser by default shows it without any border.

To make these tables to appear beautiful and attractive, you can give style to your tables and set HTML borders of these tables as per your requirement. CSS provides you the facility to set attributes so that you can control the layout as per your requirement. Let us understand these tables with the help of codes.

How to add borders to tables?

Let us write a code to insert two rows and give them border with the help of CSS styling.

<html>
<head>
<title>Setting CSS tables</title>
<style>
.test{
     border:2px solid black;
     }
td.a{
     border:2px solid red;
     }
td.b{
     border:2px solid red;
     }
</style>
<body>
      <table class = "test">
         <tr>
	 <td class = "a"> Simple table row1</td>
         </tr>
         <tr>
         <td class = "b"> Simple table row2</td>
         </tr>
      </table>
</body>
</html>
How to add borders to tables?, www.programmingtutorial.in

How to make borders collapse in CSS?

If we set simple border to the table, then by default browser displays border around a table and around each cell of the table by creating a small space between each cell and finally makes double lines around each cell. To convert these double lines into a single line, you can collapse border around the table.

The borders in CSS can be styled in two different ways-collapse and separate. The separate model is the default model in which borders are applies around each cell and in collapse model, the border applies in a single line. Let us now understand separate and collapse model with the help of an example.

<html>
<head>
<title>Setting CSS tables</title>
<style>
table.separate{
	      border-collapse:separate;
	      }
table.collapse{
	      border-collapse:collapse;
	      }
.test{
     border:2px solid black;
     }
th.a{
     border:2px solid red;
     }
td,th.b{
     border:2px solid red;
     }
</style>
<body>
      <table class = "separate test">
      <caption>Separate border table example</caption>
         <tr>
	 <th class = "a"> Name</th>
         <th class = "b"> Address</th>
         </tr>
         <tr>
         <td>Rakesh</td>
         <td>Jammu</td>
         </tr>
         <td>Ajay</td>
         <td>Samba</td>
         </tr>
      </table>
	<hr>
	<table class = "collapse test">
         <caption>Collapse border table example</caption>
         <tr>
	 <th class = "a"> Name</th>
         <th class = "b"> Address</th>
         </tr>
         <tr>
         <td>Rakesh</td>
         <td>Jammu</td>
         </tr>
         <td>Ajay</td>
         <td>Samba</td>
         </tr>
      </table>
</body>
</html>
How to make borders collapse in CSS?, www.programmingtutorial.in

How to set border spacing in CSS?

If you set simple border for table in CSS, then by default, the border applies around each cell, thus creating space between each cell. Now, if you want to increase or decrease this space between the cells, then use border-spacing property. The border spacing property specifies the distance between each cell that separates cell. This value can be one value or two values depending upon your choice. If only one value is given, then it will apply for both horizontal as well as vertical spacing or you can specify first value to horizontal spacing and second to vertical spacing. Let us now take an example.

<html>
<head>
<title>Setting CSS tables</title>
<style>
table.first{
	      border-collapse:separate;
              border-spacing:20px;
	      }
table.second{
	      border-collapse:separate;
              border-spacing:40px 40px;
	      }
.test{
     border:2px solid black;
     }
th.a{
     border:2px solid red;
     }
td,th.b{
     border:2px solid red;
     }
</style>
<body>
      <table class = "first test">
      <caption>Single border spacing example</caption>
         <tr>
	 <th class = "a"> Name</th>
         <th class = "b"> Address</th>
         </tr>
         <tr>
         <td>Rakesh</td>
         <td>Jammu</td>
         </tr>
         <td>Ajay</td>
         <td>Samba</td>
         </tr>
      </table>
	<hr>
	<table class = "second test">
         <caption>Two value border spacing example</caption>
         <tr>
	 <th class = "a"> Name</th>
         <th class = "b"> Address</th>
         </tr>
         <tr>
         <td>Rakesh</td>
         <td>Jammu</td>
         </tr>
         <td>Ajay</td>
         <td>Samba</td>
         </tr>
      </table>
</body>
</html>
How to set border spacing in CSS?, www.programmingtutorial.in

The caption property of table in CSS

This property allows you to set caption of table specifies where the content of table caption has to place. There are four places where you can place caption of table in CSS. These places are top, bottom, left and right. Let us write a code for table caption.

<html>
<head>
<title>Setting CSS tables</title>
<style>
table.setting{
	      border-collapse:collapse;
              border-spacing:20px;
	      }
caption.top{
           caption-side:top;
           }
caption.bottom{
           caption-side:bottom;
           }
.test{
     border:2px solid black;
     }
th.a{
     border:2px solid red;
     }
td,th.b{
     border:2px solid red;
     }
</style>
<body>
      <table class = "setting test">
      <caption class="top">Top caption</caption>
         <tr>
	 <th class = "a"> Name</th>
         <th class = "b"> Address</th>
         </tr>
         <tr>
         <td>Rakesh</td>
         <td>Jammu</td>
         </tr>
         <td>Ajay</td>
         <td>Samba</td>
         </tr>
      </table>
	<hr>
	<table class = "setting test">
         <caption class="bottom">Bottom caption</caption>
         <tr>
	 <th class = "a"> Name</th>
         <th class = "b"> Address</th>
         </tr>
         <tr>
         <td>Vijay</td>
         <td>Jammu</td>
         </tr>
         <td>Lukesh</td>
         <td>Kathua</td>
         </tr>
         <hr>
</body>
</html>
The caption property of table in CSS, www.programmingtutorial.in