CSS Tables

Tables are commonly used to present tabular data.

Styling Tables with CSS

When you build an HTML table without any styles or attributes, browsers display them without any border. Styling a table with CSS can greatly improve its appearance.

The following sections will show you how to control the layout and presentation of the table elements using CSS to create elegant and consistent tables.

Adding Borders to Tables

The CSS border property is the best way to define the borders for the tables.

The following example will set a black border for the <table>, <th>, and <td> elements.

  • table, th, td {
  •     border: 1px solid black;
  • }

Collapsing Table Borders

If you've seen the output of the previous example, you've noticed every table cell has separate borders as well as there is some space between the borders of adjacent table cells. It happens because table cell borders are separated by default. But, you can collapse the separate table borders into one by using the CSS border-collapse property.

The border-collapse CSS property selects a table's border model.

It can accept one of the two values collapse or separate.

  • The separated model is the default HTML table border model in which each Adjacent cells have their own distinct borders.
  • In the collapsed border model, adjacent table cells share borders.

The style rules in the following example will collapse the table cell borders as well as apply the one pixel black border on the table and table cell elements.

  • table {
  •     border-collapse: collapse;
  • }
  • table, th, td {
  •     border: 1px solid black;
  • }

You can also remove the space between the table cell borders through setting the value of border-spacing property to 0. However, it only removes the space but do not merge the borders like when you set the border-collapse to collapse.

Note: If a <!DOCTYPE> is not specified in the HTML document, the border-collapse CSS property may produce unexpected results.

Controlling Table Layout

By default a table expands and contracts to accommodate the data contained inside it. As data fills inside the table, it continues to expand as long as there is space. Sometimes, however, it is necessary to set a fixed width for the table in order to manage the layout.

You can do this with the help of CSS table-layout property. This property defines the algorithm to be used to layout the table cells, rows, and columns. Two table layout algorithms are available: automatic and fixed.

  • auto — Use an automatic table layout algorithm. With this algorithm, the width of the table and its cells depends on the content of the cell.
  • fixed — Use the fixed table layout algorithm. With this algorithm, the horizontal layout of the table does not depend on the contents of the cells; it only depends on the table's width, the width of the columns, and borders or cell spacing.

The style rules in the following example indicate that the table is laid out using the fixed layout algorithm and has a fixed width of 300 pixels.

  • table {
  •     width: 300px;
  •     table-layout: fixed;
  • }

Without fixed value of the table-layout property, on large tables, users won't see any part of the table until the browser has rendered the whole table.

Tip: You can optimize table rendering performance by specifying the table-layout property. Fixed value of this property causes the table to be rendered one row at a time, providing users with information at a faster pace.

Handling Empty Cells

The empty-cells CSS property controls the rendering of the borders and backgrounds of cells that have no visible content in a table that's using the separated borders model.

This property can take one of the three values: show, hide or inherit.

The following style rule hides empty cells in the table element.

  • table {
  •     border-collapse: separate;
  •     empty-cells: hide;
  • }

Controlling the Position of Table Caption

The caption-side CSS property sets the vertical position of a table caption box.

The following style rule positions the table captions below their parent table. However, to change the horizontal alignment of the caption text, you can use the text-align property.

  • caption {
  •     caption-side: bottom;
  • }

Warning: Internet explorer up to 7 doesn't support caption-side property. IE8 supports only if a <!DOCTYPE> is specified.


Your Feedback:

We would love to hear from you, please drop us a line.