Jump to main content
Menu

Styling Tables

General Considerations with Tables

  • Padding:
    • The padding property replaces the cellpadding attribute for <table>.
    • If neither the padding property nor the cellpadding attribute is specified, a browser default greater than 0 will be used for cellpadding.
    • Comparing the two approaches, the padding property is more flexible because different sides can be given unique values and cells can be styled differently; the cellpadding attribute applies to all four sides of the cell and to all cells equally.
    • Be sure to style the <th> and <td>, not <table> or <tr>.
  • Cellspacing:
  • Margins:
    • Internal table elements (such as <tr>, <th>, and <td>) do not have margins, so avoid setting the margin property for them.
    • Some browsers may try to render that margin, while others will not.
  • Border, Widths, and Heights:
    • These can be specified for <table>, <th>, and <td>; avoid these for <tr>.

table-layout Property

  • The primary benefit of table-layout is changing the rendering algorithm to speed up the rendering of large data tables.
  • The secondary benefit of changing the rendering algorithm is consistency across tables. Two (or more) separate tables can be styled to have the same column widths and changing the rendering algorithm ensures that they match one another.
  • Using the fixed value (algorithm) means that the table can start rendering after the first row is read by the browser, rather than waiting until the entire table is read.
    • The fixed algorithm uses the cell widths, borders, (cell)padding, and (cell/border)spacing for the first row's cells as the basis for the entire table.
    • Cell content is not factored into the rendering, which means that content wider than its cell will either overlap cells to the right or will be clipped (not displayed). The exact result differs somewhat by browser.
    • Because of this overlap / overflow involving cell content, extensive testing is recommended.
  • The default auto value (algorithm) allows content to impact cell width, in order to keep content in its cell.
Property Usage and Effect Values Recommendations
table-layout Determines how a table renders its column widths.

Apply to <table> and elements displayed as tables (display: table).

  • auto (the default)
  • fixed
 For consistent rendering cross-browser make sure that the <table> element has a defined width too.

Always check to make sure that content is not being truncated. Narrow widths will pose difficulties.

table-layout Example

See the Pen Table Layout by Jason Withrow (@jwithrow) on CodePen.

empty-cells Property

  • Browsers have traditionally collapsed (rendered without defined edges) any cells that are empty.
  • To get around this web developers have inserted a single non-breaking space (&nbsp; or &#160;) into the cell to prevent it from collapsing (any character, other than a regular whitespace, prevents collapse).
  • The empty-cells property instructs cells to either show borders for empty cells or to hide borders for empty cells.
Property Usage and Effect Values Recommendations
empty-cells Determines whether an empty table cell displays or hides borders.
  • show (the default)
  • hide
 Can be beneficial if there are a number of empty cells in a table.

empty-cells Example

See the Pen Empty Cells by Jason Withrow (@jwithrow) on CodePen.

border-spacing Property

  • This property replaces the cellspacing attribute.
  • As with other CSS properties, if cellspacing is specified as well as border-spacing the CSS takes priority and the HTML attribute is ignored.
  • If borders are instructed to collapse (via the border-collapse property) then the border-spacing is ignored.
Property Usage and Effect Values
border-spacing Determines the space between table cells.

Apply to <table> and elements displayed as tables (display: table).
  • Number and unit (e.g., px, em, rem, %)
  • If two values are supplied they are space separated and the first value is horizontal (left/right) while the second value is vertical (top/bottom) spacing. Yes, that is the opposite of the value sequence for the padding, border, and margin properties.

border-spacing Example

See the Pen Border Spacing by Jason Withrow (@jwithrow) on CodePen.

border-collapse Property

  • There are two ways to render cell borders (borders for <th> and <td>, not the traditional border associated with <table>).
  • The default approach is to have them be separate, which means that borders of adjacent cells add together (so that if all cells have 2 pixel borders, where cell walls touch there would be 4 pixels of border).
  • An alternate approach is to collapse the borders, which means that adjacent borders do not add together.
    • The border value specified for the cells is truly what is shown in the rendered output.
    • Top and left borders of cells are removed to make things fit, so that in the previous example the total border would be 2 pixels and not 4 pixels.
  • Collapsed borders will negate border-spacing, because the border space is eliminated.
Property Usage and Effect Values Recommendations
border-collapse Determines whether table cells share borders or have distinct borders.

Apply to <table> and elements displayed as tables (display: table).
  • collapse
  • separate (the default)
 Essential if table cells have borders shown.

border-collapse Example

See the Pen Border Collapse by Jason Withrow (@jwithrow) on CodePen.

caption-side Property

  • By default <caption></caption> is centered above the table, but via CSS the side it is on can be switched to the bottom.
  • Horizontal alignment is adjusted via the text-align property.
Property Usage and Effect Values Recommendations
caption-side Determines whether a caption renders above or below the table.
  • bottom
  • top (the default)
 Useful if captions are being added.

caption-side Example

See the Pen Caption Side by Jason Withrow (@jwithrow) on CodePen.