When we create a table HTML in a web page, by default they have an independent border model, that is, we could modify the content of the borders of each of the cells without the other cells being affected. While we can collapse edges in a table HTML so that the cells begin to share the borders.
But to explain this, a picture is worth a thousand words. If we define a table HTML directly, the appearance in the browser will be as follows:
As we can see, there is a separation between the different cells that makes it look undesirable when giving a color to a row. This happens due to the edge model, which is separate.
To make the cells appear grouped and thus make the color of a row appear more homogeneous, what we will have to do is collapse edges in a tableHTML.
If we want to collapse edges in a table HTML we will have to play with the CSS
border-collapse. This value can receive two values, by default it has the separate value associated with it, which indicates that the edge model is separate. The other value will be collapse. This will cause the edges of the table to collapse and in this way we will achieve the effect discussed above.
In order to fix the border-collapse attribute we must create the following style.
table {
border-collapse: collapse;
}
As we can see the border-collapse attribute we set it at the table level.