CSS - Table Borders

To draw borders for the table, border property is used in CSS.

Let us take the table from the previous example and draw a border for it.

Example :

<html>
<head>
	<style>
		table, th, td {
  			border: 2px solid red
  		} 		
	</style>	
</head>	
<body>
	<table>
  		<tr>
    		<th>Name</th>
    		<th>Class</th>
    		<th>Roll</th>
  		</tr>
  		<tr>
    		<td>John</td>
    		<td>5</td>
    		<td>1</td>
  		</tr>
  		<tr>
    		<td>Paul</td>
    		<td>7</td>
    		<td>12</td>
  		</tr>
  		<tr>
    		<td>Mohan</td>
    		<td>3</td>
    		<td>21</td>
  		</tr>
	</table>
</body>
</html>

Output :

So, in the above example, we have drawn a border for the above table with the border property.

table, th, td {
	border: 2px solid red
}

So, the border is applied for <table>, <th> and <td> elements.

Now, if see the border property, it has three values,

2px

Denotes the width of the border.

solid

Denotes a solid border.

red

Denotes the color of the border.

And a solid border is drawn that is red in color and is 2px wide.

Although the border is drawn but it has two lines in it. And we can get rid of it using the border-collapse property.

Using border-collapse property for borders

Example :

<html>
<head>
	<style>
		table, th, td {
  			border: 2px solid red
  		} 
  		table {
  			border-collapse: collapse;
		}		
	</style>	
</head>	
<body>
	<table>
  		<tr>
    		<th>Name</th>
    		<th>Class</th>
    		<th>Roll</th>
  		</tr>
  		<tr>
    		<td>John</td>
    		<td>5</td>
    		<td>1</td>
  		</tr>
  		<tr>
    		<td>Paul</td>
    		<td>7</td>
    		<td>12</td>
  		</tr>
  		<tr>
    		<td>Mohan</td>
    		<td>3</td>
    		<td>21</td>
  		</tr>
	</table>
</body>
</html>

Output :

So, in the above example, we have used the border-collapse property and set its value to collapse. As a result we get a single line for the border.

	table {
		border-collapse: collapse;
	}

❮❮ PREV NEXT ❯❯