SlideShare a Scribd company logo
1 of 4
Download to read offline
please use bbedit or notepad++
Apply Your Knowledge
Reinforce the skills and apply the concepts you learned in this chapter.
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 file in the
apply folder and the applystyles08.css file in the applycss folder from the Data Files for
Students. The completed webpage is shown in Figure 860. You will also use professional web
development practices to indent, space, comment, and validate your code.
Figure 860
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 todays date, and replace Students Name with your
name in the footer element.
2. Open the applystyles08.css file from the applycss folder. Modify the comment at the top of
the style sheet to include your name and todays date.
3. In the apply08.html file, add atableelement within themainelement. 4. In the apply08.html file,
add the following caption to thetableelement:
2017 Sales by Quarter 5. In the apply08.html file, add the following elements within
thetableelement:
ProductQuarter 1
Apply Your Knowledge continued
Quarter 2Quarter 3Quarter
4Tablets$24,500$21,525$20,217$28,575Monitors$12,825$12,400$11,900$14,233Laptops$33,0
00$32,750$31,595$32,465Desktops$21,478$20,895$18,200$21,625
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;
} td { } caption {
}
border: solid 0.1em #000000; padding: 1em;
text-align: center;
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?
please use bbedit or notepad++
Apply Your Knowledge
Reinforce the skills and apply the concepts you learned in this chapter.
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 file in the
apply folder and the applystyles08.css file in the applycss folder from the Data Files for
Students. The completed webpage is shown in Figure 860. You will also use professional web
development practices to indent, space, comment, and validate your code.
Figure 860
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 todays date, and replace Students Name with your
name in the footer element.
2. Open the applystyles08.css file from the applycss folder. Modify the comment at the top of
the style sheet to include your name and todays date.
3. In the apply08.html file, add atableelement within themainelement. 4. In the apply08.html file,
add the following caption to thetableelement:
2017 Sales by Quarter 5. In the apply08.html file, add the following elements within
thetableelement:
ProductQuarter 1
Apply Your Knowledge continued
Quarter 2Quarter 3Quarter
4Tablets$24,500$21,525$20,217$28,575Monitors$12,825$12,400$11,900$14,233Laptops$33,0
00$32,750$31,595$32,465Desktops$21,478$20,895$18,200$21,625
6. In the applystyles08.css file, create the following style rules:
table {
}
width: 80%; margin-left: auto; margin-right: auto;
Apply Your Knowledge continued
Quarter 2Quarter 3Quarter
4Tablets$24,500$21,525$20,217$28,575Monitors$12,825$12,400$11,900$14,233Laptops$33,0
00$32,750$31,595$32,465Desktops$21,478$20,895$18,200$21,625
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;
} td { } caption {
}
border: solid 0.1em #000000; padding: 1em;
text-align: center;
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?
table, tr, th, td { border-collapse: collapse;
} td { } caption {
}
border: solid 0.1em #000000; padding: 1em;
text-align: center;
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?

More Related Content

Similar to please use bbedit or notepad++Apply Your KnowledgeReinforce th.pdf

Portalimagesstart_here.jpgPortalindex.htmlClasses      .docx
Portalimagesstart_here.jpgPortalindex.htmlClasses      .docxPortalimagesstart_here.jpgPortalindex.htmlClasses      .docx
Portalimagesstart_here.jpgPortalindex.htmlClasses      .docx
ChantellPantoja184
 
ITECH2106-6106 Lab01-HTML CSS Intro and Needs Analysis.pdf.docx
ITECH2106-6106 Lab01-HTML CSS Intro and Needs Analysis.pdf.docxITECH2106-6106 Lab01-HTML CSS Intro and Needs Analysis.pdf.docx
ITECH2106-6106 Lab01-HTML CSS Intro and Needs Analysis.pdf.docx
christiandean12115
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
butest
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
butest
 
Css introduction
Css introductionCss introduction
Css introduction
Sridhar P
 
Teched Inetrgation ppt and lering in simple
Teched Inetrgation ppt  and lering in simpleTeched Inetrgation ppt  and lering in simple
Teched Inetrgation ppt and lering in simple
JagadishBabuParri
 
Aspnet mvc tutorial_9_cs
Aspnet mvc tutorial_9_csAspnet mvc tutorial_9_cs
Aspnet mvc tutorial_9_cs
Murali G
 
Using Cascading Style Sheets2
Using Cascading Style Sheets2Using Cascading Style Sheets2
Using Cascading Style Sheets2
Sutinder Mann
 

Similar to please use bbedit or notepad++Apply Your KnowledgeReinforce th.pdf (20)

Portalimagesstart_here.jpgPortalindex.htmlClasses      .docx
Portalimagesstart_here.jpgPortalindex.htmlClasses      .docxPortalimagesstart_here.jpgPortalindex.htmlClasses      .docx
Portalimagesstart_here.jpgPortalindex.htmlClasses      .docx
 
MadCap Flare Tips and Tricks - Scott DeLoach, ClickStart
MadCap Flare Tips and Tricks - Scott DeLoach, ClickStartMadCap Flare Tips and Tricks - Scott DeLoach, ClickStart
MadCap Flare Tips and Tricks - Scott DeLoach, ClickStart
 
ITECH2106-6106 Lab01-HTML CSS Intro and Needs Analysis.pdf.docx
ITECH2106-6106 Lab01-HTML CSS Intro and Needs Analysis.pdf.docxITECH2106-6106 Lab01-HTML CSS Intro and Needs Analysis.pdf.docx
ITECH2106-6106 Lab01-HTML CSS Intro and Needs Analysis.pdf.docx
 
Shyam sunder Rajasthan Computer
Shyam sunder Rajasthan ComputerShyam sunder Rajasthan Computer
Shyam sunder Rajasthan Computer
 
Writing your own WordPress themes and plugins
Writing your own WordPress themes and pluginsWriting your own WordPress themes and plugins
Writing your own WordPress themes and plugins
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
 
Css 2010
Css 2010Css 2010
Css 2010
 
Css 2010
Css 2010Css 2010
Css 2010
 
Css introduction
Css introductionCss introduction
Css introduction
 
M02 un10 p01
M02 un10 p01M02 un10 p01
M02 un10 p01
 
Teched Inetrgation ppt and lering in simple
Teched Inetrgation ppt  and lering in simpleTeched Inetrgation ppt  and lering in simple
Teched Inetrgation ppt and lering in simple
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
 
BP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
BP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog TemplateBP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
BP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
 
Aspnet mvc tutorial_9_cs
Aspnet mvc tutorial_9_csAspnet mvc tutorial_9_cs
Aspnet mvc tutorial_9_cs
 
Using Cascading Style Sheets2
Using Cascading Style Sheets2Using Cascading Style Sheets2
Using Cascading Style Sheets2
 
Advanced Cascading Style Sheets
Advanced Cascading Style SheetsAdvanced Cascading Style Sheets
Advanced Cascading Style Sheets
 
advance theme development
advance theme developmentadvance theme development
advance theme development
 
Web technology presentation
Web technology presentation Web technology presentation
Web technology presentation
 
Master page
Master pageMaster page
Master page
 

More from amarndsons

Please write the mysh program in C and follow the guidelines specifi.pdf
Please write the mysh program in C and follow the guidelines specifi.pdfPlease write the mysh program in C and follow the guidelines specifi.pdf
Please write the mysh program in C and follow the guidelines specifi.pdf
amarndsons
 
Please write the program mysh in C programming language and follow.pdf
Please write the program mysh in C programming language and follow.pdfPlease write the program mysh in C programming language and follow.pdf
Please write the program mysh in C programming language and follow.pdf
amarndsons
 
Please write the C++ code that would display the exact same output a.pdf
Please write the C++ code that would display the exact same output a.pdfPlease write the C++ code that would display the exact same output a.pdf
Please write the C++ code that would display the exact same output a.pdf
amarndsons
 
Please write a detailed post responding to this question.Question.pdf
Please write a detailed post responding to this question.Question.pdfPlease write a detailed post responding to this question.Question.pdf
Please write a detailed post responding to this question.Question.pdf
amarndsons
 
Please write a detailed assessment of the long-term advantages and d.pdf
Please write a detailed assessment of the long-term advantages and d.pdfPlease write a detailed assessment of the long-term advantages and d.pdf
Please write a detailed assessment of the long-term advantages and d.pdf
amarndsons
 
PLEASE USE TuProlog for this. Also the facts need to be Binary Fac.pdf
PLEASE USE TuProlog for this. Also the facts need to be Binary Fac.pdfPLEASE USE TuProlog for this. Also the facts need to be Binary Fac.pdf
PLEASE USE TuProlog for this. Also the facts need to be Binary Fac.pdf
amarndsons
 
Please tell me why I get this error in my code I have the screen sh.pdf
Please tell me why I get this error in my code I have the screen sh.pdfPlease tell me why I get this error in my code I have the screen sh.pdf
Please tell me why I get this error in my code I have the screen sh.pdf
amarndsons
 
Please teach me how to fix the errors and where should be modified. .pdf
Please teach me how to fix the errors and where should be modified. .pdfPlease teach me how to fix the errors and where should be modified. .pdf
Please teach me how to fix the errors and where should be modified. .pdf
amarndsons
 

More from amarndsons (20)

Plot the marginal utility of food. Remember to plot using midpoints#.pdf
Plot the marginal utility of food. Remember to plot using midpoints#.pdfPlot the marginal utility of food. Remember to plot using midpoints#.pdf
Plot the marginal utility of food. Remember to plot using midpoints#.pdf
 
Please write the mysh program in C and follow the guidelines specifi.pdf
Please write the mysh program in C and follow the guidelines specifi.pdfPlease write the mysh program in C and follow the guidelines specifi.pdf
Please write the mysh program in C and follow the guidelines specifi.pdf
 
Please write the program mysh in C programming language and follow.pdf
Please write the program mysh in C programming language and follow.pdfPlease write the program mysh in C programming language and follow.pdf
Please write the program mysh in C programming language and follow.pdf
 
Please write the C++ code that would display the exact same output a.pdf
Please write the C++ code that would display the exact same output a.pdfPlease write the C++ code that would display the exact same output a.pdf
Please write the C++ code that would display the exact same output a.pdf
 
please write in C programming Write in C code that is able to rea.pdf
please write in C programming  Write in C code that is able to rea.pdfplease write in C programming  Write in C code that is able to rea.pdf
please write in C programming Write in C code that is able to rea.pdf
 
please will you answer the following questions about chromatin struc.pdf
please will you answer the following questions about chromatin struc.pdfplease will you answer the following questions about chromatin struc.pdf
please will you answer the following questions about chromatin struc.pdf
 
Please write a detailed post responding to this question.Question.pdf
Please write a detailed post responding to this question.Question.pdfPlease write a detailed post responding to this question.Question.pdf
Please write a detailed post responding to this question.Question.pdf
 
Please write a detailed assessment of the long-term advantages and d.pdf
Please write a detailed assessment of the long-term advantages and d.pdfPlease write a detailed assessment of the long-term advantages and d.pdf
Please write a detailed assessment of the long-term advantages and d.pdf
 
PLEASE USE TuProlog for this. Also the facts need to be Binary Fac.pdf
PLEASE USE TuProlog for this. Also the facts need to be Binary Fac.pdfPLEASE USE TuProlog for this. Also the facts need to be Binary Fac.pdf
PLEASE USE TuProlog for this. Also the facts need to be Binary Fac.pdf
 
Please use your own word and dont copy and paste the anwser from ke.pdf
Please use your own word and dont copy and paste the anwser from ke.pdfPlease use your own word and dont copy and paste the anwser from ke.pdf
Please use your own word and dont copy and paste the anwser from ke.pdf
 
Please use one of the 2 Excel files (BirdSrtike or Super-SampleStore.pdf
Please use one of the 2 Excel files (BirdSrtike or Super-SampleStore.pdfPlease use one of the 2 Excel files (BirdSrtike or Super-SampleStore.pdf
Please use one of the 2 Excel files (BirdSrtike or Super-SampleStore.pdf
 
Please state whether each of the following statements is True or Fal.pdf
Please state whether each of the following statements is True or Fal.pdfPlease state whether each of the following statements is True or Fal.pdf
Please state whether each of the following statements is True or Fal.pdf
 
Please tell me why I get this error in my code I have the screen sh.pdf
Please tell me why I get this error in my code I have the screen sh.pdfPlease tell me why I get this error in my code I have the screen sh.pdf
Please tell me why I get this error in my code I have the screen sh.pdf
 
Please teach me how to fix the errors and where should be modified. .pdf
Please teach me how to fix the errors and where should be modified. .pdfPlease teach me how to fix the errors and where should be modified. .pdf
Please teach me how to fix the errors and where should be modified. .pdf
 
please solve this problem using R language 3. The following data .pdf
please solve this problem using R language  3. The following data .pdfplease solve this problem using R language  3. The following data .pdf
please solve this problem using R language 3. The following data .pdf
 
Please show all the necessary steps to find the above op code Q2. (1.pdf
Please show all the necessary steps to find the above op code Q2. (1.pdfPlease show all the necessary steps to find the above op code Q2. (1.pdf
Please show all the necessary steps to find the above op code Q2. (1.pdf
 
Please show all steps i want to understand whats happening. 2- Solve.pdf
Please show all steps i want to understand whats happening. 2- Solve.pdfPlease show all steps i want to understand whats happening. 2- Solve.pdf
Please show all steps i want to understand whats happening. 2- Solve.pdf
 
Please Show all work. 1. Show that the language L1={ann is prime } .pdf
Please Show all work. 1. Show that the language L1={ann is prime } .pdfPlease Show all work. 1. Show that the language L1={ann is prime } .pdf
Please Show all work. 1. Show that the language L1={ann is prime } .pdf
 
please show your work (Remember You may find the standard normal ta.pdf
please show your work (Remember You may find the standard normal ta.pdfplease show your work (Remember You may find the standard normal ta.pdf
please show your work (Remember You may find the standard normal ta.pdf
 
Please show the math for the stepsPart 1A.Part 1BPart 1C Us.pdf
Please show the math for the stepsPart 1A.Part 1BPart 1C Us.pdfPlease show the math for the stepsPart 1A.Part 1BPart 1C Us.pdf
Please show the math for the stepsPart 1A.Part 1BPart 1C Us.pdf
 

Recently uploaded

Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
ZurliaSoop
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
QucHHunhnh
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
QucHHunhnh
 

Recently uploaded (20)

Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
 
How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17
 
ComPTIA Overview | Comptia Security+ Book SY0-701
ComPTIA Overview | Comptia Security+ Book SY0-701ComPTIA Overview | Comptia Security+ Book SY0-701
ComPTIA Overview | Comptia Security+ Book SY0-701
 
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy Consulting
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
 
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
 
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17  How to Extend Models Using Mixin ClassesMixin Classes in Odoo 17  How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
 
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfUGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docx
 
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
 
PROCESS RECORDING FORMAT.docx
PROCESS      RECORDING        FORMAT.docxPROCESS      RECORDING        FORMAT.docx
PROCESS RECORDING FORMAT.docx
 
Asian American Pacific Islander Month DDSD 2024.pptx
Asian American Pacific Islander Month DDSD 2024.pptxAsian American Pacific Islander Month DDSD 2024.pptx
Asian American Pacific Islander Month DDSD 2024.pptx
 
Food safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfFood safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdf
 
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptx
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
 

please use bbedit or notepad++Apply Your KnowledgeReinforce th.pdf

  • 1. please use bbedit or notepad++ Apply Your Knowledge Reinforce the skills and apply the concepts you learned in this chapter. 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 file in the apply folder and the applystyles08.css file in the applycss folder from the Data Files for Students. The completed webpage is shown in Figure 860. You will also use professional web development practices to indent, space, comment, and validate your code. Figure 860 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 todays date, and replace Students Name with your name in the footer element. 2. Open the applystyles08.css file from the applycss folder. Modify the comment at the top of the style sheet to include your name and todays date. 3. In the apply08.html file, add atableelement within themainelement. 4. In the apply08.html file, add the following caption to thetableelement: 2017 Sales by Quarter 5. In the apply08.html file, add the following elements within thetableelement: ProductQuarter 1 Apply Your Knowledge continued Quarter 2Quarter 3Quarter 4Tablets$24,500$21,525$20,217$28,575Monitors$12,825$12,400$11,900$14,233Laptops$33,0 00$32,750$31,595$32,465Desktops$21,478$20,895$18,200$21,625 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; } td { } caption {
  • 2. } border: solid 0.1em #000000; padding: 1em; text-align: center; 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? please use bbedit or notepad++ Apply Your Knowledge Reinforce the skills and apply the concepts you learned in this chapter. 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 file in the apply folder and the applystyles08.css file in the applycss folder from the Data Files for Students. The completed webpage is shown in Figure 860. You will also use professional web development practices to indent, space, comment, and validate your code. Figure 860 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 todays date, and replace Students Name with your name in the footer element. 2. Open the applystyles08.css file from the applycss folder. Modify the comment at the top of the style sheet to include your name and todays date. 3. In the apply08.html file, add atableelement within themainelement. 4. In the apply08.html file, add the following caption to thetableelement: 2017 Sales by Quarter 5. In the apply08.html file, add the following elements within
  • 3. thetableelement: ProductQuarter 1 Apply Your Knowledge continued Quarter 2Quarter 3Quarter 4Tablets$24,500$21,525$20,217$28,575Monitors$12,825$12,400$11,900$14,233Laptops$33,0 00$32,750$31,595$32,465Desktops$21,478$20,895$18,200$21,625 6. In the applystyles08.css file, create the following style rules: table { } width: 80%; margin-left: auto; margin-right: auto; Apply Your Knowledge continued Quarter 2Quarter 3Quarter 4Tablets$24,500$21,525$20,217$28,575Monitors$12,825$12,400$11,900$14,233Laptops$33,0 00$32,750$31,595$32,465Desktops$21,478$20,895$18,200$21,625 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; } td { } caption { } border: solid 0.1em #000000; padding: 1em; text-align: center; 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?
  • 4. table, tr, th, td { border-collapse: collapse; } td { } caption { } border: solid 0.1em #000000; padding: 1em; text-align: center; 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?