The CSS property border-collapse does exactly that; it collapses borders specifically used for tables. When setting up a table in HTML, the borders may not appear as you wish them to. Using border-collapse can help to create the visual lines you desire in a table layout.
The property border-collapse is a function of CSS (Cascading Style Sheets) but the table itself is created in HTML (Hypertext Markup Language).This tutorial will take you through the steps towards implementing and understanding the border-collapse property. Along the way, you will also be provided with some creative design elements. All you need to start with is a simple code editor such as Notepad ++.
The Essentials of a CSS Border-Collapse
There are two main values that you need to be aware of:
- Collapse: Collapsing borders model. Cells share adjacent borders.
- Separate: Separated borders model. Cells have their own independent borders.
First let’s set up the basic HTML page.
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head><body><h1>The Essentials of a CSS Border-Collapse</h1></body></html>Now let’s build a table to work with.
As you recall from our previous tutorial on Creating HTML Intermediate Tables, let’s add in the rows and columns.
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head><body><h1>The Essentials of a CSS Border-Collapse</h1><table border="1"; width="600px"> <tr> <th>Column 1 heading</th> <th>Column 2 heading</th> <th>Column 3 heading</th> </tr> <tr> <td>trees</td> <td>plants</td> <td>grasses</td> </tr> <tr> <td>pine</td> <td>orchid</td> <td>bermudagrass</td> </tr></table></body></html>This is the result:
The HTML table wants to put in lines for the table outline as well as for the individual cells.
What can be done to fix this? First, let’s put in the first CSS code.
Using the Collapse Value
Add CSS into your Style area of your HTML page.
table {
border-collapse: collapse;
}
What this does is literally collapse the table border.
Why is there still an outline if the border has been collapsed? Look back at the following code. There is a table border width defined in the HTML.
<table border="1"; width="600px">Let’s see what happens when the border is set to zero.
<table border="0"; width="600px">The border disappears completely.
You can leave the HTML table border width set to zero and add in a border width into the CSS.
table {
border-collapse: collapse;
border: 1px solid black;
}
What will this do to the table? As you can see, the table border is defined, it is exactly that, the table border without any defined borders for the table cells.
How can you define the table cell borders? If you define the table definition to include both the td and th cells, then an actual border will be produced.
table, td, th {
border-collapse: collapse;
border: 1px solid black;
}
Using the Separate Value
Using the collapse value will separate the cells such that they have their own independent borders.
If you change the “collapse” value to the “separate” value, and then define how much border spacing you desire, the result will show the cells literally separating from each other.
table, td, th {
border-collapse: separate;
border: 1px solid black;
border-spacing: 10px;
}
And of course you can play with the CSS code to do some fun things such as changing the border colors.
table, td, th {
border-collapse: separate;
border: 1px solid brown;
border-spacing: 10px;
}
Final Note
As you can see, the CSS border-collapse property is an interactive function between the HTML and the CSS. You will need to determine the layout you want to use and play with the border widths to see what is the most pleasing to the eye. Be creative in your layouts and don’t be afraid to play with the border-spacing, border width, and even table cell colors.
Where to Next?
This CSS border-collapse introduction should provide a starting point for further inquiry into website design, layout, and practical applications with HTML and CSS.
Continue to explore other areas of design in the next blog. The hope for this introduction is that it piques your interest, inspires you to explore further, and dive deeper into the world of web design.
HTML is a great way to start learning code, but the professional world demands more and more. Why not supercharge your skills and options by taking it even further. Enroll in our Intro to Programming Nanodegree program today!
