Sometimes on our pages we have some items we want to show in a spreadsheet like style. Lets say maybe you have some information for prices of items you have for sale. You can't get it to look right on the page. This is where tables come in. You will have rows for item name and a column for prices. Of course, you are going to want a header to explain what this is about.
First I am going to explain the different tags that are used.
<Table> "Declares that this area is a table
<Tr> "Table Rows
<td> "Table Columns"
<th> "Table header"
So a blank table would look something like this... indenting helps when building tables. It keeps the different tags straight so you can see it better.
<table>
<tr> Table row - as you can see... this first row of the table is all headings
<th></th> table header
<th></th>
<tr> as you see I am using the closing tags. This is important
because without them your table will not render properly
<td></td> Table columns
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table> end of table
So, now lets fill in the table structure with information.
First lets fill in our headers. Using the example above we have items and their prices. The first Header will be Items and the second will be Price. Since we know that the <td> is the columns this is where you are going to put your items and prices.
<table>
<tr>
<th>Items</th>
<th>price</th>
<tr>
<td>Headset</td>
<td>$25.99</td>
</tr>
<tr>
<td>Mouse</td>
<td>$12.00</td>
</tr>
<tr>
<td>Keyboard</td>
<td>$28.99</td>
</tr>
</table>
Now we have our table built. I am going to run this on a page so that I can show you how it turns out.
Nice huh?
There are a lot of other changes you can make to your table.
For instance you can add a border around your table:
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
Add this code to our sample table and see what happens now.You have to add this code into the <head> section of your site. This is how your code should look now.
Now, lets see how it changes the table page. Run your HTML file and see what happens.
What if you want only one header box instead of two. You can adjust that also
We are going to change the <th> section of our page.
You can expand your header to cover more than one row. You do this by adding colspan="#"
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th> colspan= "2" >Items</th>
<th colspan= "2"> price</th>
<tr>
<td>Headset</td>
<td>$25.99</td>
<td>$35,99</td>
</tr>
<tr>
<td>Mouse</td>
<td>$12.00</td>
<td>$20.00</td
</tr>
<tr>
<td>Keyboard</td>
<td>$28.99</td>
<td>$35,99</td>
</tr>
</table>
</body>
Here is how this turns out in HTML:
See how the price covers both heading for the price?
There are so many things you can do with tables. You can change the background colors of the blocks and a lot of other things. If you want to look at more goto: W3schools.co They list a lot of HTML tags and how to use them.
I hope you enjoyed this lesson. If you have issues, make sure your using your original html file we started in Course 1 . We are just going to keep adding on to it.
Reply