facebook twitter
Webucator's Free Introduction to CSS Tutorial

Lesson: Styling Tables with CSS

Welcome to our free Introduction to CSS tutorial. This tutorial is based on Webucator's Introduction to CSS Training course.

In this lesson, you will learn how to use CSS to format tables.

Lesson Goals

  • Use CSS to format tables.

A Review of HTML table Elements and Attributes

Below is a table of the table elements that you will commonly see in any HTML table:

table Elements
Element Definition
table Contains the entire table.
caption Specifies the caption (or title) of the table. The caption element is always the first child of the table element.
thead Contains the header rows of the table. Usually contains the headers for each of the table columns.
tbody Contains the main content of the table, meaning all the rows and cells that are not part of the table head (thead) or foot (tfoot).
tfoot Contains the footer rows of the table. Usually contains a summary of the tbody content (e.g., a sum) or it may contain side notes if the data is more qualitative than quantitative.
tr A table row.
th A table header. th elements are contained within tr elements where they define the headers of the table columns and table rows.
td A table data cell. td elements are contained within tr elements within the tbody and tfoot elements.

Spanning Columns and Rows

The colspan and rowspan attributes are used to make a table header cell or a table data cell span across multiple cells.

colspan and rowspan
Attribute Tags Use
colspan th, td Takes a positive integer greater than 0 that indicates how many columns the th or td element extends (e.g., <td colspan="3">). The default is 1.
rowspan th, td Takes a positive integer that indicates how many rows the th or td element extends (e.g., <td rowspan="3">). The default is 1. If its value is set to 0, the th or td element will extend until the end of the table.

Below you can see a basic unstyled table.

Code Sample:

StylingTables/Demos/unstyled-table.html
---- C O D E   O M I T T E D ----
<body>
<h1>Unstyled Table</h1>
<table>
  <caption>Great Books You Should Read</caption>
  <thead>
    <tr>
      <th id="title">Title</th>
      <th id="author">Author</th>
      <th id="genre">Genre</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Harry Potter and the Sorcerer's Stone*</td>
      <td>J. K. Rowling</td>
      <td>Fantasy</td>
    </tr>
    <tr>
      <td>To Kill a Mockingbird</td>
      <td>Harper Lee</td>
      <td>Novel</td>
    </tr>
    <tr>
      <td>Pride and Prejudice</td>
      <td>Jane Austen</td>
      <td>Romance</td>
    </tr>
    <tr>
      <td>The Diary of Anne Frank</td>
      <td>Anne Frank</td>
      <td>Non-fiction</td>
    </tr>
    <tr>
      <td>1984</td>
      <td>George Orwell</td>
      <td>Dystopia</td>
    </tr>
    <tr>
      <td>The Hunger Games</td>
      <td>Suzanne Collins</td>
      <td>Dystopia</td>
    </tr>
    <tr>
      <td>The Book Thief</td>
      <td>Mark Zusak</td>
      <td>Novel</td>
    </tr>
    <tr>
      <td>The Call of the Wild</td>
      <td>Jack London</td>
      <td>Novel</td>
    </tr>
    <tr>
      <td>Hamlet</td>
      <td>William Shakespeare</td>
      <td>Play - Tragedy</td>
    </tr>
    <tr>
      <td>The Lord of the Rings</td>
      <td>J. R. R. Tolkien</td>
      <td>Fantasy</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">*The original title of 
        <span>Harry Potter and 
          the Sorcerer's Stone</span> was 
        <span>Harry Potter and 
          the Philosopher's Stone</span>.
      </td>
    </tr>
  </tfoot>
</table>
</body>
</html>

Code Explanation

The code above will render the following:Unstyled Table

CSS Properties and Styling Tables

You already know a lot of the properties used to style tables as they are the same properties that you would use to style other elements (e.g., background, padding, width, border, etc.). We are going to look at some properties that are only used for tables:

  1. table-layout
  2. border-collapse

table-layout

The table-layout property is applied to the table element. It accepts one of two values:

  1. auto - The default value. auto makes the widths of the table, th, and td elements adjust automatically to fit the content. width can still be used to make the table wider, but the table will never shrink so far that the content doesn't fit.
  2. fixed - If a table is fixed, then the first table row determines the size of all the following rows. If they have content that goes wider than the first table row, then the content may wrap, get cut off, or extend outside of the cells depending on how the overflow and whitespace properties are set. width will override this tendency, and the table will be whatever width is set regardless of the content.

border-collapse

The border-collapse property is also applied to the table element. It determines whether or not table cells have separate or shared borders. It takes one of two values:

  1. separate - The default value. When cells have separate borders, the table, th, and tr elements all have their own four borders. The spacing between these borders is determined by the border-spacing property, which only works when border-collapse is set to separate.
    1. border-spacing takes one or two length values. If one value is specified, it is for both the vertical and horizontal spacing (e.g., border-spacing: 0.2rem). If two values are specified, the first one is for the vertical spacing and the second is for the horizontal spacing (e.g., border-spacing: 0.2rem 0.1rem).
  2. collapse - If a table element has its borders collapsed, then the table, th, and td elements share borders with each other.

Below you can see a table with separate borders and a table with collapsed borders.

Code Sample:

StylingTables/Demos/separate-vs-collapse-styles.css
table,
th,
td {
  border: solid black;
}

table.separate {
  border-collapse: separate;
  border-spacing: 0.5rem;
}

table.collapse {
  border-collapse: collapse;
}

caption {
  font-style: italic;
}

Code Sample:

StylingTables/Demos/separate-vs-collapse.html
---- C O D E   O M I T T E D ----
<body class="webucator">
<h1>separate vs. collapse</h1>
<table class="separate">
  <caption>separate</caption>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Footer</td>
    </tr>
  </tfoot>
</table>
<table class="collapse">
  <caption>collapse</caption>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Footer</td>
    </tr>
  </tfoot>
</table>
</body>
</html>

Code Explanation

The code above will render the following:separate vs. collapse

Note that the separate table also has 0.5rem of border-spacing.

Below, you can see our fully styled Great Books table:

Code Sample:

StylingTables/Demos/great-books-table-styles.css
body {
  background: aliceblue;
}

table,
th,
td {
  border: solid black 1px;
  padding: 0.2rem;
}

table {
  background: white;
  border-collapse: collapse;
  table-layout: fixed;
  width: 600px;
  margin: auto;
}

#title {
  width: 50%;
}

caption {
  font-size: 1.5rem;
  font-weight: bold;
  text-decoration: underline;
}

thead {
  background: rgb(75, 75, 75);
  color: white;
  text-decoration: underline;
}

span.title {
  font-style: italic;
}

tfoot {
  background: rgb(75, 75, 75);
  color: white;
}

tbody td:first-child {
  font-style: italic;
}

tbody tr:nth-child(odd) {
  background-color: #ccc;
}

Code Sample:

StylingTables/Demos/great-books-table.html
---- C O D E   O M I T T E D ----
<body class="webucator">
<h1>Styling a Table</h1>
<table>
  <caption>Great Books You Should Read</caption>
  <thead>
    <tr>
      <th id="title">Title</th>
      <th id="author">Author</th>
      <th id="genre">Genre</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Harry Potter and the Sorcerer's Stone*</td>
      <td>J. K. Rowling</td>
      <td>Fantasy</td>
    </tr>
    <tr>
      <td>To Kill a Mockingbird</td>
      <td>Harper Lee</td>
      <td>Novel</td>
    </tr>
    <tr>
      <td>Pride and Prejudice</td>
      <td>Jane Austen</td>
      <td>Romance</td>
    </tr>
    <tr>
      <td>The Diary of Anne Frank</td>
      <td>Anne Frank</td>
      <td>Non-fiction</td>
    </tr>
    <tr>
      <td>1984</td>
      <td>George Orwell</td>
      <td>Dystopia</td>
    </tr>
    <tr>
      <td>The Hunger Games</td>
      <td>Suzanne Collins</td>
      <td>Dystopia</td>
    </tr>
    <tr>
      <td>The Book Thief</td>
      <td>Mark Zusak</td>
      <td>Novel</td>
    </tr>
    <tr>
      <td>The Call of the Wild</td>
      <td>Jack London</td>
      <td>Novel</td>
    </tr>
    <tr>
      <td>Hamlet</td>
      <td>William Shakespeare</td>
      <td>Play - Tragedy</td>
    </tr>
    <tr>
      <td>The Lord of the Rings</td>
      <td>J. R. R. Tolkien</td>
      <td>Fantasy</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">*The original title of 
        <span class="title">Harry Potter and 
          the Sorcerer's Stone</span> was 
        <span class="title">Harry Potter and 
          the Philosopher's Stone</span>.
      </td>
    </tr>
  </tfoot>
</table>
</body>
</html>

Code Explanation

The code above will render the following:Great Books table

Some things to note:

  1. We collapsed the borders.
  2. We made the table a fixed table.

Styling a Table Exercise

Duration: 25 to 40 minutes.

In this exercise, you will continue to work on the Runners Home website, but you are going to edit a new page.

  1. Open StylingTables/Exercises/running-log.html in your editor. You will see an unstyled table that looks like this: Unstyled Running Log
  2. Open StylingTables/Exercises/styles.css in your editor. This is the stylesheet from the solution to the Pseudo-classes and Pseudo-elements exercise. Feel free to continue working from your own stylesheet.
  3. Using your new knowledge of table styles, style the unstyled Running Log table. The object of this exercise is to practice using the properties you just learned about. Also, feel free to add or change any other properties that you know.
  4. When you are done, open running-log.html in your browser to see the results. You are welcome to go back to the code and continue to work.

You can design it however you like, or you can try to make it look something like:Styling Tables Solution

Solution:

StylingTables/Solutions/styles.css
---- C O D E   O M I T T E D ----


#running-log {
  background: white;
  border-collapse: collapse;
  font: 0.9rem Georgia, Times, serif;
  margin: auto;
  table-layout: fixed;
  width: 700px;
}

table,
th,
td {
  border: solid black 1px;
  padding: 0.2rem;
}

caption {
  font-size: 1.5rem;
  font-weight: bold;
  padding: 1rem;
  text-decoration: underline;
}

#route,
#notes {
  width: 25%;
}

#running-log thead {
  background: #559;
  color: white;
  text-decoration: underline;
}

tbody tr:nth-child(odd) {
  background: #cce;
}

#running-log tfoot td {
  background-color: rgb(117, 117, 194);
  padding: 0.5rem;
  text-align: center;
}

#running-log tfoot a {
  background: rgb(158, 170, 202);
  border: rgb(70, 70, 100);
  border-radius: 0.5rem;
  border-style: none solid solid none;
  border-width: 0 0.2rem 0.2rem 0;
  color: black;
  font-size: 1.1rem;
  padding: 0.2rem 2rem;
  text-decoration: none;
}

#running-log tfoot a:hover {
  color: rgb(97, 8, 133);
}

#running-log tfoot a:active {
  color:#cce;
  border-width: 0 0.1rem 0.1rem 0;
}

Code Explanation

Some things to note:

  1. We omitted previous styles for brevity.
  2. We added link pseudo-classes to the link in the tfoot. You will need to open StylingTables/Solutions/running-log.html in the browser and interact with the link to see the effect of these styles.