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-pagesIf 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-tablesRemember 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:
<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>
<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>
<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 pushView HTML Tables on Learn.co and start learning to code for free.
Last updated