# 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** \<iframe width="640" height="480" src="//[www.youtube.com/embed/mHeCqIctSRU?rel=0\&modestbranding=1](http://www.youtube.com/embed/mHeCqIctSRU?rel=0\&modestbranding=1)" frameborder="0" allowfullscreen>\</iframe>

[HTML Tables](https://www.youtube.com/watch?v=mHeCqIctSRU)

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](https://learn.co/lessons/html-tables) on Learn.co and start learning to code for free.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://certil-remy.gitbook.io/learn/html-1/untitled-1-1.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
