• A descendant selector that targets the <caption> inside the <table> should: • Use the text-transform property to make the caption UPPERCASE • Set the background color using the CSS variable --table-color • Set the font color to white • Add 10px padding • A pseudo-class selector :nth-child(even) for <tr> should: • Set the background color using the CSS variable --row-bg-color.
Added by Jacqueline B.
Close
Step 1
The first involves styling a caption within a table using a descendant selector. The second involves styling even rows within a table using a pseudo-class selector. Show more…
Show all steps
Your feedback will help us improve your experience
Akash M and 52 other AP CS educators are ready to help you.
Ask a new question
Labs
Want to see this concept in action?
Explore this concept interactively to see how it behaves as you change inputs.
Key Concepts
Recommended Videos
Text: CSS Table Layout Open the mi_tables.css and go to the Table Styles section and add a style rule for the table element that: - sets the background color to a linear gradient that goes to the bottom of the table background starting from rgb(190, 215, 255) and ending in black, and - adds a 5-pixel solid gray border. Table Elements For every th and td element in the table, create a style rule that: - adds a 3-pixel solid gray border, - sets the line height to 1.4em, and - sets the padding space to 8 pixels. For every th element, create a style rule that: - sets the background color to black, - sets the font color to rgb(130, 210, 255), and - sets the font weight to normal. For every td element, create a style rule that: - sets the font color to white, - sets the font size to 0.9em, and - aligns the cell text with the top of the cell. Table Column Styles Go to the Column Styles section. Create a style rule for col elements with the ID firstCol that sets the column width to 24%. Create a style rule for col elements belonging to the dataCols class that sets the column width to 19%. Table Header Styles Go to the Table Header Styles section. Create a style rule for the table header row group, including every row within that row group, that sets the row height to 60 pixels. For the first th element in the first row of the table header row group, create a style rule that sets its font size to 2em. (Hint: Use the first-of-type pseudo-class to select the first table row and first heading cell.) For th elements in the first row of the table header row group that are not the first heading cell, create a style rule that sets the background color to transparent and the font color to black. (Hint: use the not selector with the first-of-type pseudo-class to select headings that are not first in the table row.) @charset "utf-8"; /* New Perspectives on HTML and CSS Tutorial 6 Case Problem 1 Tables Style Sheet Author: Date: Filename: mi_tables.css */
Akash M.
In the index.html file, create a table with seven rows and four columns. Include a caption with the text, "Course Schedule." Use the skills you have learned in this chapter to create the table shown in Figure 8-68. Note that you will need to properly use the thead and tbody elements, as well as rowspan and colspan attributes. Use the styles.css file to create style rules to design the table as shown in Figure 8-68. The table uses the following hexadecimal color codes: ffe5dc (body background-color), fd4d0c (table border color), 792101 (box shadow color), a22c02 (table data border color), fe9772 (odd rows background color). Apply a box shadow to the table and a sans-serif font to the page. <!DOCTYPE html> <html lang="en"> <head> <title>Chapter 8, Extend</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/styles.css"> </head> <body> <table id="tableb"> <caption><h2>Course Schedule</h2></caption> <thead> <tr> <th rowspan="2">Class</th> <th colspan="4">Term</th> </tr> <tr> <th>Fall</th> <th>Spring</th> <th>Summer</th> </tr> </thead> <tbody> <tr> <td>Webpage Design</td> <td>MW 11:00-12:15pm</td> <td>TR 12:30-1:45pm</td> <td>Online</td> </tr> <tr> <td>JavaScript</td> <td>M 5:00-7:45pm</td> <td>T 11:00-12:15pm</td> <td>Hybrid</td> </tr> <tr> <td>Advanced Webpage Design</td> <td>R 5:00-7:45pm</td> <td>T 7:00-9:45pm</td> <td>Online</td> </tr> <tr> <td>Introduction to Programming</td> <td>TR 2:00-3:15pm</td> <td>MW 2:00-3:15pm</td> <td>Not Available</td> </tr> <tr> <td>Graphic Design</td> <td>M 5:00-7:45pm</td> <td>W 7:00-9:45pm</td> <td>Not Available</td> </tr> </tbody> </table> </body> </html> /* CSS Reset */ body, main, footer, table { margin: 0; padding: 0; border: 0; } /* Style rule for the container */ #container { width: 80%; margin: 0 auto; }
Use the styles.css file to create style rules to design the table as shown in Figure 8-68. The table uses the following hexadecimal color codes: ffe5dc (body background-color), fd4d0c (table border color), 792101 (box shadow color), a22c02 (table data border color), fe9772 (odd rows background color). Apply a box shadow to the table and a sans-serif font to the page. styles.css: /* CSS Reset */ body, main, footer, table { margin: 0; padding: 0; border: 0; } /* Style rule for the container */ #container { width: 80%; margin: 0 auto; } body { background-color: #ffe5dc; font-family: sans-serif; } h2 { text-align: center; color: #a22c02; } table { width: 700px; margin: auto; border: 4px solid #fd4d0c; box-shadow: 10px 10px 5px #792101; border-collapse: collapse; } table tr td { border: 1px solid #a22c02; } tr:nth-child(odd) { background-color: #fe9772; } table thead th { background-color: #a22c02; border: 1px solid white; color: white; } table th, td { padding: 8px; } p { color: black; text-align: center; padding-top: 15px; }
Aarya B.
Recommended Textbooks
Computer Science and Information Technology
Introduction to Programming Using Python
Computer Science - An Overview
Transcript
18,000,000+
Students on Numerade
Trusted by students at 8,000+ universities
Watch the video solution with this free unlock.
EMAIL
PASSWORD