Aceelerate wifth Mo Speed ITraps

How do you use the web? Whether it's just you on your PC or your extended family simultaneously accessing the Internet for gaming, movie watching, surfing, or music, we have the speed for you $-$ with no hidden fees, service charges, or other traps. Marlin Internet provides a broad variety of access plans at affordable prices with our exclusive ITIS $2\mathrm{.}0$ technology. We provide more than fast access. Take advantage of our $24/7$ customer support $($personal help is always on the line$),$ free security tools, email accounts for the whole family, and exclusive online content.

$\backslash$table$[[$select a$,$Starter,Prime,Prime Plus,Ultra$],[$plan$,\backslash$table$[[$$$19\mathrm{.}95$

Summary

Marlin Internet $-$ Luis Amador manages the website for Marlin Internet, an Internet service provider located in Crystal River, Florida. You have recently been hired to assist in the redesign of the company$$s website. Luis has asked you to complete work he$$s begun on a page describing different pricing plans offered by Marlin Internet. A preview of the page is shown in Figure $653.$

A homepage preview of Marlin Internet Pricing website. The header of the webpage displays the background image and five tabs listed below the heading, Marlin Internet are: Internet, Home Networking, My Account, Shop and Support. The sub$-$heading, Accelerate with No Speed Traps is shown below the tabs accompanied by a descriptive paragraph. The internet plan is displayed in a table with $6$ rows and $5$ columns. Figure $6-53$

Luis has already finished most of the page design. Your job will be to add a web table describing the different service plans and to write the CSS code to format the table$$s appearance.

Document Setup

Open the mi$\_$pricing.html and mi$\_$tables.css files and enter your name and the date in the comment section of each file. Next, go to the mi$\_$pricing.html file and add a link to the mi$\_$tables.css style sheet file to the document head.

Create the 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.

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

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

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.

You can copy the summary text for each service plan from the mi$\_$data.txt file.

Table Styles

Open the mi$\_$tables.css file 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.

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\mathrm{.}4$em$,$ 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\mathrm{.}9$em$,$ and

aligns the cell text with the top of the cell.

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 $2$em$.$

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.

Use the not selector with the first$-$of$-$type pseudo$-$class to select headings that are not first in the table row.

Open the mi$\_$pricing.html file in your browser and verify that the table