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 ...

Get CSS: The Missing Manual now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.