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.
The first thing we need in order to create a table is to write opening and
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
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
<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
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
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
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
<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
<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.
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:
table, and place rows inside,
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!
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.