HTML
HTML Table Borders
Borders in HTML tables define structure, improve readability, and visually separate data. Using CSS, developers can customize table borders for a polished appearance.
Example
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Author</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
</tr>
</table>
</body>
</html>
Output
| Author | Age |
|---|---|
| John | 25 |
| Jane | 30 |
Collapsed Table Borders
The border-collapse property merges adjacent cell borders for a
clean and unified look.
Example
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Book</th>
<th>Author</th>
</tr>
<tr>
<td>Unleashing the Power of Astro</td>
<td>Tamas Piros</td>
</tr>
<tr>
<td>Scalable Vector Graphic</td>
<td>John Rhea</td>
</tr>
</table>
</body>
</html>
Output
| Book | Author |
|---|---|
| Unleashing the Power of Astro | Tamas Piros |
| Scalable Vector Graphic | John Rhea |
Customizing Border Styles
You can choose from a variety of border styles using the
border-style property.
| Style | Example | Description |
|---|---|---|
| solid | A continuous line. | |
| dotted | A series of dots. | |
| dashed | Short dashes. | |
| double | Two parallel lines. | |
| groove | A recessed 3D effect. | |
| ridge | A raised 3D effect. | |
| inset | Appears embedded into the table. | |
| outset | Appears raised above the table. | |
| none | No border will be displayed. | |
| hidden | Visually identical to none. |
Example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 2px dotted blue;
}
</style>
</head>
<body>
<table>
<tr>
<th>Course</th>
<th>Author</th>
</tr>
<tr>
<td>A Complete Guide to Learning ChatGPT 4, Midjourney, DALL-E 2, and AI</td>
<td>Julian Melanson</td>
</tr>
</table>
</body>
</html>
Output
| Course | Author |
|---|---|
| A Complete Guide to Learning ChatGPT 4, Midjourney, DALL-E 2, and AI | Julian Melanson |
Rounded Corners
Use border-radius to add rounded corners to a table.
Example
<!DOCTYPE html>
<html>
<head>
<style>
table {
border: 1px solid black;
border-radius: 10px;
}
th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Course</th>
<th>Duration</th>
</tr>
<tr>
<td>HTML Basics</td>
<td>3 hours</td>
</tr>
</table>
</body>
</html>
Output
| Course | Duration |
|---|---|
| HTML Basics | 3 hours |
FAQs on HTML Table Borders
How can I apply borders to specific cells only?
Apply the border property directly to the <td> or <th> elements.
<td style="border: 2px solid red;">Custom Border</td>
Why doesn’t border-radius work with border-collapse: collapse?
The border-collapse property merges cell borders, which prevents
rounded corners. Use border-collapse: separate and border-spacing
instead.
How can I style alternate table rows with different borders?
Use the nth-child pseudo-class in CSS.
tr:nth-child(even) {
border: 1px dashed gray;
}
Can table borders be responsive?
Yes, use media queries to adjust border properties for different screen sizes.
@media (max-width: 600px) {
table, th, td {
border: none;
}
}