border-collapse, border-spacing, caption-side, empty-cells, and table-layout

Back to the index.

Specification.

On this page I explain some of the new CSS declarations to be used with tables.

This is the default table with only a border defined for the TDs. Note the space between the TDs: as has been the case since the invention of tables, the default cellspacing is 1.

First TD of first TR Second TD of first TR Third TD of first TR
First TD of second TR Third TD of second TR

The table has empty-cells: show by default. It should display the border of the empty cell, but doesn't in IE7-.

empty-cells

This declaration takes two values:

  1. show: show empty cells (with a border). This is the default.
  2. hide: hide empty cells.
<table style="empty-cells: show">
First TD of first TR Second TD of first TR Third TD of first TR
First TD of second TR Third TD of second TR 
<table style="empty-cells: hide">
First TD of first TR Second TD of first TR Third TD of first TR
First TD of second TR Third TD of second TR

border-collapse

This declaration takes two values:

  1. separate: keep borders separate. This is the default.
  2. collapse: merge borders of adjoining cells.
<table style="border-collapse: collapse">
First TD of first TR Second TD of first TR Third TD of first TR
First TD of second TR Third TD of second TR

border-collapse: collapse should overrule cellspacing. The example below should look the same as the previous one.

<table style="border-collapse: collapse;" cellspacing="10">
First TD of first TR Second TD of first TR Third TD of first TR
First TD of second TR Third TD of second TR

border-spacing

border-spacing is cellspacing translated to CSS. Note that it needs a unit.

<table style="border-spacing: 10px;">
First TD of first TR Second TD of first TR Third TD of first TR
First TD of second TR Third TD of second TR

You can use two values: the first is the horizontal cellspacing, the second the vertical one.

<table style="border-spacing: 40px 10px;">
First TD of first TR Second TD of first TR Third TD of first TR
First TD of second TR Third TD of second TR

table-layout

table-layout takes two values:

  1. auto: the table is layed out normally (see below). This is the default value.
  2. fixed: the table obeys the width, even if it normally wouldn't.

Let's give the test table a width. This width is far too narrow to normally show all content, and therefore the table stretches up beyond the 100px. This is normal behaviour: widths on tables have always been more like a polite advice than a strict rule. If the table needs more space than the width allows, it takes more space.

<table style="width: 100px;">
First TD of first TR Second TD of first TR Third TD of first TR
First TD of second TR Third TD of second TR

If we add table-layout: fixed, however, the table obeys the width, even if that results in unreadable content.

<table style="table-layout: fixed; width: 100px;">
First TD of first TR Second TD of first TR Third TD of first TR
First TD of second TR Third TD of second TR

caption-side

caption-side takes four values, even though W3C specifies only the first two:

  1. top. This is the default.
  2. bottom. This is the other official value.
  3. left. Mozilla extension.
  4. right. Mozilla extension.
<caption style="caption-side: bottom">
This caption has caption-side: bottom
First TD of first TR Second TD of first TR Third TD of first TR
First TD of second TR Third TD of second TR 
<caption style="caption-side: right">
This caption has caption-side: right
First TD of first TR Second TD of first TR Third TD of first TR
First TD of second TR Third TD of second TR