Hello. I\'m trying to complete the CSS to a table in HTML. First, here\'s the HT
ID: 3905324 • Letter: H
Question
Hello. I'm trying to complete the CSS to a table in HTML.
First, here's the HTML:
<!DOCTYPE html>
<html>
<head>
<!--
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 6
Case Problem 1
Marlin Internet Pricing
Filename: mi_pricing.html
-->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Marlin Internet</title>
<link href="mi_reset.css" rel="stylesheet" />
<link href="mi_styles.css" rel="stylesheet" />
<link href="mi_tables.css" rel="stylesheet" />
</head>
<body>
<header>
<img src="mi_logo.png" alt="Marlin Internet" id="logoimg" />
<nav>
<a id="navicon" href="#"><img src="mi_navicon.png" alt="" /></a>
<ul>
<li><a href="#">Internet</a></li>
<li><a href="#">Home Networking</a></li>
<li><a href="#">My Account</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Support</a></li>
</ul>
</nav>
</header>
<article>
<h1>Accelerate with No Speed Traps</h1>
<p>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. <strong>Marlin Internet</strong> provides a broad variety
of access plans at affordable prices with our exclusive ITIS 2.0 technology.
We provide more than fast access. Take advantage of our 24/7 customer support
(personal help is <em>always</em> on the line), free security tools, email accounts
for the whole family, and exclusive online content.</p>
<table id="pricing">
<tr id="firstCol">
<thead>
<tr>
<th rowspan="2">select a plan</th>
<th>Starter</th>
<th>Prime</th>
<th>Prime Plus</th>
<th>Ultra</th>
</tr>
<tr>
<th>$19.95 <br>per month</th>
<th>$29.95 <br>per month</th>
<th>$49.95 <br>per month</th>
<th>$69.95 <br>per month</th>
</tr>
</thead>
<tbody>
<tr>
<th>Download Speed</th>
<th>3 Mbps</th>
<th>15 Mbps</th>
<th>25 Mbps</th>
<th>50 Mbps</th>
</tr>
<tr>
<th>Upload Speed</th>
<th>512 Kbps</th>
<th>6 Mbps</th>
<th>10 Mbps</th>
<th>20 Mbps</th>
</tr>
<tr>
<th>Cloud Storage</th>
<th>2 GB</th>
<th>5 GB</th>
<th>15 GB</th>
<th>40 GB</th>
</tr>
<tr>
<th>E-mail Accounts</th>
<th>2 Accounts</th>
<th>3 Accounts</th>
<th>5 Accounts</th>
<th>10 Accounts</th>
</tr>
<tr>
<th>24/7 Support</th>
<th>Yes</th>
<th>Yes</th>
<th>Yes</th>
<th>Yes</th>
</tr>
</tbody>
<tfoot>
<tr>
<th>Summary</th>
<td>Just the speed you need to send emails, download map directions, and search the internet for restaurant reviews.</td>
<td>A great speed at a great price for the family: kids can play games, adults can pay bills, and everyone can surf at the same time.</td>
<td>Super speeds for multiple tasks that require more broadband capacity: ideal for gamers who need fast response times.</td>
<td>Perfect for a small business running mulitple media streams, demanding reduced lag time, and fast data delivery.</td>
</tr>
</tfoot>
</tr>
<tr class="dataCols">
</tr>
</table>
</article>
<footer>
<nav>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Parental Controls</a></li>
<li><a href="#">Our Locations</a></li>
</ul>
<ul>
<li><a href="#">Internet</a></li>
<li><a href="#">TV</a></li>
<li><a href="#">TiVo</a></li>
<li><a href="#">Home Security</a></li>
<li><a href="#">Phone</a></li>
</ul>
<ul>
<li><a href="#">Web Mail</a></li>
<li><a href="#">My Account</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<img src="mi_art.png" alt="" class="clipart" />
</footer>
</body>
</html>
Next, here are the directions:
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-typepseudo-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 thefirst-of-type pseudo-class to select headings that are not first in the table row.)
And here's my CSS so far:
@charset "utf-8";
/*
New Perspectives on HTML and CSS
Tutorial 6
Case Problem 1
Tables Style Sheet
Filename: mi_tables.css
*/
/* Table Styles */
table {
background: linear-gradient(to bottom, rgb(190, 215, 255), black);
border: 5px solid gray;
}
th, td {
border: 3px solid gray;
height: 1.4em;
padding: 8px;
}
th {
background-color: black;
color: rgb(130, 210, 255);
font-weight: normal;
}
td {
color: white;
font-size: 0.9em;
text-align: top;
}
/* Column Styles */
#firstCol {
width: 24%;
}
.dataCols {
width: 19%;
}
/* Table Header Styles */
Not sure what to do here in the Table Header Styles section.
Explanation / Answer
If you have any doubts, please give me comment...
@charset "utf-8";
/*
New Perspectives on HTML and CSS
Tutorial 6
Case Problem 1
Tables Style Sheet
Filename: mi_tables.css
*/
/* Table Styles */
table {
background: linear-gradient(to bottom, rgb(190, 215, 255), black);
border: 5px solid gray;
}
th, td {
border: 3px solid gray;
height: 1.4em;
padding: 8px;
}
th {
background-color: black;
color: rgb(130, 210, 255);
font-weight: normal;
}
td {
color: white;
font-size: 0.9em;
text-align: top;
}
/* Column Styles */
#firstCol {
width: 24%;
}
.dataCols {
width: 19%;
}
/* Table Header Styles */
thead tr{
height:60px;
}
thead tr:first-of-type{
font-size:2em;
}
thead tr:first-of-type th:not(:first-of-type){
background:transparent;
color:black;
}
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.