mozilla
Your Search Results

    Tables

    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:

    Clubs Hearts
    Diamonds Spades
    Clubs Hearts
    Diamonds Spades
    Clubs Hearts
    Diamonds Spades

    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;
    }
    
    Suits
    Clubs Hearts
    Diamonds Spades

    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:

      Oceans

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