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!

Fork & clone

Start the lesson by forking and cloning the data-table repository.

Fork & clone the “data-table” repo.

The repository will have some starter files to get you on your way and include requirements for Markbot so you can be sure you’ve completed the lesson.

  1. Fork, clone & Markbot

    This includes some starter code that you can get by forking and cloning the repository. You’ll use Markbot to double check everything is done properly.

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.

  1. data-table
  2. css
  3. main.css
  4. modules.css
  5. type.css
  6. 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 the Web Dev Tools

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. main.css
  4. modules.css Get the code and paste it
  5. type.css Get the code and paste it
  6. index.html

The web dev tools CSS files need to be populated:

  • Go to Modulifier and copy the default CSS into modules.css—be sure to press “Select all”
  • Go to Typografier and copy the default CSS into type.css

We’re not using a grid for this lesson so it doesn’t need to be included.

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 class="mega">NASA has announced the discovery of over 1000 exoplanets—below are five important discoveries.</caption>
        <thead>
⋮

Let’s style a little bit of the typography in the table’s body rows to make it a little more pleasing.

⋮
</thead>
<tbody>
  <tr>
    <th class="not-bold italic" scope="row">PSR B1257+12 A</th>
    <td>Lich pulsar</td>
    <td>1992</td>
    <td>2300 ly</td>
    <td>First confirmed exoplanet</td>
  </tr>
⋮

Be sure to apply the .not-bold & .italic classes to all the <th> tags inside the <tbody>

And finally we’ll make the footer of the table completely bold.

⋮
  </tbody>
  <tfoot class="bold">
    <tr>
      <th scope="row">Total</th>
      <td colspan="4">5</td>
    </tr>
  </tfoot>
</table>
⋮

Things look a little better now:

  1. index.html — Line D

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

  2. index.html — Line E

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

  3. index.html — Line H

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

  4. index.html — Line I

    Let’s maake the caption a little bigger so it stands out from the rest of the text, using the .mega class.

  5. index.html — Line E

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

  6. index.html — Line C

    Add the .bold class to the <tfoot>

8 Some more custom styles

Let’s open up our main.css and add one more custom style to the table: “zebra striping”.

⋮
main {
  background-color: #f2f2f2;
}

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

Should look like this now:

  1. Lines F–H

    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.

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

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

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

After you’ve fixed all the problems, go ahead and submit the assignment. You’ll immediately get your grade.

  1. Submit

    Whenever you’ve passed all Markbot’s specific tests go ahead and submit this lesson for marks.