Styling the table Element

Styling the <table> Element

Apply border-collapse: collapse to the <table> element to remove cellspacing as shown in Listing 14.10.

Listing 14.10. CSS Code for Styling the <table> Element

caption {     text-align: left;     margin: 0 0 .5em 0;     font-weight: bold; } table {     border-collapse: collapse; } 

Tables and cellspacing

A standard table will have about 2px of cellspacing between cells. This can be removed using two methods.

The first method is to apply cellspacing="0" as an attribute inside the <table> element. This is not ideal because a presentation attribute has been added to the table. If you were to change the presentation at a later date, you would need to adjust the HTML as well as the CSS.

The second method is to apply border-collapse: collapse to the <table> element using CSS. This method is preferred because the appearance of the table can be changed at any time without affecting the HTML.