This is the 13th section of the CSS Getting Started tutorial; it describes more advanced selectors, and some specific ways that you can style tables. You create a new sample document containing a table, and a stylesheet for it.

Information: Tables

A table is an arrangement of information in a rectangular grid. Some tables can be complex, and for complex tables different browsers can give different results.

When you design your document, use a table to express the relationships between the pieces of information. Then it does not matter if different browsers present the information in slightly different ways, because the meaning is still clear.

Do not use tables in unusual ways to produce particular visual layouts. The techniques on the previous page of this tutorial (Layout) are better for that purpose.

Table structure

In a table, each piece of information is displayed in a cell.

The cells in a line across the page make up a row.

In some tables, the rows might be grouped. A special group of rows at the start of the table is the header. A special group of rows at the end of the table is the footer. The main rows in the table are the body, and they might also be in groups.

The cells in a line down the page make up a column, but columns have limited use in CSS tables.

Example

The table of Selectors based on relationships in the Selectors page has ten cells in five rows.

The first row is the header. The other four rows are the body. There is no footer.

It has two columns.

This tutorial only covers simple tables, where the results are fairly predictable. In a simple table, every cell occupies only one row and column. You can use CSS for complex tables where cells span (extend across) more than one row or column, but tables like that are beyond the scope of this basic tutorial.

Borders

Cells have no margins.

Cells do have borders and padding. By default, the borders are separated by the value of the table's border-spacing property. You can also remove the spacing completely by setting the table's border-collapse property to collapse.

Example

Here are three tables.

The table on the left has 0.5 em border spacing. The table in the center has zero border spacing. The table on the right has collapsed borders:

Captions

A <caption> element is a label that applies to the entire table. By default, it is displayed at the top of the table.

To move it to the bottom, set its caption-side property to bottom. The property is inherited, so alternatively you can set it on the table or another ancestor element.

To style the text of the caption, use any of the usual properties for text.

Example

This table has a caption at the bottom

#demo-table > caption {
  caption-side: bottom;
  font-style: italic;
  text-align: right;
}

Empty cells

You can display empty cells (that is, their borders and backgrounds) by specifying empty-cells: show; for the table element.

You can hide them by specifying empty-cells: hide;. Then, if a cell's parent element has a background, it shows through the empty cell.

Example

These tables have a pale green background. Their cells have a pale gray background and dark gray borders.

In the table on the left, the empty cell is shown. On the right, it is hidden:

  Hearts
Diamonds Spades
  Hearts
Diamonds Spades
Details

For detailed information about tables, see Tables in the CSS Specification.

The information there goes further than this tutorial, but it does not cover differences between browsers that can affect complex tables.

Action: Styling a table

  1. Make a new HTML document, doc3.html. Copy and paste the content from here, making sure that you scroll to get all of it: 
    <!DOCTYPE html>
<html>
  <head>
    <title>Sample document 3</title>
    <link rel="stylesheet" href="style3.css">
  </head>
  <body>
    <table id="demo-table">
      <caption>Oceans</caption>
      <thead>
        <tr>
          <th></th>
          <th>Area</th>
          <th>Mean depth</th>
        </tr>
        <tr>
          <th></th>
          <th>million km<sup>2</sup></th>
          <th>m</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>Arctic</th>
          <td>13,000</td>
          <td>1,200</td>
        </tr>
        <tr>
          <th>Atlantic</th>
          <td>87,000</td>
          <td>3,900</td>
        </tr>
        <tr>
          <th>Pacific</th>
          <td>180,000</td>
          <td>4,000</td>
        </tr>
        <tr>
          <th>Indian</th>
          <td>75,000</td>
          <td>3,900</td>
        </tr>
        <tr>
          <th>Southern</th>
          <td>20,000</td>
          <td>4,500</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>Total</th>
          <td>361,000</td>
          <td></td>
        </tr>
        <tr>
          <th>Mean</th>
          <td>72,000</td>
          <td>3,800</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>
  2. Make a new stylesheet, style3.css. Copy and paste the content from here, making sure that you scroll to get all of it: 
    /*** Style for doc3.html (Tables) ***/

#demo-table {
  font: 100% sans-serif;
  background-color: #efe;
  border-collapse: collapse;
  empty-cells: show;
  border: 1px solid #7a7;
}

#demo-table > caption {
  text-align: left;
  font-weight: bold;
  font-size: 200%;
  border-bottom: .2em solid #4ca;
  margin-bottom: .5em;
}

/* basic shared rules */
#demo-table th,
#demo-table td {
  text-align: right;
  padding-right: .5em;
}

#demo-table th {
  font-weight: bold;
  padding-left: .5em;
}

/* header */
#demo-table > thead > tr:first-child > th {
  text-align: center;
  color: blue;
}

#demo-table > thead > tr + tr > th {
  font-style: italic;
  color: gray;
}

/* fix size of superscript */
#demo-table sup {
  font-size: 75%;
}

/* body */
#demo-table td {
  background-color: #cef;
  padding:.5em .5em .5em 3em;
}

#demo-table tbody th:after {
  content: ":";
}

/* footer */
#demo-table tfoot {
  font-weight: bold;
}

#demo-table tfoot th {
  color: blue;
}

#demo-table tfoot th:after {
  content: ":";
}

#demo-table > tfoot td {
  background-color: #cee;
}

#demo-table > tfoot > tr:first-child td {
  border-top: .2em solid #7a7;
}
  3. Open the document in your browser. It should look very similar to this:
  4. Compare the rules in the stylesheet with the displayed table, to ensure that you understand the effect of each rule. If you find a rule that you are not sure about, comment it out and refresh your browser to see what happens. Here are some notes about this table:
    • The caption lies outside the table border.
    • If you have a minimum point size set in Options, it might affect the superscript in km2.
    • There are three empty cells. Two of them allow the table background to show through. The third has a background and a top border.
    • The colons are added by the stylesheet.
Challenge

Change the stylesheet to make the table look like this:

  Area Mean depth
  million km2 m
Arctic: 13,000 1,200
Atlantic: 87,000 3,900
Pacific: 180,000 4,000
Indian: 75,000 3,900
Southern: 20,000 4,500
Total: 361,000  
Mean: 72,000 3,800

Oceans

See a solution to this challenge.

What next?

This is the last page in this tutorial that focusses on CSS properties and values. For a complete summary of properties and values, see Full property table in the CSS Specification.

The next page looks again at the purpose and structure of CSS stylesheets.

Document Tags and Contributors

Tags: 
 Contributors to this page: teoli, Sheppy, Jeremie, kscarfone, trevorh, ethertank, fusionchess, jswisher, Davidlantner, Verruckt, BenoitL, Ruby, Rod Whiteley, gandalf, Nickolay
 Last updated by: teoli,