In this tutorial we will show you the solution of HTML table border-collapse, today we will learn about how to create a table in HTML with border collapse property.
As you see in table that when you create a table in html, then there are no border when you open html codes on browser.
And after that for borders. You apply borders on table with the help of border property and border with double lines gets displayed.
Because you create borders around table, tr, th and td also. So, today we will show you how to resolve double line border in html.
Step By Step Guide On HTML Table Border-Collapse :-
As, we say that for border, we apply border on every tag inside and along with table. But this creates a double line border.
And this can be cured with the help of table property named as border-collapse.
Let us understand how to use this border-collapse property. Here, below we show you several lines of codes in html.
<!DOCTYPE html>
<html>
<head>
<title> Title of the document<title>
<style>
table, tr, td, th{
border: 1px solid black;
}
</style>
</head>
<body style="text-align: center;">
<table>
<tr>
<th>
names
</th>
<th>
initials
</th>
</tr>
<tr>
<td>
Robert Shampoo
</td>
<td>
R S
</td>
</tr>
<tr>
<td>
Rock kill
</td>
<td>
R K
</td>
</tr>
</table>
</body>
</html>
Table with border collapse property:
<!DOCTYPE html>
<html>
<head>
<title> Title of the document<title>
<style>
table, tr, td, th{
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body style="text-align: center;">
<table>
<tr>
<th>
names
</th>
<th>
initials
</th>
</tr>
<tr>
<td>
Robert Shampoo
</td>
<td>
R S
</td>
</tr>
<tr>
<td>
Rock kill
</td>
<td>
R K
</td>
</tr>
</table>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here.
- Here, we create two codes in html both are same with some difference in head tag that applied on body.
- In first case, we create a table with border. With the help of style tag, we apply borders. And border is applied of width 1px, with black color and style used in solid.
- Hence, you can see on browser that the table has doubled line border and we want to create a single line border. So we make some changes in this code and which is discussed in next step.
- In second case, we use the same codes specified in previous. But there is one more additional property used in style tag that is of border-collapse.
- Here we use border-collapse property with value collapse. With the help of this the border gets collapsed and we able to see a single border in table.
- You can see the difference in both of them when you see them on web browser.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, here we can say that with the help of this article we are able to create a table in html with the help of border collapse property. I hope this tutorial on HTML table border-collapse helps you.
About Ashish
