Html Tables Lab

Problem Statement

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.

Objectives

  1. Learn the basics of HTML table elements
  2. Practice table creation from scratch

Learn The Basics Of HTML Table Elements

Introduce 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.

Introduce 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>.

Introduce 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 spin up httpserver or directly open index.html right now to take a look.

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

Introduce 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>845-282-4000</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.

Reinforce Our Understanding Of HTML Tables Through Creation

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:

cities by population

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 learn 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

So, 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!

View HTML Tables on Learn.co and start learning to code for free.

Unlock your future in tech
Learn to code.

Learn about Flatiron School's Mission

With a new take on education that falls somewhere between self-taught prodigy and four-year computer science degree, the Flatiron School promises to turn students with little programming experience into developers.

In the six months since the Manhattan coding school was acquired by WeWork, it has spawned locations in Washington, D.C., Brooklyn, and London. Now, WeWork is opening a fourth Flatiron School location, this time in Houston.

Adam Enbar, Flatiron School's cofounder, believes now is the time to grow. "How the world is changing has impacted working and learning in very similar ways. We think education fundamentally is about one thing: enabling people to pursue a better life."

Learn. Love. Code.
Students come to Flatiron School to change their lives. Join our driven community of career-changers and master the skills you need to become a software engineer or a data scientist.
Find Us