HTML Tables

Learning Goals

• Recognize basic HTML table elements
• Create HTML tables

Introduction

In HTML, we can create lists of related content using unordered and ordered lists, and they will display line by line in the order we put them in. Sometimes as web developers, though, we need to display more complex data. For instance, imagine you are working with a financial company and need to display a collection of transactions, each with a title, value, time, and category. Or, imagine that you've been hired by a marketing company and need to display a list of the most popular Instagram accounts, each with their username, the owner of the account, and the number of followers. For sets of data like this, with many separate components, the best way to display would be to put the data into a table.

HTML has a built in way to display tables! In this lesson, we will be reviewing how tables work and how to make our own.

Getting Started

Fork and clone this lesson into your local environment. Navigate into its directory in the terminal, then run code . to open the files in Visual Studio Code.

Recognize Basic HTML Table Elements

The Table Tag: <table>

The first thing we need in order to create a table is to write opening and closing <table> tags.

<table></table>

This tells our browser to interpret anything inside as part of the table. What makes up a table, exactly? A table has rows and columns, which together create individual cells, as well as headers to label what each column is for.

In HTML, we define these table components using individual elements that we nest inside our table tags.

The Table Row Tag: <tr>

It's important to note: order really matters when building a table in HTML! We're trying to display a two-dimensional table, but browsers interpret HTML line by line. For this reason, HTML tables were designed so that there is no tag for columns, only rows. If you were creating a table with 5 rows and 5 columns, in designing the table, we would actually have to create 5 rows, each with 5 individual cells inside. When displayed, the cells in each row will line up to look like columns.

Table rows always come first. To make a row inside our table, we use the table row tag, <tr>. So if we wanted to have four rows in our table, including a row of headers, setting up the rows it would look like this:

<table>
  <tr></tr>
  <tr></tr>
  <tr></tr>
  <tr></tr>
</table>

Any content we want in a row would go inside that particular <tr>.

The Table Header Tag: <th>

Tables generally start with a row of headers to label each column, so the first tr tag we write will be dedicated to these headers.

To create headers, we use <th>, the table header tag. Let's say we were creating a list of guests to a party. The first column might have a header called 'Name' for the guest's name, the second, the guest's 'Phone Number', and the third, what the guest is 'Bringing' to the party.

These headers need to go in the first row, so that may look something like:

<table>
  <tr>
    <th>Name</th>
    <th>Phone Number</th>
    <th>Bringing</th>
  </tr>
  <tr></tr>
  <tr></tr>
  <tr></tr>
</table>

Even though we write the HTML from top down, we would see these headers in bold and lined up left to right. We can open up index.html right now to take a look to confirm.

This first row is almost always the only place where we use the th tag.

The Table Data Tag: <td>

In the second row, we can start putting in our data. Here, we want to use the table data tag, <td> instead of using the table header tag. The <td> tag represents one table cell. So, for our party table, we can add in some names, phone numbers and items for guests to bring. An example row would look like the following:

<tr>
  <td>Daniel</td>
  <td>718-555-1212</td>
  <td>Guacamole</td>
</tr>

As long as each bit of data in a <td> is in the same position as the corresponding <th> in the first row, it will show up in that column.

Repeating this structure, if we wanted to include 3 guests for our party, our entire table would look like the following:

<table>
  <tr>
    <th>Name</th>
    <th>Phone Number</th>
    <th>Bringing</th>
  </tr>
  <tr>
    <td>Daniel</td>
    <td>718-555-1212</td>
    <td>Guacamole</td>
  </tr>
  <tr>
    <td>Rachel</td>
    <td>718-555-1212</td>
    <td>Chips</td>
  </tr>
  <tr>
    <td>Terrance</td>
    <td>914-555-1212</td>
    <td>Salsa</td>
  </tr>
</table>

Paste this into index.html and take a look at how it is displayed in browser. You'll see we've got a table with 4 rows and 3 columns! Each "column" of content expands to fit the width of the content. It should look something like this:

Name	Phone Number	Bringing
Daniel	718-555-1212	Guacamole
Rachel	718-555-1212	Chips
Terrance	914-555-1212	Salsa

Create HTML Tables

Okay, now it's time to put what we've learned to the test. For this challenge, your task is to recreate a table using the following data:

The above table shows total population of the 4 biggest cities in the US. We can see there are 3 headers, "City", "State", and "2017 estimate", and data for each of the four cities.

To complete this task, follow the order of table creation we discussed earlier:

1. Create a table, and place rows inside,
2. Dedicate the first row to just headers
3. Add in the data in the appropriate order so that each city name falls under the "City" column, each state is under "State", etc...

Run npm test to test your work and see your progress. The tests also include the exact population numbers, so feel free to copy them from the errors!

Conclusion

With table, tr, th and td, we are able to turn line by line HTML into a table with rows and columns! It may seem counterintuitive at first to list out row content separately, but with this, you can represent all sorts of data!