CSS: The Missing Manual

Table Properties

There are a handful of CSS properties that relate solely to HTML tables. Chapter 10 has complete instructions on using CSS with tables.

border-collapse

Determines whether the borders around the cells of a table are separated or collapsed. When they're separated, browsers put a space of a couple of pixels between each cell. Even if you eliminate this space by setting the cellspacing attribute for the HTML <table> tag to 0, browsers still display double borders. That is, the bottom-border of one cell will appear above the top border of the cell below causing a doubling of border lines. Setting the border-collapse property to collapse eliminates both the space between cells and this doubling up of borderlines (Section 10.2.1). This property works only when applied to a <table> tag.

• Values: collapse, separate

• Example: border-collapse: collapse;

border-spacing

Sets the amount of space between cells in a table. It replaces the <table> tag's cell-spacing HTML attribute. However, Internet Explorer doesn't understand the border-spacing property, so it's best to continue to use the cellspacing attribute in your <table> tags to guarantee space between cells in all browsers.

Note

If you want to eliminate the space browsers normally insert between cells, just set the border-collapse property to collapse.

• Values: Two CSS length values. The first sets the horizontal separation (the space on either side of each cell) and the second sets the vertical separation (the space separating ...