HTML Table Borders
Last Updated :
22 Jan, 2024
HTML Table Borders define the visible lines around cells and the overall table. They help in creating clear distinctions between various sections of the table, making it easier to understand and show information clearly. This attribute allows you to control the border’s style, color, and width, for the visual presentation of your table.
Syntax
table {
width: 100%;
border: 1px solid #100808;
}
th, td {
border: 1px solid #eca0a0;
padding: 10px;
}
Adding the Table Border
HTML table borders are crucial in defining the structure and appearance of tables on a webpage. Set the border property to the <table>, <td>, and <th> elements to achieve the table border effect.
Example: Illustration of the creation of an HTML Table with a Border.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>HTML Table border</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
h1,
h3 {
text-align: center;
color: green;
}
table {
width: 100%;
border: 1px solid #100808;
}
th,
td {
border: 1px solid #eca0a0;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Table with border
</h3>
<table>
<thead>
<tr>
<th>Name</th>
<th>Class</th>
<th>
Roll No
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahima</td>
<td>10</td>
<td>1</td>
</tr>
<tr>
<td>Krishn</td>
<td>8</td>
<td>3</td>
</tr>
<tr>
<td>Shivika</td>
<td>8</td>
<td>5</td>
</tr>
</tbody>
</table>
</body>
</html>
|
Output:
Table Borders Collapsed
Table Collapsed borders are a visual styling option for HTML tables where adjacent cell borders are merged or collapsed into a single border-line. Set the border property to the <table>, <td>, and <th> elements to achieve the table border effect.
Example: Illustration of the creation of Table Borders Collapsed.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>
HTML Table border collapsed
</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
h1,
h3 {
text-align: center;
color: green;
}
table {
width: 100%;
border: 1px solid #100808;
border-collapse: collapse;
}
th,
td {
border: 1px solid #413434;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>
Table with Collapsed border
</h3>
<table>
<thead>
<tr>
<th>Name</th>
<th>Class</th>
<th>
Roll No
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahima</td>
<td>10</td>
<td>1</td>
</tr>
<tr>
<td>Krishn</td>
<td>8</td>
<td>3</td>
</tr>
<tr>
<td>Shivika</td>
<td>8</td>
<td>5</td>
</tr>
</tbody>
</table>
</body>
</html>
|
Output:
Table Borders Style
Table Borders Style applies the border-collapse: collapse property to the <table>, <td>, and <th> elements, and sets the border and background-color properties for styling the table and its elements.
Example: Illustration of the Style Table border.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>HTML Table border-style</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
h1,
h3 {
text-align: center;
color: green;
}
table {
width: 100%;
border: 1px solid #100808;
border-collapse: collapse;
}
th,
td {
text-align: center;
border: 1px solid #413434;
padding: 10px;
background-color: rgb(181, 216, 181);
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Table Border Style
</h3>
<table>
<thead>
<tr>
<th>Name</th>
<th>Class</th>
<th>
Roll No
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahima</td>
<td>10</td>
<td>1</td>
</tr>
<tr>
<td>Krishn</td>
<td>8</td>
<td>3</td>
</tr>
<tr>
<td>Shivika</td>
<td>8</td>
<td>5</td>
</tr>
</tbody>
</table>
</body>
</html>
|
Output:
Rounded Table Borders
Rounded table borders make the corners of a table look smooth and curved instead of sharp and straight. This styling technique uses a design feature called “border-radius” to achieve the rounded effect. Apply the border-radius property to the <table>, <td>, and <th> elements to achieve rounded corners for the table borders.
Example: Illustration of the round shaped cells with the help of Table border.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>HTML rounded table</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
h1,
h3 {
text-align: center;
color: green;
}
table {
width: 100%;
border: 1px solid #100808;
border-radius: 20px;
}
th,
td {
text-align: center;
border: 1px solid #413434;
padding: 10px;
background-color: rgb(181, 216, 181);
border-radius: 40px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>
HTML rounded table
</h3>
<table>
<thead>
<tr>
<th>Name</th>
<th>Class</th>
<th>
Roll No
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahima</td>
<td>10</td>
<td>1</td>
</tr>
<tr>
<td>Krishn</td>
<td>8</td>
<td>3</td>
</tr>
<tr>
<td>Shivika</td>
<td>8</td>
<td>5</td>
</tr>
</tbody>
</table>
</body>
</html>
|
Output:
Style Table border with border-style
The border-style property allows you to define different styles for table borders. The property contains different border styling including solid, dashed, dotted, double, groove, ridge, inset, outset, none, and hidden.
Example: Illustration of the Styling the Table border with border-style.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>HTML Table using border-style</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
h1,
h3 {
text-align: center;
color: green;
}
table {
width: 100%;
border: 1px solid #100808;
border-radius: 12px;
border-color: #2df804;
}
th,
td {
text-align: center;
padding: 10px;
background-color: rgb(181, 216, 181);
border-radius: 40px;
border-style: dotted;
border-color: #f80404;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>
HTML Table using border-style
</h3>
<table>
<thead>
<tr>
<th>Name</th>
<th>Class</th>
<th>
Roll No
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahima</td>
<td>10</td>
<td>1</td>
</tr>
<tr>
<td>Krishn</td>
<td>8</td>
<td>3</td>
</tr>
<tr>
<td>Shivika</td>
<td>8</td>
<td>5</td>
</tr>
</tbody>
</table>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...