How to Create a Table Border in HTML
Tables may look old-school, but let’s be honest they are still everywhere. From pricing tables and reports to schedules and dashboards, HTML tables quietly do a lot of heavy lifting. And without borders, tables can look confusing, messy, or just plain broken.
If you’ve ever created a table and thought, “Why does this look so boring” or “Why can’t I see the rows clearly”, you’re not alone. Learning how to create a table border in HTML is one of the first and most important steps in making tables readable and professional.
Understand What a Table Border
A table border is simply a visible line that separates rows, columns, and the table itself. Borders help users understand where one piece of data ends and another begins.
Without borders, tables often look like random text floating on a page. With borders, they become structured, readable, and easy on the eyes.
Using the HTML Border Attribute
Before CSS became popular, HTML handled borders directly. This method still works, especially for beginners who want quick results.
Basic Table Border Using HTML Only:
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
<td>London</td>
</tr>
<tr>
<td>John</td>
<td>30</td>
<td>New York</td>
</tr>
</table>
This creates a visible border around the table and all its cells.
Why This Works but Isn’t Ideal:
This method is simple, but it’s outdated. Modern websites avoid mixing design with structure. That’s where CSS comes in.
Creating Table Borders Using CSS
CSS gives you full control over how your table borders look. You can change thickness, color, style, and spacing.
Example: Simple Table Border with CSS:
<!DOCTYPE html>
<html>
<head>
<style>
table {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>Laptop</td>
<td>$800</td>
</tr>
</table>
</body>
</html>
This adds a border only around the table, not the cells.
Adding Borders to Table Cells for Better Clarity
Most of the time, you want borders around every cell.
Full Table Border Using CSS:
<style>
table, th, td {
border: 1px solid black;
}
</style>
<table>
<tr>
<th>Country</th>
<th>Capital</th>
</tr>
<tr>
<td>France</td>
<td>Paris</td>
</tr>
</table>
This makes every row and column clearly visible.
Fix Double Borders with Border Collapse
If you’ve tried CSS borders before, you may have seen double lines. That happens because borders stack on each other.
Clean Borders with Border Collapse:
<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 10px;
}
</style>
<table>
<tr>
<th>Name</th>
<th>Email</th>
</tr>
<tr>
<td>Sarah</td>
<td>sarah@example.com</td>
</tr>
</table>
This creates a clean, professional-looking table.
Creat Stylish Borders with Colors and Thickness
Borders don’t have to be boring black lines.
Colored and Thick Table Borders:
<style>
table {
border-collapse: collapse;
border: 2px solid #4CAF50;
}
th, td {
border: 1px solid #4CAF50;
padding: 8px;
}
</style>
This style works great for dashboards and reports.
Adding Rounded Borders to Tables
Rounded borders add a modern feel.
Rounded Table Borders:
<style>
table {
border-collapse: collapse;
border: 2px solid black;
border-radius: 8px;
overflow: hidden;
}
th, td {
border: 1px solid black;
padding: 10px;
}
</style>
Yes, tables can look stylish too.
Creat Borders for Specific Rows or Columns
Sometimes, you don’t want borders everywhere.
Border Only on Table Header:
<style>
th {
border-bottom: 2px solid black;
}
td {
padding: 8px;
}
</style>
This approach is common in clean, minimal designs.
Creat a Table Without Outer Border but With Row Lines
This style works well for data-heavy tables.
Row Borders Only:
<style>
table {
border-collapse: collapse;
width: 100%;
}
tr {
border-bottom: 1px solid #ddd;
}
th, td {
padding: 10px;
}
</style>
It feels modern and easy to read.
Final Thoughts
Learning how to create a table border in HTML is a small skill with big impact. With just a few lines of CSS, you can turn a boring table into something clean, readable, and professional. Start simple, experiment with styles, and don’t be afraid to tweak things until they feel right.