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