Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

Help!! Linking CSS File Enter your name and the date in the comment section of mi_pricing.html and mi_tables.css. Go to the mi_pricing.html file and add

Help!!

Linking CSS File

Enter your name and the date in the comment section of mi_pricing.html and mi_tables.css. Go to the mi_pricing.html file and add a link to the mi_tables.css style sheet file to the document head.

Web Table

Directly after the paragraph in the article element insert a web table with the ID pricing.

Add a colgroup element to the web table containing two col elements. The first col element should have the ID firstCol. The second col element should belong to the class dataCols and span 4 columns.

Head, Foot, Body

Add a thead row group element containing two rows. In the first row, insert five th elements containing the text shown in the image in the Introduction section. The first heading cell should span two rows. In the second row, add four headings cells containing the prices of the plans shown in the image in the Introduction section. Use a br element to display the price information on two separate lines.

Add a tfoot row group element containing a single table row with a heading th element displaying the text Summary . Add four data td elements containing a description of each of the service plans. (Note: You can copy the summary text for each service plan from the mi_data.txt file.)

Add a tbody row group element. In each row within the row group, add a th element containing the text shown in the image in the Introduction section and four td elements containing the data values for each plan.

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-pixels 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.)

Verify

Open the mi_pricing.html file and press the Build Website button. Verify that the table layout and design resemble the example image shown in the Introduction section.

Review the webpage you have created on the right side of the screen.

Validate

You can use the W3C HTML Validator to ensure that your HTML files adhere to World Wide Web (W3) standards. This also helps improve the readability of your HTML files, making them easier to work with.

Step by Step Solution

There are 3 Steps involved in it

Step: 1

blur-text-image

Get Instant Access to Expert-Tailored Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image

Step: 3

blur-text-image

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Recommended Textbook for

More Books

Students also viewed these Databases questions

Question

Identify the different methods employed in the selection process.

Answered: 1 week ago

Question

Demonstrate the difference between ability and personality tests.

Answered: 1 week ago