In this tutorial we will show you the solution of table border color in HTML, in HTML there is a table tag which is used, which is used to make a table or to show a table on webpage. Here, are many ways with the help of with you can create a table.
We already described, how to make a table in html. If you don’t see our session then you must go through that article.
Today, our topic is about how to customize your table border color in html.
Step By Step Guide On Table Border Color In HTML :-
As, there are many ways to make a creative table. Today, here we will show you that how you are able to make a table with colorful border.
To make a colorful border, you only have to use border color property to table, not only to table. You can also able to change the border color of headers, and cells in table also.
<!DOCTYPE html>
<html>
<head>
<title> Title of the document<title>
<link rel=”stylesheet/css” src=”style1.css”>
<style>
table{
border: 5px solid red;
/* border-collapse: collapse; */
}
th{
border: 2px dashed yellow;
}
td{
border: 2px dotted blue;
}
</style>
</head>
<body>
<table>
<tr>
<th>
name
</th>
<th>
class
</th>
<th>
age
</th>
</tr>
<tr>
<td>
john
</td>
<td>
3rd
</td>
<td>
5
</td>
</tr>
<tr>
<td>
robert
</td>
<td>
5th
</td>
<td>
8
</td>
</tr>
<tr>
<td>
travis
</td>
<td>
1st
</td>
<td>
4
</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. Before closing head tag, here we create a style tag which is described below.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here.
- Here, in body tag we create table tag, in which we create td, tr, th, which are used to create table.
- After, this a css file is given above, in which we give colors to borders by using border attribute and there values are in pixels, there type of border and at last color is given.
- You can customize the width, type of border and color of border also. We hope that you understand this properly.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, after reading this article you are able to create table with multiple colored border. Here, we give an assignment to you.
In this you have to give background color to table and tr, th, td in table.
The color is same to the border given in html code. I hope this tutorial on table border color in HTML helps you.
About Ashish
