How to add borders in HTML table [CSS examples]

To add a border in the HTML table, target the <td> tag in your CSS and assign a border value for it. See the following CSS below.

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

I have the following HTML for the table.

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
    <th>Column 4</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>Bicycle</td>
    <td>Carrot</td>
    <td>Dog</td>
  </tr>
  <tr>
    <td>Elephant</td>
    <td>Fire</td>
    <td>Giraffe</td>
    <td>House</td>
  </tr>
  <tr>
    <td>Ice</td>
    <td>Jelly</td>
    <td>Kite</td>
    <td>Lemon</td>
  </tr>
</table>

With the above one line of CSS, my table looks like the following:

In the above table, you see that there is a little gap between cells. This gap is coming from the web browser. To get around this default gap, specify the border-spacing for the table tag. See my code below:

table {
  border-spacing: 0;
}

With this new line of CSS, my table looks like below.

But we got a new problem. Some of the table borders look doubled.

This is just because of the common borders. To get around these common borders, we need to specify whether we need to collapse the border or not. In our case, we want them to collapse or share the common space among cells. See my CSS below.

table {
  border-collapse: collapse;
}

Along with this new “border-collapse” CSS, my table looks like below.

To wrap up, for the above table, I have the following CSS:

table {
  border-spacing: 0;
  border-collapse: collapse;
}
table tr td, table tr th {
  border: 1px solid #FF0000;
  padding: 8px; /* optional */
}

This is how to add borders.

Learn how you can make the table rounded with CSS.

Bonus/protip: To make this table more professional, you can use a background color for the table header. If you’re not sure yet, please see the table below.

For the table header background, I used the following CSS:

table th {
  background-color: #b6fccd;
}

And you can do this as well.

Lastly, I would suggest you use a light background for each even row. And along with a hover background color for each table row. This is just because of a better user experience.

Especially, if you have a quite long table, your readers may lose their attention. Adding a different background from one row after another row will make it more standout. See the table below to understand what I mean.

For the above table style, I added this new CSS as you see below.

table tr{
  transition: background-color 0.8s ease;
}
table tr:nth-child(even) {
  background-color: #cce8fc;
}
table tr:hover {
  background-color: #fce1fc;
}

That’s all.

Learn more about tables

• How to add borders in an HTML table?
• How to remove HTML table border?
• How to make a table rounded with CSS?
• How to fill a table cell with color in WordPress Gutenberg?
• How to center a table in HTML CSS?
• How to align table elements?
• How to add & align images inside an HTML table?
• TR, TH & TD workflow in an HTML table.
• HTML table background-color & background-image
• How to make a scrollable table in HTML CSS?

Conclusion

Now you know how to add borders in HTML tables and style them in a couple of different ways. As a byproduct, you saw how to create a table in HTML and got a couple of nice table examples.

Now it’s your turn!

Let me know which table style you liked the best.