HTML Table No Border Between Cells
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Amruta
In this tutorial we will show you the solution of HTML table no border between cells, in HTML tutorials, today we will learn about how we are able to make a table that has no border in between cells.
It means that there is border around the table, but no border around cells. Let us understand the code with the help of below example.
Step By Step Guide On HTML Table No Border Between Cells :-
As, we know that there are no borders on table by default. We have to apply table on border with the help of border property, in which we give values like 3px solid black.
Where in this 3px is the width of border, black is color of border and solid is border style.
Now, as you see we apply this property on table and its child tags. But if we apply this to table only then automatically there in no border between cells. Let us understand this with help of codes.
<!DOCTYPE html>
<html>
<head>
<title> Title of the document<title>
<style>
table{
border: 1px solid black;
}
</style>
</head>
<body style="text-align: center;">
<tabl>
<tr>
<th>
first name
</th>
<th>
last name
</th>
</tr>
<tr>
<td>
Robert
</td>
<td>
Shampoo
</td>
</tr>
<tr>
<td>
Rock
</td>
<td>
kill
</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.
- As, here in body we see that there we create a table in html. And after table we use some tr, td and th.
- Now, one thing to notice here that in style tag under head. We give border to only table, not to any other. Hence, with the help of this border gets applied to only table, not to its tr, td.
- If in some cases there is border on cells, then we know that border is combination of rows and columns. Then you can apply border with none property to tr, td and th also, if used.
- 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 with no border between cells.
In next session, we will show you how to make a table without any border and how to make a table with border-collapse property. I hope this tutorial on HTML table no border between cells helps you.
About Amruta
