John Mwaniki /   05 May 2023

How to collapse HTML Table borders

An HTML table is an important and commonly used feature in website development. It enables web developers to organize and present data in the form of rows and columns.

A table comprises table cells inside rows and columns.

A table is defined using the opening <table> and closing </table> tags.

Each row within a table is defined using the opening <tr> and closing </tr> tags which stand for table row. You can add as many rows as you like to a table.

Within each table row, we then add table cells using the opening <td> and closing </td> tags. You can add as many as you like depending on the number of columns you want in your table (the number of cells you want in a row). Just make sure that this number is the same in each row (unless when using colspan attribute). td stands for table data and everything enclosed within it is considered as content of the table cell.

If you wish to make some content on table cells become headings of table columns, you can do so by using the <th> tag in the instead of <td>. th stands for table header and by default, its content is bold and centered (though you can change that using CSS).

Below is the code for a sample HTML table:

<table border="1">
 <tr>
  <th>Name</th>
  <th>Age</th>
  <th>Occupation</th>
 </tr>
 <tr>
  <td>John</td>
  <td>30</td>
  <td>Developer</td>
 </tr>
 <tr>
  <td>David</td>
  <td>25</td>
  <td>Data Analyst</td>
 </tr>
</table>

Output:

Name	Age	Occupation
John	30	Developer
David	25	Data Analyst

In this example, we have used all HTML tags explained above to create a table with 3 rows, 3 columns, and 9 table cells. The cells in the first row are table headers for the columns.

By default, table borders are not visible hence I added the border attribute in order to show them. You can assign it a value of your choice for the border width. You can as well define border width using CSS.

As you may notice, each cell has its own individual border which it doesn't share with the adjacent cells (or the overall table) and thus are spaces between the cells. This looks kinda weird.

To make the table look more appealing, we need to get rid of the spaces in between the cells and make all the adjacent cells share the borders. This is referred to as "border collapsing".

We can collapse the border in two ways:

1. Using the CSS border-collapse property
2. Using the HTML cellspacing attribute

1. HTML table border collapsing with CSS

To collapse table borders in CSS, we use the border-collapse property. It specifies whether table borders should collapse into a single border, or each cell will display its own borders.

This property accepts the values "separate", "collapse", "initial", and "inherit". The default value is "separate", which keeps the borders separated.

Assign the value "collapse" to the property to collapse the borders into a single border.

table {
  border-collapse: collapse;
}

Output:

Name	Age	Occupation
John	30	Developer
David	25	Data Analyst

2. HTML table border collapsing with cellspacing

You can alternatively collapse the borders directly in HTML by adding the cellspacing attribute with the value "0" within the opening <table> tag.

Example:

<table border="1" cellspacing="0">
 <tr>
  <th>Name</th>
  <th>Age</th>
  <th>Occupation</th>
 </tr>
 <tr>
  <td>John</td>
  <td>30</td>
  <td>Developer</td>
 </tr>
 <tr>
  <td>David</td>
  <td>25</td>
  <td>Data Analyst</td>
 </tr>
</table>

Output:

Name	Age	Occupation
John	30	Developer
David	25	Data Analyst

In addition to border collapsing, you may consider adding some styling to your HTML tables to make them cooler. Such may include changing text color, background colors, cell padding, text alignment, and border colors among others.

HTML Example:

<table>
 <tr>
  <th>Name</th>
  <th>Age</th>
  <th>Occupation</th>
 </tr>
 <tr>
  <td>John</td>
  <td>30</td>
  <td>Developer</td>
 </tr>
 <tr>
  <td>Jane</td>
  <td>27</td>
  <td>Digital Marketer</td>
 </tr>
 <tr>
  <td>David</td>
  <td>25</td>
  <td>Data Analyst</td>
 </tr>
 <tr>
  <td>Mary</td>
  <td>32</td>
  <td>Farmer</td>
 </tr>
</table>

CSS Styling:

table {
  border-collapse: collapse;
  width: 100%;
}
table, th, td {
  border: 1px solid #7f7f7f;
}
th, td {
  text-align: left;
  padding: 7px 10px 7px 10px;
}
th {
  background: #34669b;
  color: #fff;
}
tr:nth-child(even) {
  background: silver;
}

Output:

Name	Age	Occupation
John	30	Developer
Jane	27	Digital Marketer
David	25	Data Analyst
Mary	32	Farmer

That's it!

Now you know what border collapsing is and how you can do it in both HTML and CSS.