Using Tables
Instructions: In this exercise, you will use your text editor to create a table and apply table styles.
First, you insert a table element. Next, you add a table caption, table rows, table headers, and table
data. Then, you create style rules to format the table. Work with the apply08.html fille in the apply
folder and the applystyles08.css file in the apply\css folder from the Data Files for Students. The
completed webpage is shown in Figure 8–60. You will also use professional web developmentpractices

to indent, space, comment, and validate your code.

Perform the following tasks:
1. Open apply08.html in your text editor, review the page, add a title, modify the comment at the
top of the page to include your name and today’s date, and replace “Student’s Name” with your
name in the footer element.
2. Open the applystyles08.css file from the apply\css folder. Modify the comment at the top of the
style sheet to include your name and today’s date.
3. In the apply08.html file, add a table element within the main element.
4. In the apply08.html file, add the following caption to the table element:

5. In the apply08.html file, add the following elements within the table element:
<tr>
<th>Product</th>
<th>Quarter 1</th>

<th>Quarter 2</th>
<th>Quarter 3</th>
<th>Quarter 4</th>
</tr>
<tr>
<th>Tablets</th>
<td>&#36;24,500</td>
<td>&#36;21,525</td>
<td>&#36;20,217</td>
<td>&#36;28,575</td>
</tr>
<tr>
<th>Monitors</th>

<td>&#36;12,825</td>
<td>&#36;12,400</td>
<td>&#36;11,900</td>
<td>&#36;14,233</td>
</tr>
<tr>
<th>Laptops</th>
<td>&#36;33,000</td>
<td>&#36;32,750</td>
<td>&#36;31,595</td>
<td>&#36;32,465</td>

</tr>
<tr>
<th>Desktops</th>
<td>&#36;21,478</td>
<td>&#36;20,895</td>
<td>&#36;18,200</td>
<td>&#36;21,625</td>
</tr>
6. In the applystyles08.css file, create the following style rules:
table {
width: 80%;
margin-left: auto;
margin-right: auto;
}

table, tr, th, td {
border-collapse: collapse;
border: solid 0.1em #000000;
padding: 1em;
}
td {
text-align: center;
}
caption {
font-size: 2em;
padding: 1em;
margin-top: 1em;
}
7. Add appropriate comments above each style rule.
8. Save all of your changes and open the apply08.html in your browser.

9. Validate your HTML document using the W3C validator found at validator.w3.org and fix any
    errors that are identified.
10. Validate your CSS file using the W3C validator found at http://jigsaw.w3.org/css-validator/ and
      fix any errors that are identified.
11. Submit the files in a format specified by your instructor.
12. In step 5, you coded a table header as the first element within rows two through five. What
     was the purpose of using the table header elements here? What steps would you take to style
      these table header elements to left-align the text?