ZuoTi.Pro
Question

You will use your text editor to create a table and apply table styles. First, you...

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 file and the applystyles08.css file. You will also use professional web development practices to indent, space, comment, and validate your code.

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: <caption>2017 Sales by Quarter</caption>

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>$24,500</td> <td>$21,525</td> <td>$20,217</td> <td>$28,575</td> </tr> <tr> <th>Monitors</th> <td>$12,825</td> <td>$12,400</td> <td>$11,900</td> <td>$14,233</td> </tr> <tr> <th>Laptops</th> <td>$33,000</td> <td>$32,750</td> <td>$31,595</td> <td>$32,465</td> </tr> <tr>
<th>Desktops</th> <td>$21,478</td> <td>$20,895</td> <td>$18,200</td> <td>$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.

code is below

/* Style sheet created by: Student's First Name Student's Last Name, Today's Date */

/* Style for body specifies a background color */
body {
background-color: #669999;
}

/* Style for the container element */
#container {
width: 90%;
margin-left: auto;
margin-right: auto;
}

/* Style for the footer element */
footer {
font-size: .70em;
text-align: center;
}

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

Dear Student ,

As per the requirement submitted above , kindly find the below solution.

Here a new web page with name "apply08.html" is created, which contains following code.

apply08.html :

<!DOCTYPE html>

<html lang="en">

<head>

<!--title for web page -->

<title>create a table and apply table styles</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<!--link refers to external style sheet file -->

<link href="applystyles08.css" rel="stylesheet">

</head>

<body>

<!--main element -->

<main>

<!--table -->

<table>

<!--caption for table -->

<caption>2017 Sales by Quarter</caption>

<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>$24,500</td>

<td>$21,525</td>

<td>$20,217</td>

<td>$28,575</td>

</tr>

<tr>

<th>Monitors</th>

<td>$12,825</td>

<td>$12,400</td>

<td>$11,900</td>

<td>$14,233</td>

</tr>

<tr>

<th>Laptops</th>

<td>$33,000</td>

<td>$32,750</td>

<td>$31,595</td>

<td>$32,465</td>

</tr>

<tr>

<th>Desktops</th>

<td>$21,478</td>

<td>$20,895</td>

<td>$18,200</td>

<td>$21,625</td>

</tr>

</table>

</main>

</body>

</html>

*****************

applystyles08.css :

/* Style sheet created by: Student's First Name Student's Last Name, Today's Date */

/*style rule for table */

table {

width: 80%;

margin-left: auto;

margin-right: auto;

}

/*style rule for table ,tr,th and td */

table, tr, th, td {

border-collapse: collapse;

border: solid 0.1em #000000;

padding: 1em;

}

/*style rule for td */

td {

text-align: center;

}

/*style rule for caption */

caption {

font-size: 2em;

padding: 1em;

margin-top: 1em;

}

/* Style for body specifies a background color */

body {

background-color: #669999;

}

/* Style for the container element */

#container {

width: 90%;

margin-left: auto;

margin-right: auto;

}

/* Style for the footer element */

footer {

font-size: .70em;

text-align: center;

}

======================================================

Output : Open web page apply08.html in the browser and will get the screen as shown below

Screen 1 :apply08.html

Screen 2 :html code is validated on https://validator.w3.org , will get following screen

NOTE : PLEASE FEEL FREE TO PROVIDE FEEDBACK ABOUT THE SOLUTION.

0 0
Add a comment
Know the answer?
Add Answer to:
You will use your text editor to create a table and apply table styles. First, you...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • Can you please assist me with this HTML? Below is what I have but it isn't...

    Can you please assist me with this HTML? Below is what I have but it isn't working. Filename: jpf_sudoku.css /* Table Styles */ table.spuzzle { border-collapse: collapse; margin-top: 0px; margin-bottom: 0px; margin-left: auto; margin-right: auto; width: 90%; } table.spuzzle td { border: 5px outset gray; width: 33.3%; } table.spuzzle th { font color: gray; padding-right: 10px; padding-bottom: 10px; } /* Inner Table Styles */ table.subTable { border-collapse: collapse; width: 100%; } table.subTable td { box-shadow: 0px 0px 15px inset; border:...

  • <!DOCTYPE html> <html> <head> <title>Products</title> <style> .heading { text-align: center; font-size: 40px; } #menu { text-align:...

    <!DOCTYPE html> <html> <head> <title>Products</title> <style> .heading { text-align: center; font-size: 40px; } #menu { text-align: center; } #menu li { display: inline; font-size: 26px; margin-left: 20px; } .container{ overflow: hidden; margin: 30px; } img { float: left; width: 40vh; height: 40vh; margin-left: 10%; } table { float: right; margin-right: 10%; } table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { font-size: 26px; padding: 10px; text-align: left; } a { color: black; } a:visted {...

  • Overview The purpose of this assignment is to explore the manner in which CSS styles can...

    Overview The purpose of this assignment is to explore the manner in which CSS styles can be transported into an external file. Assignment You may find the W3 Schools examples on this process useful (http://www.w3schools.com/css/css_howto.asp). Once you have a working understanding of how to move your stylesheet outside of the HTML file and into a CSS file, remove and style information from your Weekly Assignment #02's HTML file and move it to an externally attached CSS file. When you are...

  • HTML/CSS: Modify the table you created in hands-on exercise 8.1 to be centered on the page,...

    HTML/CSS: Modify the table you created in hands-on exercise 8.1 to be centered on the page, use a background color of #CCCC99, and display text in arial or the browser default sans-serif font. Configure this table using CSS instead of obsolete HTML attributes. Place an e-mail link to yourself on the web page. Save the file as mytable.html. HERE IS THE CODE FOR 8.1: <!DOCTYPE html> <html lang="en"> <head> <title>Practice with Tables</title> <meta charset="utf-8"> </head> <body> <table border="1" > <caption>School...

  • Apply the following styles: Set the width of the body element to 1000 pixels. Set the...

    Apply the following styles: Set the width of the body element to 1000 pixels. Set the width of the navigation element to 100%. Adjust the css and html to have your navigation list display horizontally (think floats and widths). Center the navigation element by setting the margin to auto. Clear the float for the section element. Set the width of all articles to 75%. Add a class to the articles that contains your favorite websites. Set the width of that...

  • Does my css style sheet look okay? /* Author:       Your Name --> Natasha Strange /*...

    Does my css style sheet look okay? /* Author:       Your Name --> Natasha Strange /* Date:           Today's Date --> September 22, 2019 /* Description:   Lab Number --> Lab04 /*doctype css*/ @import url(fonts/chuckfive.css); @import url(fonts/merriweather.css); body    { background-color: rgb(199,201,191);        } div { border: 1px solid black;        padding: 100px 100px 100px 100px;        background-color: gray; } nav { text-align: center;    color: rgb( 7,20,138); } header, footer   { background-color: rgb(199,201,199);        color:...

  • How do I make these sheets into three different tabs for one website? This is all...

    How do I make these sheets into three different tabs for one website? This is all using HTML. - Chade's Bicycle Company <!DOCTYPE html> <html> <head> <img src="Chade'sLogo.png"> </head> <body bgcolor= "white"> <center> Welcome to Chade's Bicycle Company!</center> <center> We aim towards making our customers happy. </center> <br> <center> Chade's Bicycle Company </center> <center>2900 Bicycle Ave.</center> <center>Seattle, Washington</center> <center>98101</center> <br> <center><img src="HappyCustomer.png" alt="Satisfied customers"></center> <br> <p align="right">Our mission statement:</p> <p align="right">Bicycles have always been a </p> <p align="right">positive part of...

  • Hello Ive been tryting to add the CDN of jquery to my html code and I...

    Hello Ive been tryting to add the CDN of jquery to my html code and I keep getting an error Need help with this : ​​ Navigate to www.code.jquery.com in your Chrome browser. On this page, you'll find different stable versions of jQuery. Select uncompressed for jQuery Core 3.3.1. Copy the <script> tag that is given to you. In store_hours.html, paste that tag directly above your body's closing tag. This is the jQuery CDN. After you paste this code into...

  • How to make all the buttons work using javascript? <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta...

    How to make all the buttons work using javascript? <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script> function openAccount() { /* - get the account and initial amount values - check that all necessary information is provided - call the setCookie function to create account */ } function Deposit() { /* - get the account and amount values - check that all necessary information is provided - alter cookie with current amount of deposit */ } function...

  • As part of this assignment we are using the base Gallery HTML and writing JavaScript code...

    As part of this assignment we are using the base Gallery HTML and writing JavaScript code that will: 1) preload the images provided to us, 2) Create rollover functionality for each of the thumbnails in your image gallery 3) Use appropriate images found in the images folder. 4) Write developer comments to describe the variables being declared and explain the functions and logical blocks of JavaScript code pertaining to the gallery. I know it has to be an external JS...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
Active Questions
ADVERTISEMENT