So, in the previous example, we were able to represent the below table.
But the table didn't have borders around it.
Let us see in the below example, how can we draw borders around the table.
To create a table in HTML with border, we need to set the border attribute of the table element with a numeric value.
Confused?
Let us simplify with the below example.
<html>
<body>
<table border = "1">
<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>
So, in the above example, we have set the border property of the table element to 1.
<table border = "1">
And we get the desired border around the table.
Now, to get more control over the border, we need to make use of the CSS property.
To get more control over the border, we need to add the CSS property called border for table, th and td elements.
This will ensure that the border is wrapped around table, th and td elements.
Let us see it in action with the below example.
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<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>
So, if you see the above output, the border is drawn around the entire table. To get the border, we have set the border property for table, th and td elements.
<style>
table, th, td {
border:1px solid black;
}
</style>Now, if you look at the values for the border property, they are 1px, solid and black.
Although we got the border we have desired, however the border has double lines. Let us see how can we get rid of it using the border-collapse property.
The border-collapse property in HTML is used to get rid of the double border.
<html>
<style>
table, th, td {
border:1px solid black;
border-collapse:collapse;
}
</style>
<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>
So, if you look at the above code, we just got rid of the double border by setting the border-collapse property to collapse.
table, th, td {
border:1px solid black;
border-collapse:collapse;
}In the previous example we have seen that there is a solid border or the border is drawn with straight line.
border:1px solid black;
Let us see next, how we can draw a dotted border.
<html>
<style>
table, th, td {
border:1px dotted black;
}
</style>
<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>
So, if you see the above output, a dotted border is drawn around the table. That is because we have set the value of the border property to dotted.
table, th, td {
border:1px dotted black;
}
Alternatively, we can draw a dotted border using the border-style property.
<html>
<style>
table, th, td {
border-style:dotted;
}
</style>
<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>
So, in the above example, we have changed the border-style property to dotted and a dotted border is drawn around the table.
The border-style property also has other values that sets different styles for the border.
You can try the above on your own and see how it works.
Similarly, you can also change the color of the border using the border-color property.
We can set the color of the border using the border-color property.
<html>
<style>
table, th, td {
border-style:dotted;
border-color:red;
}
</style>
<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>
In the above example, we have set the border-color property to red. And the color of the border is red.