Data table

Create a chart of data using HTML table elements.

Goal

We’re going to walk through taking some information and converting it into a data chart using HTML table elements & tags.

This is what it should look like when it’s done:

  1. Type it, type it real good

    Remember the purpose of this lesson is to type the code out yourself—build up that muscle memory in your fingers!

1 Project setup

To save some time with this lesson I’ve set up some basic files and put some basic content into the HTML that we’ll work from.

Fork this repo.

Make sure you clone it to your computer.

  1. data-table
  2. css
  3. grid.css
  4. main.css
  5. modules.css
  6. type.css
  7. index.html

This repo has the HTML boilerplate and all the CSS files hooked up.

The content we’ll need is already inside the index.html we just have to wrap it in the right tags.

2 Create the table header row

Let’s start the data table by creating the header row with the labels for each column.

⋮
<main>
  <div>
    <h1>Exoplanets</h1>

    <table border="1">
      <caption>NASA has announced the discovery of over 1000 exoplanets—below are five important discoveries.</caption>
      <thead>
        <tr>
          <th scope="col">Name</th>
          <th scope="col">Orbiting star</th>
          <th scope="col">Year of discovery</th>
          <th scope="col">Distance</th>
          <th scope="col">Notes</th>
        </tr>
      </thead>

⋮
  1. Line F

    Everything about a data table needs be wrapped by the <table> tag.

    The border="1" is a temporary attribute we’ll add to see all the edges of the cells. This must be removed from the final table—it’s really just a development tool.

    We’ll close <table> later when we get to the bottom of the information.

  2. Line G

    Think of the <caption> tag as being like an alt="" attribute for images. It’s a summary of the information found in the table.

    Unlike an alt="" attribute though, the <caption> is always visible—and should always be visible.

  3. Line H

    The <thead> tag defines a series of rows as being the header of the table.

  4. Line I

    The <tr> element defines a row within the table.

  5. Line J

    The <th> tag is used to create a cell, a specialized cell, a heading cell.

    The scope="col" attribute tells the browser and accessibility tools that this heading labels the column.

3 Create the rows of data

The next step is to create the five rows of data for our table. Each row will represent all the information for a single exoplanet.

⋮
    <th class="notes" scope="col">Notes</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">PSR B1257+12 A</th>
    <td>Lich pulsar</td>
    <td>1992</td>
    <td>2300 ly</td>
    <td>First confirmed exoplanet</td>
  </tr>

  <!-- Copy and paste the row above to populate the remaining four exoplanets -->

⋮

The remaining 4 rows are up to you. Copy and paste the above row and populate it with the information for the rest of the exoplanets.

  1. Line E

    The <tbody> tag is used to wrap around the rows of the data table that represent the primary information.

  2. Line F

    Each row starts with the <tr> tag to define the row of information.

  3. Line G

    The first cell of each row is a <th> tag to denote a heading for the whole row.

    Notice that it’s scope is set to scope="row" to define that it’s a heading for the row.

  4. Lines H–K

    The rest of the data sits in basic <td> tags.

4 Add the table footer

To finish off the <table> we’re going to put in the footer information—the totals, etc.

⋮
          <td>1000th exoplanet discovered</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th scope="row">Total</th>
          <td colspan="4">5</td>
        </tr>
      </tfoot>
    </table>
  </div>
</main>
⋮

Now that we’ve got all the <table> tags and data in place we can check it out in the browser.

This is what you should see:

Notice of the total planets cell is stretching across four columns because of the colspan="4" attribute.

That grey background colour is already in your main.css

  1. Line D

    Don’t forget to close the </tbody> tag!

  2. Line E

    The <tfoot> is the final row grouping tag, it’s to define rows of a table that are totals and extra information.

  3. Line G

    Another row heading for this row.

  4. Line H

    Notice the colspan="4" attribute on this <td>. I don’t want to put a bunch of blank cells across the row because every row must have the same number of cells.

    The colspan="4" attribute is telling this cell to merge and stretch so that it takes up the space of “4 columns”

  5. Lines J–K

    Don’t forget to add the closing the </tfoot> and </table> tags.

5 Remove the default border

Now that we’re happy with the layout of the rows and columns & everything looks good we must remove the border="1" attribute.

⋮
<main>
  <div>
    <h1>Exoplanets</h1>

    <table>
      <caption>NASA has announced the discovery of over 1000 exoplanets—below are five important discoveries.</caption>
      <thead>
⋮
  1. Line F

    No more border="1"

6 Add Gridifier, Typografier & Modulifier

The default look of tables is pretty abysmal—Typographier has some slightly nicer table defaults, do let’s add that code into your website.

  1. data-table
  2. css
  3. grid.css Get the code and paste it
  4. main.css
  5. modules.css Get the code and paste it
  6. type.css Get the code and paste it
  7. index.html

The web dev tools CSS files need to be populated:

  • Go to Modulifier and copy the default CSS into modules.css
  • Go to Gridifier and copy the default CSS into grid.css
  • Go to Typografier and copy the default CSS into type.css

With the web dev tools in place, it looks better:

Admittedly though, things are still a little whacky—we’ll fix it next.

7 Some basic styles

Now that we have access to Typografier, let’s add some of those classes onto things.

⋮
<body>

  <main class="pad-t-2 pad-b-2 gutter-1-2">
    <div class="wrapper">
      <h1>Exoplanets</h1>

      <table class="push-0">
        <caption>NASA has announced the discovery of over 1000 exoplanets—below are five important discoveries.</caption>
        <thead>
⋮

Things look a little better now:

  1. Line D

    Add some gutters and padding to the <main> tag.

  2. Line E

    Add .wrapper to the <div> to contain everything to a nice size.

  3. Line H

    Remove the default margins from the bottom of the <table>

8 Some more custom styles

Let’s open up our main.css and add a few custom styles to the table.

⋮
main {
  background-color: #f2f2f2;
}

tbody th {
  font-weight: normal;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

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

Should look like this now:

  1. Lines F–I

    Let’s target the headings cells (<th>) in the <tbody> and remove the bold and add italic

  2. Lines K–M

    Target the whole <tfoot> and make it completely bold

  3. Lines O–Q

    This will select every odd-numbered row in the table and add a background colour—making it easier to separate the rows visually. This is called “zebra striping”.

9 Fix the column widths

Tables automatically layout based on the content inside, but it doesn’t always create an optimal width for the columns of text. So let’s add some widths to the columns to make it better.

⋮
<thead>
  <tr>
    <th class="name" scope="col">Name</th>
    <th class="star" scope="col">Orbiting star</th>
    <th class="year" scope="col">Year of discovery</th>
    <th class="distance" scope="col">Distance</th>
    <th class="notes" scope="col">Notes</th>
  </tr>
</thead>
⋮

Now add the widths into our CSS.

⋮
tfoot {
  font-weight: bold;
}

.year {
  width: 7em;
}

.distance {
  width: 6em;
}

.notes {
  width: 16em;
}

The widths for each of the columns aren’t some magic numbers—I just used the developer tools to change the width of the columns until I found a layout that looked nice to my eyes.

  1. index.html — Lines D–H

    Add a new class to each of the <th> tags so we can distinguish them in our CSS.

10 Make the table responsive

Tables aren’t very responsive—but there are lots of different techniques we can use to help make them a little more responsive:

  • Make the table horizontally scrollable
  • Hide the table on small screens & show an alternative layout
  • Use the CSS display property to overwrite the table into inline & block on small screen
  • Use JavaScript to hide non-critical columns and allow people to hide & show the columns

Well, we’re going to go with the horizontally scrollable table. It’s simple to implement and has okay user experience, but not as optimized as some of the other solutions.

First we’ll surround the table in a new <div>.

⋮
<main class="pad-t-2 pad-b-2 gutter-1-2">
  <div class="wrapper">
    <h1>Exoplanets</h1>

    <div class="table-wrapper scrollable">
      <table class="push-0">
        <caption>NASA has announced the discovery of over 1000 exoplanets—below are five important discoveries.</caption>
⋮

Further down the page, don’t forget to add the closing </div> tag.

⋮
            <th scope="row">Total</th>
            <td colspan="4">5</td>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
</main>
⋮

Now a little bit of CSS to finish the responsiveness off.

⋮
.notes {
  width: 16em;
}

table {
  min-width: 50em;
}

@media only screen and (min-width: 60em) {

  .table-wrapper {
    overflow: visible;
  }

}

Now when we shrink the screen down we should be able to scroll horizontally.

  1. index.html — Line F

    We’ll also add two classes to the <div>:

    1. .table-wrapper — just made that up right now.
    2. .scrollable — a class from Modulifier that adds horizontal scrollbars when necessary. Don’t abuse this class—it’s very, very nasty.
  2. css/main.css — Lines F–H

    First we disallow the <table> from getting narrower than looks good.

    This isn’t a magic number—I just used the developer tools to make the screen narrow until the table started to look awkward, took the pixel width and divided by 16 to get ems.

  3. css/main.css — Lines J–P

    Force the horizontal scrollbar to be permanently off at the large screen size.

Drop it into Markbot

Drop the final, coded exercise into Markbot and fix all the errors until Markbot gives you all green (and maybe a little yellow).

Be sure to keep the green check open to show the teacher!

  1. Can’t submit

    Markbot won’t let you submit this exercise because it’s getting checked by the teacher during class.