Html Tables

Cloning Down Your Repository

If you already have a personal repository:

git clone https://github.com/<your_username_here>/exceptional-realty
cd exceptional-realty
git fetch --all
git checkout main-pages

If you want to use the demo repository to follow along:

git clone https://github.com/learn-co-curriculum/exceptional-realty-demo
cd exceptional-realty-demo
git fetch --all
git checkout html-tables

Remember to use httpserver to live test your webpage

HTML Tables

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>

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>

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:

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

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

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

<table>
  <tr>
    <th>Address</th>
    <th>City</th>
    <th>State</th>
    <th>Sales Price</th>
  </tr>
  <tr></tr>
  <tr></tr>
  <tr></tr>
</table>

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

<tr>
  <td>2345 Fairview Ln.</td>
  <td>Brooklyn</td>
  <td>New York</td>
  <td>$1.2 mil</td>
</tr>

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:

git add .
git commit -m 'add listing table to real-estate-listings.html'
git push

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