How to Create Table Border in HTML ?
In HTML, we can represent the data in the tabular format by using the <table> tag. We can customize the table by creating a border with different widths and colors.
Below are the approaches to create a Table Border in HTML:
Table of Content
- Using HTML Table Tag Attributes
- Using HTML Inline Styling
Using HTML Table Tag Attributes
In this approach, we are using the border attribute within the <table> tag to specify the width of the border around the table and its cells. By setting the value to 3, we create a border with a thickness of 3 pixels.
Syntax:
<table border="3">
Example: The below example uses HTML Table Tag Attributes to create a table border in HTML.
<!DOCTYPE html>
<html>
<head>
<title>Example 1</title>
</head>
<body>
<h3>Using HTML Table Tag Attributes</h3>
<table border="3">
<tr>
<th>Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td>w3wiki</td>
<td>HTML</td>
<td>82</td>
</tr>
</table>
</body>
</html>
Output:
Using HTML Inline Styling
In this approach, we are using inline styling <style> directly within the HTML elements to define the table borders. By applying the border property to the <table> and <th>/<td> elements, we specify the border width, style, and color.
Syntax:
<table style="border: 3px solid black; border-collapse: collapse;">
Example: The below example uses HTML Inline Styling to create a table border in HTML.
<!DOCTYPE html>
<html>
<head>
<title>Example 2</title>
</head>
<body>
<h3>Using HTML Inline Styling</h3>
<table style="border: 3px solid black;
border-collapse: collapse;">
<tr>
<th style=
"border: 3px solid rgb(255, 0, 0);">Name</th>
<th style=
"border: 2px solid rgb(255, 0, 0);">Subject</th>
<th style=
"border: 2px solid rgb(255, 0, 0);">Marks</th>
</tr>
<tr>
<td style=
"border: 1px solid rgb(255, 0, 0);">Data 1</td>
<td style=
"border: 2px solid rgb(0, 255, 21);">Data 2</td>
<td style=
"border: 1px solid rgb(255, 0, 0);">Data 3</td>
</tr>
</table>
</body>
</html>
Output: