Fun with tables

See also the W3C tables specification.

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

Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x
empty-cells
Show or hide empty cells in table 		No Yes Yes Yes Yes Yes To be tested
IE7- uses show as default, IE8b2 hide. Changing the default is not possible, though.
border-collapse
Fit cells snugly 		Incomplete Yes Yes Yes Yes Yes To be tested

In IE7- border-collapse: collapse does not overrule cellspacing.
border-spacing
cellspacing 		No Yes Yes Yes Yes Yes To be tested
 
table-layout
Really strict width for tables 		Yes Yes Yes Yes Yes To be tested
 
caption-side
At which side should the caption appear? 		No Yes Yes+ Yes Yes Yes To be tested
Mozilla also supports the extra values left and right.
Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x

Default table

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

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

We're going to add one style declaration per example, unless otherwise noted, and see what happens in the various browsers.

empty-cells

This declaration takes two values:

  1. show: show empty cells (with a border). This is the default.
  2. hide: hide empty cells.

show

<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

hide

<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 and cellspacing

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

Two values

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

Firefox supports two extra values.

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