data-table.md

layout	title	desc	markbot_submit	hide_show_for_marks	extra_tutorials	goal	fork	steps
lesson	Data table	Create a chart of data using HTML table elements.	true	true	title url Tables slide deck /courses/web-dev-2/tables/ title url Tables tables title url highlight Tables cheat sheet tables-cheat-sheet true	image before notes goal.png We’re going to walk through taking some information and converting it into a data chart using HTML table elements & tags. label text 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!	url https://github.com/ltw-webdev-2/data-table/fork	title before folders after 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. label type data-table folder label type indent css folder 1 label indent main.css 2 label indent modules.css 2 label indent type.css 2 label indent index.html 1 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. title before code_lang code_file code lines Create the table header row Let’s start the data table by creating the header row with the labels for each column. html index.html ⋮ <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> ⋮ num fade 2-4 true num text 6 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. num text 7 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. num text 8 The `<thead>` tag defines a series of rows as being the header of the table. num text 9 The `<tr>` element defines a row within the table. num text 10 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. title before code_lang code_file code lines after 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. html index.html ⋮ <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 --> ⋮ num fade 2-4 true num text 5 The `<tbody>` tag is used to wrap around the rows of the data table that represent the primary information. num text 6 Each row starts with the `<tr>` tag to define the row of information. num text 7 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. num text 8-11 The rest of the data sits in basic `<td>` tags. **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. title before code_lang code_file code lines after Add the table footer To finish off the `<table>` we’re going to put in the footer information: the totals, etc. html index.html ⋮ <td>1000th exoplanet discovered</td> </tr> </tbody> <tfoot> <tr> <th scope="row">Total</th> <td colspan="4">5</td> </tr> </tfoot> </table> </div> </main> ⋮ num fade 2-3 true num fade 12-13 true num text 4 Don’t forget to close the `</tbody>` tag! num text 5 The `<tfoot>` is the final row grouping tag, it’s to define rows of a table that are totals and extra information. num text 7 Another row heading for this row. num text 8 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” num text 10-11 Don’t forget to add the closing the `</tfoot>` and `</table>` tags. 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`* title before code_lang code_file code lines 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. html index.html ⋮ <main> <div> <h1>Exoplanets</h1> <table> <caption>NASA has announced the discovery of over 1000 exoplanets—below are five important discoveries.</caption> <thead> ⋮ num fade 2-4 true num fade 7-8 true num text 6 No more `border="1"` title before folders after 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. label type data-table folder label type indent css folder 1 label indent fade main.css 2 true label indent notes modules.css 2 Get the code and paste it label indent notes type.css 2 Get the code and paste it label indent fade index.html 1 true *The web dev tools CSS files need to be populated:* - Go to [Modulifier](http://modulifier.web-dev.tools/) and copy the default CSS into `modules.css`—**be sure to press “Select all”** - Go to [Typografier](http://typografier.web-dev.tools/) 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.* title before multi_code after Some basic styles Now that we have access to Typografier, let’s add some of those classes onto things. code_lang code_file code lines html index.html ⋮ <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> ⋮ num fade 2 true num text 4 Add some gutters and padding to the `<main>` tag. num text 5 Add `.wrapper` to the `<div>` to contain everything to a nice size. num fade 6 true num text 8 Remove the default margins from the bottom of the `<table>` num text 9 Let’s maake the caption a little bigger so it stands out from the rest of the text, using the `.mega` class. num fade 10 true code_before code_lang code_file code lines Let’s style a little bit of the typography in the table’s body rows to make it a little more pleasing. html index.html ⋮ </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> ⋮ num text 5 Let’s target the headings cells (`<th>`) in the `<tbody>` and remove the `bold` and add `italic` code_before code_lang code_file code lines **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. html index.html ⋮ </tbody> <tfoot class="bold"> <tr> <th scope="row">Total</th> <td colspan="4">5</td> </tr> </tfoot> </table> ⋮ num fade 2,4-10 true num text 3 Add the `.bold` class to the `<tfoot>` Things look a little better now:  title before code_lang code_file code lines after Some more custom styles Let’s open up our `main.css` and add one more custom style to the table: “zebra striping”. css css/main.css ⋮ main { background-color: #f2f2f2; } tbody tr:nth-child(odd) { background-color: #e2e2e2; } num fade 2-4 true num text 6-8 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”. Should look like this now:  title before multi_code after 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. code_lang code_file code lines html index.html ⋮ <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> ⋮ num fade 2-3 true num fade 9-10 true num text 4-8 Add a new `class` to each of the `<th>` tags so we can distinguish them in our CSS. code_before code_lang code_file code lines Now add the widths into our CSS. css css/main.css ⋮ tbody tr:nth-child(odd) { background-color: #e2e2e2; } .year { width: 7em; } .distance { width: 6em; } .notes { width: 16em; } num fade 2-4 true *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.*  title before multi_code after 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>`. code_lang code_file code lines html index.html ⋮ <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> ⋮ num fade 2-4 true num fade 7-8 true num text 6 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. code_before code_lang code_file code lines Further down the page, don’t forget to add the closing `</div>` tag. html index.html ⋮ <th scope="row">Total</th> <td colspan="4">5</td> </tr> </tfoot> </table> </div> </div> </main> ⋮ num fade 2-6 true num fade 8-9 true num 7 code_before code_lang code_file code lines Now a little bit of CSS to finish the responsiveness off. css css/main.css ⋮ .notes { width: 16em; } table { min-width: 50em; } @media only screen and (min-width: 60em) { .table-wrapper { overflow: visible; } } num fade 2-4 true num text 6-8 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 `em`s. num text 10-16 Force the horizontal scrollbar to be permanently off at the large screen size. Now when we shrink the screen down we should be able to scroll horizontally.