Frank's Musings

Modern browsers have the ability to display very complex HTML tables when using CSS to style them. While there are people who frown upon using tables for page layout, there’s no better nor no more flexible way to display tabular data than using tables. While this post is not a tutorial on HTML tables, it will describe some of the intricacies of styling them. The techniques shown here target recent versions of Safari, Firefox, Opera, and IE.

The information in this post was derived the specifications for CSS 2.1 and various versions of HTML (HTML 4, XHTML 2, and HTML 5 are similar enough for this discussion).

This post will discuss collapsing borders, empty cells, and the inline-table display type. In part 2, I cover headers and footers, captions, and columns.

The first decision point when styling a table is whether to have collapsed or separate borders (these look best in Safari, Opera, and IE 8):

For each example there is a 1px border around the individual cells as well as 2px border around the whole table. As you can guess by the name, collapsed borders will not show them as doubled up. When you don’t specify border-collapse, the table reverts to the value of separate, as can be seen by the second example where the borders look thicker. The third example shows that you can apply different horizontal and vertical spacing between cells.

If you’re looking at these examples with Firefox (through at least 3.0) you may notice the top and bottom borders of the left example look a little thick. I’m not sure why this happens, it’s interesting that Firebug claims the table has no border. Things look as expected when borders are separate, even if the enclosed cells do not have border spacing.

IE 7 and earlier will show the first example with a thick left border and only a horizontal border in the middle. What happens is the borders are correctly showing up (and collapsing), but the left cells have a width of 0 so the vertical border between the cells is all the way to the left, causing that border to appear thicker. IE 7 and earlier will also display the other two examples with no inner borders. This is due to the empty cell behavior, discussed in the next section. These browsers also don’t seem to implement border-spacing, so you’d see consistent spacing between the borders on the two examples. You need to use the cellspacing attribute in the <table> tag itself to adjust the spacing between the cells.

When a table uses the separate border model, each cell will use its own defined border and background. If you wish to not have the borders and background show up for empty cells, you can set the empty-cells property to hide.

IE 7 and earlier seems to always assume empty-cells: hide, which is why the borders do not show up in the second and third example. If you wish to have the borders and background display for empty cells, you need to put placeholder content (such as  ) into the cell.

When a table is set to collapse borders, Safari, Opera, and Firefox do not assume that empty table cells should be evenly divided. If the table cells have content, however, they will be evenly distributed in the table. Even if all the cells have content in IE 7 (and earlier), they will not be evenly distributed by default. IE 8 does appear to evenly distribute the cells.

Tables default to display: table. However, there are times when it’s more convenient for them to be inline (such as images which are set to display: inline-block).

The three tables above are set to display: inline-table which is why they appear on the same line for the latest browsers. IE 7 and earlier do not support inline-table, so this example doesn’t work correctly unless you’re using IE 8.

The various browsers handle vertical positioning of inline blocks and tables differently. This example’s first block is a <div> set to display: inline-block and the second is a <table> set to display: inline-table. You can use the controls to change different attributes:

There are too many combinations to comment on them all, but a few interesting points are:

• Both the <div> and <table> boxes in this example are 50 pixels square and the size of the <div> does not include the border or padding, as per the CSS box model. However, the size of the table does include the border and padding (but not the caption). When you enable the border around the boxes, the <table> border will stay within that 50px boundary, but the border will go outside the <div> 50px boundary. Note that table cells (unlike the whole table itself) do not include the border or padding when specifying width and height.
• Browsers appear to attempt to align text within inline-block elements with text around it. Browsers other than Safari also try to align text within inline-table elements. If you set vertical-alignment on the containing block, the inline blocks will honor that (except that Opera seems to do top alignment with the containing block set to vertical-align: bottom, but it does do the right thing when you set vertical-alignment: bottom on the table cell).
• Unlike the other browsers, Safari will collapse the table cell when it has no content and no border. You can see this when you enable the table cell background and then enable either the border or the text. If you try enabling the cell background with IE 7 and earlier, it will indeed appear, but you’ll also see the table cell background color around the edges, because of the padding between cells.
• There are a couple CSS workarounds in this example to work around things which WordPress does: <br /> tags are added to the controls for the example (they get set to display: none) and the bare text in the example gets <div> blocks around them (their styles get reset).