Understanding the process of creating an HTML table is essential when it comes to applying a border to it. Tables can be generated by utilizing the table> tag along with tr>, td>, and th> tags in HTML.
Making the HTML Table's Border
It is necessary to manually add a border to an HTML table after its creation because borders are not automatically applied. Let's examine an example that demonstrates the use of the HTML border property.
Illustrating the creation of an HTML table with the border attribute:
<!DOCTYPE html>
<html>
<head>
<title>Title of the page </title>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Yshakan</td>
<td>22</td>
</tr>
<tr>
<td>Rohan</td>
<td>27</td>
</tr>
</table>
</body>
</html>
Output:
If you wish to enhance the appearance of your tables by adding borders, we recommend utilizing the CSS border property. It is essential to define the style of your table prior to implementing a border around it.
Ensure that you add borders to both the th and td tags in order to fully define the table. It is also recommended to specify the border-collapse property, although if not explicitly defined, the default value of border-collapse: separate will be applied.
A Demonstration of Applying Borders to an HTML Table
<!DOCTYPE html>
<html>
<head>
<title>Title of the page</title>
<style>
table,
th,
td {
padding: 20px;
border: 2px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Yshakan</td>
<td>22</td>
</tr>
<tr>
<td>Rohan</td>
<td>27</td>
</tr>
</table>
</body>
</html>
Output:
How to Use CSS to Modify the Border Style of an HTML Table
The CSS border shorthand attribute, as well as the separate border-width, border-style, and border-color attributes, offer options to personalize the appearance of your table. Refer to the example provided to observe how these attributes are applied.
Illustration of modifying the CSS border style of an HTML table
<!DOCTYPE html>
<html>
<head>
<title>Title of the page</title>
<style>
table {
border-style: ridge;
border-width: 120px;
border-color: pink;
background-color: white;
}
th {
border: 5px solid green;
}
td {
border: 20px groove white;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Yshakan</td>
<td>22</td>
</tr>
<tr>
<td>Rohan</td>
<td>28</td>
</tr>
</table>
</body>
</html>
Output:
You have the option to utilize properties such as border-top, border-right, border-bottom, and border-left in cases where you prefer not to have the border surrounding the entire table or when unique borders are needed on individual sides of the table.
Demonstration of Applying Bottom Borders to an HTML Table
<!DOCTYPE html>
<html>
<head>
<title>Title of the page</title>
<style>
table {
border-collapse: collapse;
}
td,
th {
padding: 20px;
border-bottom: 1px solid red;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Yshakan</td>
<td>22</td>
</tr>
<tr>
<td>Rohan</td>
<td>27</td>
</tr>
</table>
</body>
</html>
Output:
How to Make Borders All Round
The CSS property border-radius can also be utilized to achieve rounded borders. It is important to remove the border-collapse attribute in order for this effect to work properly. Let's consider an example where the elements of a table are made rounded.
A demonstration of a table with softened corners in HTML.
<!DOCTYPE html>
<html>
<head>
<title>Title of the page</title>
<style>
table,
td,
th {
padding: 20px;
border: 1px solid green;
border-radius: 3px;
background-color:pink ;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Yshakan</td>
<td>22</td>
</tr>
<tr>
<td>Rohan</td>
<td>22</td>
</tr>
</table>
</body>
</html>
Output:
How to Apply a Border to the "p" Element, "h2" Element, or "div" Element
Borders can be applied to various HTML elements similarly. Let's explore how borders can be added to elements like paragraphs, h2 headings, and div containers.
An example demonstrating the application of borders to the p>, h2>, and div> elements is shown below:
<!DOCTYPE html>
<html>
<head>
<title>Title of the page</title>
<style>
h2,
div,
p {
padding: 20px;
}
h2 {
border: 2px double red;
background-color: pink;
}
div {
border-left: 3px solid red ;
background-color: violet;
}
p {
border: 5px groove pink;
}
</style>
</head>
<body>
<h2>Example</h2>
<div> border property.</div>
<p>paragraph with border.</p>
</body>
</html>
Output:
Take a look at the example provided below to learn how to apply a rounded border to your paragraphs. To achieve the desired outcome, make use of the CSS attribute called border-radius.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
padding: 10px;
}
p.normal {
border: 5px solid pink;
}
p.round1 {
border: 5px solid pink;
border-radius: 5px;
}
p.round2 {
border: 5px solid pink;
border-radius: 5px;
}
p.round3 {
border: 5px solid pink;
border-radius: 5px;
}
</style>
</head>
<body>
<h2>Rounded borders</h2>
<p class="normal">Normal border</p>
<p class="round1">Round border</p>
<p class="round2">Rounder border</p>
<p class="round3">Roundest border</p>
</body>
</html>
Output: