HTML Tables
Cloning Down Your Repository
If you already have a personal repository:
If you want to use the demo repository to follow along:
Remember to use httpserver
to live test your webpage <iframe width="640" height="480" src="//www.youtube.com/embed/mHeCqIctSRU?rel=0&modestbranding=1" frameborder="0" allowfullscreen></iframe>
In this lesson, we're going to go over creating tables. In our market-report.html
page, go ahead and set up the basic document structure, change the title in the <head>
to say 'Exceptional Realty - Luxury Homes - Market Report', and add in our <h1>
and <h2>
main page headers. Then, let's add an below that <h3>
with 'Market Report' inside.
<table> </table>
<table> </table>
To add a table, we first need to write opening and closing <table>
tags. This tells our browser to interpret anything inside as part of the table. Inside these tags, we'll use a few other elements to designate the rows, headers and cells of the table.
<tr> </tr>
<tr> </tr>
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 our headers, it would look like this:
Any content we want in a row would go inside that particular <tr>
.
<th> </th>
<th> </th>
Tables generally start with a row of headers to label columns for the rows below. To do this, we use <th>
, the table header tag. Let's add four headers to this table, 'Address,' 'City,' 'State,' and 'Sales Price,' adding them in in the first table row.
<td> </td>
<td> </td>
In the next row down, we can start putting our information. In this row, instead of using the table header tag, we want to use the table data tag, <td>
, which will represent one table cell. So, for our table data, we can just make up some addresses in cities and states, as well as a sales price, and add them in. An example row would look like the following:
As long as each bit of data in a <td>
is in the same position as the corresponding <th>
, it will show up in that column.
Go ahead and fill 4 rows in with data before moving on, then check out the results on your live page using httpserver
(make sure to add /market-report.html
to the end of your URL path). If you're working from your own repository, push up your work to your remote repo before continuing:
View HTML Tables on Learn.co and start learning to code for free.
Last updated