Section A.7. Table Properties


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

A.7.1. 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 ;

A.7.2. 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 the bottom of one cell from the top of the one below it).

  • Example : border-spacing: 0 10px ;

A.7.3. caption-side

When applied to a table caption, this property determines whether the caption appears at the top or bottom of the table. (Since, according to HTML rules, the <caption> tag must immediately follow the opening <table> tag, a caption would normally appear at the top of the table.)

  • Values: top, bottom

  • Example : caption-side: bottom ;


Note: Unfortunately, this property has no effect in any versions of Internet Explorer (as of this writing), so it's safest to stick with the HTML equivalent: <caption align="bottom"> or <caption align="top"> .

A.7.4. empty-cells

Determines how a browser should display a table cell that's completely empty, which in HTML would look like this: < td ></ td >. The hide value prevents any part of the cell from being displayed. Instead, only an empty placeholder appears, so borders, background colors, and background images don't show up in an emptied cell. Apply this property to a style formatting the <table> tag.

  • Values : show, hide

  • Example : empty-cells: show ;


Note: The empty-cells property has no effect if the border-spacing property is set to collapse .

A.7.5. table-layout

Controls how a Web browser draws a table, and can slightly affect the speed at which the browser displays it. The fixed setting forces the browser to render all columns the same width as the columns in the first row, which (for complicated technical reasons) draws tables faster. The auto value is the normal "browser just do your thing" value, so if you're happy with how quickly your tables appear on a page, don't bother with this property. If you use it, apply table-layout to a style formatting the <table> tag.

  • Values : auto, fixed

  • Example : table-layout: fixed ;



CSS[c] The Missing Manual
Dreamweaver CS3: The Missing Manual
ISBN: 0596510438
EAN: 2147483647
Year: 2007
Pages: 154

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net