HTML Table Borders: Complete Guide with CSS Examples

Learn how to add and style HTML table borders using CSS. Explore border width, style, color, collapse, spacing, responsive tables, examples, and best practices.

By /

HTML Table Borders

HTML tables are commonly used to display information in rows and columns. By default, a table may appear without visible borders, depending on the browser and CSS applied to it. Adding borders makes the table easier to read because it clearly separates the rows and columns.

HTML table borders can be created and customized with CSS. You can control the border’s color, width, style, spacing, and even which sides of a table or cell should have a border.

This guide explains HTML table borders from the basics to more advanced techniques, with practical examples.

What Are HTML Table Borders?

An HTML table border is a visible line around a table, its rows, or its individual cells.

For example, a simple table can contain information about students:

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>20</td>
    <td>Delhi</td>
  </tr>
  <tr>
    <td>Anita</td>
    <td>21</td>
    <td>Mumbai</td>
  </tr>
</table>

Without CSS, the table may not have the clear lines that users expect. CSS can be used to add and control the borders.

How to Add a Border to an HTML Table

The modern and recommended way to add borders is with CSS.

<style>
table, th, td {
  border: 1px solid black;
}
</style>

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>20</td>
  </tr>
</table>

Here:

  • table targets the complete table.
  • th targets header cells.
  • td targets normal data cells.
  • 1px defines the border width.
  • solid defines the border style.
  • black defines the border color.

The CSS Border Property

The border property is a shorthand property that can define the width, style, and color of a border.

Its basic syntax is:

border: width style color;

Example:

table {
  border: 2px solid black;
}

A border can also be applied to table cells:

th, td {
  border: 1px solid #333;
}

Border Width

Border width controls how thick the border appears.

table, th, td {
  border: 2px solid black;
}

Common values include:

border-width: 1px;
border-width: 2px;
border-width: 3px;

You can also use keywords such as:

border-width: thin;
border-width: medium;
border-width: thick;

For most website tables, a thin or 1-pixel border provides a clean appearance.

Border Style

The border-style property controls the appearance of the border.

Common styles include:

  • solid
  • dashed
  • dotted
  • double
  • groove
  • ridge
  • inset
  • outset
  • none

Example:

table, th, td {
  border: 1px dashed black;
}

A solid border is usually the best choice for standard data tables.

Border Color

You can choose any valid CSS color.

table, th, td {
  border: 1px solid blue;
}

You can also use hexadecimal colors:

table, th, td {
  border: 1px solid #cccccc;
}

RGB, HSL, and other valid CSS color formats can also be used.

Creating a Simple Table With Borders

Here is a complete example:

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

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
    <th>Quantity</th>
  </tr>
  <tr>
    <td>Pen</td>
    <td>₹10</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Notebook</td>
    <td>₹50</td>
    <td>2</td>
  </tr>
</table>

</body>
</html>

This creates a table with visible borders around the table and its cells.

Collapsing Table Borders

When borders are applied to both a table and its cells, you may notice that adjacent borders appear as separate lines.

The border-collapse property can solve this problem.

table {
  border-collapse: collapse;
}

For example:

<style>
table {
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
}
</style>

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>20</td>
  </tr>
</table>

With border-collapse: collapse, adjacent borders are combined into a single border.

This is one of the most commonly used styles for modern HTML tables.

border-collapse: separate

The default value of border-collapse is generally separate.

table {
  border-collapse: separate;
}

With separate borders, cells can have their own independent borders.

You can also control the distance between cell borders using border-spacing.

table {
  border-collapse: separate;
  border-spacing: 8px;
}

Border Spacing

The border-spacing property controls the distance between borders of adjacent cells when the table uses separate borders.

Example:

table {
  border-spacing: 10px;
}

You can specify horizontal and vertical spacing separately:

table {
  border-spacing: 10px 5px;
}

The first value controls horizontal spacing, while the second controls vertical spacing.

Note that border-spacing does not have the same effect when border-collapse: collapse is being used.

Adding Borders Only to Table Cells

You do not always need a border around the outside of the entire table.

You can apply borders only to th and td elements:

th, td {
  border: 1px solid #ddd;
}

Example:

<table>
  <tr>
    <th>Name</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Ravi</td>
    <td>India</td>
  </tr>
</table>

This approach is useful when you want the cells to be visually separated while keeping the outer table border minimal.

Adding Only an Outer Border

Sometimes you may want a border around the complete table but not around every cell.

table {
  border: 2px solid black;
}

This creates an outer border around the table.

The cells themselves will not automatically receive individual borders.

Adding Borders to Table Rows

CSS can also be used to style table rows.

tr {
  border-bottom: 1px solid #ddd;
}

This technique is often useful for creating clean, modern tables.

For example:

<style>
table {
  border-collapse: collapse;
  width: 100%;
}

tr {
  border-bottom: 1px solid #ddd;
}
</style>

This can create horizontal separators between rows.

Adding a Bottom Border to Cells

A popular modern table design uses only horizontal borders.

th, td {
  border-bottom: 1px solid #ddd;
}

Example:

<table>
  <tr>
    <th>Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>Amit</td>
    <td>85</td>
  </tr>
  <tr>
    <td>Priya</td>
    <td>92</td>
  </tr>
</table>

This style can look less crowded than borders around every cell.

Different Borders for Different Sides

CSS allows you to control each side separately.

You can use:

border-top
border-right
border-bottom
border-left

Example:

td {
  border-bottom: 1px solid #ccc;
}

You can also create different borders on different sides:

td {
  border-top: 1px solid red;
  border-right: 2px solid blue;
  border-bottom: 1px dashed green;
  border-left: 1px solid black;
}

This provides precise control over table appearance.

Removing Borders

You can remove a border using none.

table {
  border: none;
}

For table cells:

th, td {
  border: none;
}

You can also use:

border: 0;

For example:

table, th, td {
  border: 0;
}

HTML border Attribute

Older HTML examples sometimes use the border attribute:

<table border="1">

Although this may still work in browsers, it is not the recommended modern approach.

HTML should describe the structure of the table, while CSS should control its appearance.

Instead of:

<table border="1">

prefer:

<table>

with:

table {
  border: 1px solid black;
}

This separation makes the code easier to maintain.

HTML Table Borders With CSS Classes

Using classes is useful when a website contains several tables with different designs.

<style>
.bordered-table {
  border-collapse: collapse;
}

.bordered-table th,
.bordered-table td {
  border: 1px solid #999;
  padding: 8px;
}
</style>

<table class="bordered-table">
  <tr>
    <th>Subject</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>English</td>
    <td>85</td>
  </tr>
</table>

The class can be reused on multiple tables.

Rounded Table Borders

CSS can also be used to create rounded corners.

table {
  border: 1px solid #ccc;
  border-radius: 8px;
  border-collapse: separate;
  overflow: hidden;
}

Rounded table designs are common in modern websites.

However, when using rounded corners, you may need to consider how the table’s cell borders interact with the outer border.

Colored Table Borders

Table borders do not have to be black.

table, th, td {
  border: 1px solid #4CAF50;
}

You can use your website’s brand color or a subtle neutral color.

For a clean design, light gray borders are often easier on the eyes than very dark borders.

Different Border Styles for Headers

You can make the table header visually different from the data cells.

th {
  border-bottom: 2px solid black;
}

td {
  border-bottom: 1px solid #ddd;
}

This creates a stronger visual separation between the heading and the table content.

HTML Table Border With Background Color

Borders can be combined with background colors.

<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th {
  background-color: #f2f2f2;
  border: 1px solid #ccc;
}

td {
  border: 1px solid #ccc;
}
</style>

<table>
  <tr>
    <th>Country</th>
    <th>Capital</th>
  </tr>
  <tr>
    <td>India</td>
    <td>New Delhi</td>
  </tr>
  <tr>
    <td>Japan</td>
    <td>Tokyo</td>
  </tr>
</table>

This creates a more readable table.

Table Borders With Padding

Borders define the structure of a table, but padding creates space inside each cell.

th, td {
  border: 1px solid #ddd;
  padding: 10px;
}

Padding is important because text placed directly against a border can make a table difficult to read.

A good table often combines:

border
padding
text-align
background-color

A Professional HTML Table Border Example

Here is a more polished example:

<style>
table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}

th {
  border-bottom: 2px solid #333;
}
</style>

<table>
  <tr>
    <th>Student</th>
    <th>Subject</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>Mathematics</td>
    <td>88</td>
  </tr>
  <tr>
    <td>Anita</td>
    <td>Science</td>
    <td>91</td>
  </tr>
  <tr>
    <td>Vikash</td>
    <td>English</td>
    <td>84</td>
  </tr>
</table>

This style is simple, clean, and suitable for many websites.

HTML Table Borders and Responsive Design

Borders do not automatically make a table responsive.

If a table contains many columns, it may become too wide on small screens. A common solution is to place the table inside a container that can scroll horizontally.

<div class="table-container">
  <table>
    ...
  </table>
</div>

CSS:

.table-container {
  overflow-x: auto;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid #ddd;
  padding: 10px;
}

This allows users to scroll horizontally when necessary.

HTML Table Borders and Accessibility

A good table is not only visually attractive. It should also be understandable to people using assistive technologies.

Use proper semantic elements such as:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Rahul</td>
      <td>20</td>
    </tr>
  </tbody>
</table>

The <th> element identifies table headers, while <td> represents normal data cells.

Borders should support readability rather than being the only way information is communicated.

Should You Use Black Borders?

Black borders are perfectly valid, but they are not always the best design choice.

For modern websites, a subtle color such as:

#ddd

or:

#ccc

can produce a softer appearance.

For important tables, stronger borders can improve visual separation.

The best choice depends on the website’s overall design and the amount of information in the table.

Common HTML Table Border Mistakes

Using the HTML border Attribute

Avoid relying on:

<table border="1">

Use CSS instead.

Forgetting border-collapse

If you want a clean single-line table, remember:

table {
  border-collapse: collapse;
}

Using Very Thick Borders

Extremely thick borders can make a table look heavy and difficult to scan.

Using Low-Contrast Borders

Borders that are too faint may not provide enough visual separation.

Forgetting Cell Padding

A table can have perfect borders but still be uncomfortable to read if there is no space around the text.

Creating Too Many Borders

Not every table needs borders on every side of every cell. Sometimes simple horizontal separators provide a cleaner design.

HTML Table Borders vs CSS Borders

HTML provides the structural elements for a table:

<table>
<tr>
<th>
<td>

CSS controls how those elements look:

border
border-width
border-style
border-color
border-collapse
border-spacing

Modern web development generally separates content and presentation this way.

Frequently Asked Questions About HTML Table Borders

How do I add a border to an HTML table?

Use CSS:

table, th, td {
  border: 1px solid black;
}

How do I make table borders single lines?

Use:

table {
  border-collapse: collapse;
}

How do I change the color of a table border?

Use the CSS border color:

table, th, td {
  border: 1px solid blue;
}

How do I make table borders thicker?

Increase the border width:

table, th, td {
  border: 2px solid black;
}

Can I add a border to only the bottom of a table cell?

Yes:

td {
  border-bottom: 1px solid #ddd;
}

Can HTML tables have rounded borders?

Yes. CSS can be used with border-radius to create rounded table corners.

No. CSS is the preferred modern method for styling table borders.

What is border-collapse in HTML tables?

border-collapse is a CSS property that controls whether adjacent table cell borders are combined into one border or kept separate.

What is the difference between border-collapse and border-spacing?

border-collapse controls whether cell borders are combined. border-spacing controls the space between cell borders when separate borders are being used.

Can different table cells have different borders?

Yes. CSS selectors can target individual cells, rows, columns, headers, or specific classes and IDs.

Best Practices for HTML Table Borders

For a clean and accessible table, consider these practices:

  1. Use CSS instead of the old HTML border attribute.
  2. Use border-collapse: collapse for traditional grid-style tables.
  3. Use a subtle border color for less visual clutter.
  4. Add enough padding to make content comfortable to read.
  5. Use <th> for table headers.
  6. Avoid unnecessary borders.
  7. Make tables responsive on smaller screens.
  8. Use sufficient contrast between text, background, and borders.
  9. Keep the table design consistent with the rest of the website.
  10. Test tables on both desktop and mobile screens.

Final Thoughts

HTML table borders are an important part of table design. They help users understand the relationship between rows and columns and make large amounts of tabular information easier to scan.

Although HTML once provided a simple border attribute, modern websites should use CSS for border styling. Properties such as border, border-style, border-width, border-color, border-collapse, and border-spacing provide much greater control.

For a simple and professional table, a combination such as the following is often enough:

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 10px;
}

With the right border style, spacing, padding, and responsive design, HTML tables can be both attractive and easy to use.

Related Posts

Search
Scroll to Top