For working professionals
For fresh graduates
Study abroad
More

HTML Table Border: An Ultimate Guide

Updated on 31/01/2025496 Views

Table of Content

Isn't it amazing how a table in HTML can have more visual appeal and organization just by adding borders? Table borders are a basic component of web design that contributes to organization and clarity. Working with HTML tables might initially appear intimidating, much like navigating a sea of data in Excel.

Yet learning the art of HTML table border becomes second nature with experience and a few useful tricks. Having experienced HTML from its primary to its advanced knowledge, I have found HTML table borders to be of immense help.

In this guide, I'll walk you through all the necessary procedures and tips on how to add border to table in HTML and improve how your content is presented on the web.

HTML Table Border

HTML tables are structural components made up of rows and columns that arrange and display data in a tabular style on web pages. Each cell can hold text, photos, or other HTML components.

Tables are essential to web design because they let developers like you organize data logically and straightforwardly, making it easier for consumers to understand.

CSS (Cascading Style Sheets) is frequently used to provide more precise control over the look of the HTML table border. Using CSS, you may provide border characteristics for individual table components, such as rows, columns, or cells. These table border attribute in HTML include style, color, and width.

Thus, to make the web content more realistic and authentic, you have to create table in HTML with border. Making visually appealing, well-structured webpages that provide smooth navigation requires the smart use of an HTML table border within the structure of an HTML Document.

How to Add Border in HTML Table?

Let's explore several kinds of borders and how to add them. I'll also include examples to help clarify each point.

Adding Border Using HTML Attribute:

If you want more customization, you may use CSS or the "border" property inside the tag to add a border to your table.

Applying the "border" attribute, the HTML code for table with border is:

Syntax:

<table>
<tr>
<td> Table Content </td>
</tr>
</table>

Code:

<table BORDER =1>
<tr>
<td>Sr.No.</td><td>Name</td><td>Age</td></tr>
<tr>
<td>1</td><td>John</td><td>21</td></tr>
<tr>
<td>2</td><td>Bob</td><td>24</td></tr>
<tr>
<td>3</td><td>Marco</td><td>25</td></tr>
</table>

Adding Border using HTML attribute

How to Give Border to Table in HTML Using CSS:

We can use CSS to have more control over the border's look.

Code:

<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
}

th{
background-color: yellow;
}
</style>
</head>
<body>
<table style="width:50%">
<tr>
<th >Sr.No.</th>
<th>Name</th>
<th>Age</th>
<th>Salary</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>21</td>
<td>20,000</td>
</tr>
<tr>
<td>2</td>
<td>Bob</td>
<td>24</td>
<td>35,000</td>
</tr>
<tr>
<td>3</td>
<td>Marco</td>
<td>25</td>
<td>32,000</td>
</tr>
</table>
</body>
</html>

Adding Border using CSS attribute

Now that I have covered the answer to “how to create table in html with border?”, let’s see the types of table you can create.

Different Types of HTML Table Border

Now, let's provide a detailed explanation of each form of border that may be used in HTML, including their distinct features and how they appear:

Border with a continuous and unbroken line: A cohesive line border that forms a seamless and unbroken line encircling the table or its cells.

Syntax:

border: 1px solid #000;

Code:

<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid #000;
}
</style>
</head>
<h2>Double Border</h2>
<p>A Double border.</p>
</body>
</html>

Adding Border with a continuous and unbroken line

Dashed outline: A border of uniformly spaced dots produces a dotted line impression around the table or table cells.

Syntax:

border-style: dashed;

Code:

<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: dashed ;
}
</style>
</head>
<body>
<h2>Dashed Border</h2>
<p>A Dashed border.</p>
</body>
</html>

Adding a dashed border

Dotted Border: The border consists of dashed lines. It results in a dashed line effect around the table or table cells.

Syntax:

border-style: dotted;

Code:

<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: dotted ;
}
</style>
</head>
<body>
<h2>Dotted Border</h2>
<p>A Dotted border.</p>
</body>
</html>

Adding a dotted border

Double Border: A border composed of two parallel lines that create a thicker and more prominent border around the table or table cells.

Syntax:

border-style: double;

Code:

<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: double;
}
</style>
</head>
<h2>Double Border</h2>
<p>A Double border.</p>
</body>
</html>

Adding Double Border

Groove Border: A 3D border effect that seems as if it is carved into the webpage. It contains a deep groove appearance.

Syntax:

border-style: groove;

Code:

<!DOCTYPE htm>
<html>
<head>
<style>
p {
border-style: groove;
}
</style>
</head>
<h2>Groove Border</h2>
<p>A Groove border.</p>
</body>
</html>

Adding groove border

Ridge Border: Similar to the grooved border, but with a raised ridge look, providing a 3D illusion that seems raised above the surface.

Syntax:

border-style: ridge;

Code:

<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: ridge;
}
</style>
</head>
<h2>Ridge Border</h2>
<p>A Ridge border.</p>
</body>
</html>

Adding ridge border

Inset 3D Border: A 3D border effect that provides the sensation of being crushed into the webpage. This type produces a sunken appearance.

Syntax:

border-style: inset;

Code:

<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: inset;
}
</style>
</head>
<h2>Inset Border</h2>
<p>A Inset border.</p>
</body>
</html>

Adding Insert 3D Border

Outset Border: The outset border gives a 3D impression that seems lifted from the webpage. This type creates a projecting aspect.

Syntax:

border-style: outset;

Code:

<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: outset;
}
</style>
</head>
<h2>Outset Border</h2>
<p>An Outset border.</p>
</body>
</html>

Adding Outset Border

These distinct HTML table border styles let you pick the best border style to compliment your webpage's design aesthetic. By combining border styles with color, thickness, and radius adjustments, you may build visually appealing and well-structured tables that enhance the user experience.

Customization of the HTML Table Border

Let me lead you through modifying the border of a table in HTML, including adjusting the border color and style to fit your design preferences.

How to Change Border Color in HTML:

You can use CSS to define the desired border color for a table in HTML.

Syntax:

th, td {
border-color: #96D4D4;
}

Code:

<!DOCTYPE html>
<html>
<head>
<style>
th, td {
border-style:solid;
border-color: #96D4D4;
}
</style>
</head>
<body>
<h2> HTML Table Border Color</h2>
<table style="width:50%">
<tr>
<th>Name</th>
<th>Age</th>
<th>Salry</th>
</tr>
<tr>
<td>Jill</td>
<td>44</td>
<td>55,000</td>
</tr>
<tr>
<td>Eve</td>
<td>24</td>
<td>25,000</td>
</tr>
<tr>
<td>John</td>
<td>21</td>
<td>15,000</td>
</tr>
</table>
</body>
</html>

HTML Border Color

Customizing the HTML Table Border Style:

Similarly, you may alter the border style of a table using CSS. Here's how you may define multiple border styles:

Syntax:

table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}

Code:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
</style>
</head>
<body>
<h2>HTML Table Border Style</h2>
<table style="width:100%">
<tr>
<th>Name</th>
<th>Age</th>
<th>Salary</th>
</tr>
<tr>
<td>Jill</td>
<td>44</td>
<td>55,000</td>
</tr>
<tr>
<td>Eve</td>
<td>24</td>
<td>25,000</td>
</tr>
<tr>
<td>John</td>
<td>21</td>
<td>15,000</td>
</tr>
</table>
</body>
</html>

HTML Border Style

Customizing the Border Radius of a Table in HTML

Border radius regulates the curve of the table's corners, allowing you to create rounder corners for a softer appearance. Here's how you can add a border radius using CSS:

Syntax:

th, td {
border-radius: 10px;
}

Code:

<!DOCTYPE html>
<html>
<head>
<style>
th, td {
border-style:solid;
border-color: green;
border-radius:5px;
}
</style>
</head>
<body>
<h2>HTML Table Border Radius</h2>
<table style="width:100%">
<tr>
<th>Name</th>
<th>Age</th>
<th>Salary</th>
</tr>
<tr>
<td>Jill</td>
<td>44</td>
<td>55,000</td>
</tr>
<tr>
<td>Eve</td>
<td>24</td>
<td>25,000</td>
</tr>
<tr>
<td>John</td>
<td>21</td>
<td>15,000</td>
</tr>
</table>
</body>
</html>

HTML Border Radius

Customization options allow you to tune the appearance of your tables to better correspond with your website's design needs. Experiment with combinations of border color, style, width, and radius to get the required visual effect and enhance the overall appearance of your HTML table border on your webpage. You can now develop tables that present information efficiently and contribute to a visually beautiful and unified site design.

Moreover, if you want to strengthen your HTML basics more, go through the complete HTML tutorial.

In Summary

In this detailed tutorial on HTML table border, I guided you through the ins and outs of how to set table border in HTML, starting from the basics and moving toward more complex customization approaches.

I addressed fundamental elements, including border width, style, color, and radius, and focused on the significance of CSS and html table border without CSS in allowing exact control over the border look.

Adopting told strategies prepares you to construct visually beautiful and well-structured tables that grab consumers and increase the online experience.

For a more detailed understanding of various HTML components, I highly recommend you check out upGrad to boost your HTML skills. With the correct information and approaches present there, you could master HTML and create webpages that stand out and engage your audience successfully.

Frequently Asked Questions

How can you add a border to a table in HTML?

HTML table border can be applied using the "border" property or CSS.

What is the border space in the HTML table?

Border space in an HTML table refers to the space between the cell content and the cell border.

How do I remove a double border from a table in HTML?

In HTML, you can use the border property set to "0" to remove a double border from a table, or you can use CSS to specify border styles, such as "border: none;".

How do you customize table borders in HTML?

You may add classes to particular table components with CSS and style them appropriately.

How do I increase the border size of a table in HTML?

You may use CSS to change the border-width property in HTML tables to increase their border size. You can provide the desired size in pixels or other units.

Are there predefined border styles available in HTML?

Yes, you can use CSS or HTML properties to apply predefined border styles in HTML, including dashed, dotted, double, groove, ridge, inset, and outset.

Is it possible to have rounded table borders?

Rounded table borders may be produced by utilizing the border-radius property in CSS.

Is there a difference between using HTML attributes and CSS for table borders?

There is a difference between using HTML elements (such as the "border" property) and CSS for table borders. CSS allows more flexibility and control over border decoration.