Question

In: Computer Science

1. Update the HTML so the table has the caption and data shown in the second...

1. Update the HTML so the table has the caption and data shown in the second table.

a. Implement the table as a figure and use the figure caption to supply the table caption.

2. Expand the CSS so it does the formatting shown in the second table.

b. Use pseudo-classes to achieve colors

CODE:

<!DOCTYPE html>

<html lang="en">
   <head>
      <title>Employee table</title>
      <meta name="description" content="Activity">
      <meta charset="UTF-8">
      <link rel="stylesheet" type="text/css" href="Activity2.css">
   </head>

<body>
   <table>
      <thead>
         <tr>
            <th>Name</th>
            <th>E-mail</th>
            <th class="right">Years of Service</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Joel Murach</td>
            <td>[email protected]</td>
            <td class="right">22</td>
         </tr>
         <tr>
            <td>Anne Boehm</td>
            <td>[email protected]</td>
            <td class="right">34</td>
         </tr>
         <tr>
            <td>Zak Ruvalcaba</td>
            <td>[email protected]</td>
            <td class="right">4</td>
         </tr>
         <tr>
            <td>Judy Taylor</td>
            <td>[email protected]</td>
            <td class="right">39</td>
         </tr>
         <tr>
            <td>Cyndi Vasquez</td>
            <td>[email protected]</td>
            <td class="right">10</td>
         </tr>
         <tr>
            <td>Kelly Slivkoff</td>
            <td>[email protected]</td>
            <td class="right">25</td>
         </tr>
         <tr>
            <td>Juliette Baylon</td>
            <td>[email protected]</td>
            <td class="right">1</td>
         </tr>
      </tbody>
   </table>
   <footer>
      <a href="https://validator.w3.org/check?uri=referer">Validate HTML</a> <br>
      <a href="https://jigsaw.w3.org/css-validator/check/referer">Validate CSS</a>
   </footer>
</body>
</html>

CSS:

body 
{
   width: 750px;
   margin: 0 auto;
}

table 
{
   border-collapse: collapse;
   border: 1px solid black;
   margin: 20px;
}

thead 
{
   background-color: yellow;
}

th, td 
{
   border: 1px solid black;
   padding: .2em 1em .2em .5em;
   text-align: left;
   vertical-align: middle;
}

.right 
{
   text-align: right;
}

tbody tr:nth-child(even) td 
{
   background-color: yellow;
}

Solutions

Expert Solution

Code :

<!DOCTYPE html>

<html lang="en">
<head>
<title>Employee table</title>
<meta name="description" content="Activity">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="new.css">
</head>

<body>
<figure>
<figcaption>Caption</figcaption>
<table>
<thead>
<tr>
<th>Name</th>
<th>E-mail</th>
<th class="right">Years of Service</th>
</tr>
</thead>
<tbody>
<tr>
<td>Joel Murach</td>
<td>[email protected]</td>
<td class="right">22</td>
</tr>
<tr>
<td>Anne Boehm</td>
<td>[email protected]</td>
<td class="right">34</td>
</tr>
<tr>
<td>Zak Ruvalcaba</td>
<td>[email protected]</td>
<td class="right">4</td>
</tr>
<tr>
<td>Judy Taylor</td>
<td>[email protected]</td>
<td class="right">39</td>
</tr>
<tr>
<td>Cyndi Vasquez</td>
<td>[email protected]</td>
<td class="right">10</td>
</tr>
<tr>
<td>Kelly Slivkoff</td>
<td>[email protected]</td>
<td class="right">25</td>
</tr>
<tr>
<td>Juliette Baylon</td>
<td>[email protected]</td>
<td class="right">1</td>
</tr>
</tbody>
</table>
</figure>
<footer>
<a href="https://validator.w3.org/check?uri=referer">Validate HTML</a> <br>
<a href="https://jigsaw.w3.org/css-validator/check/referer">Validate CSS</a>
</footer>
</body>
</html>

CSS :

body
{
width: 750px;
margin: 0 auto;
}

table
{
border-collapse: collapse;
border: 1px solid black;
margin: 20px;
background-color: yellow;
margin: auto;
text-align: center;
}

table:hover{
background-color: orange;
}

thead
{
background-color: yellow;
}

th, td
{
border: 1px solid black;
padding: .2em 1em .2em .5em;
text-align: left;
vertical-align: middle;
}

.right
{
text-align: right;
}

venereology answered 1 year ago
Next > < Previous

Related Solutions

Cartwell Products has compiled the data shown in the following table for the current costs of...
Cartwell Products has compiled the data shown in the following table for the current costs of its three basic sources of capital—long-term debt, preferred stock, and common stock equity—for various ranges of new financing. Source of capital Range of new financing After tax cost Long term debt $0 to $ 320 000 $320 000 and above 6% 8% Preferred stock $0 and above 17% Common stock equity $0 to $ 200 000 $ 200 000 and above 20% 24% The...
Tables:  Write the HTML code for a table data cell that contain the text “Holiday” and spans...
Tables:  Write the HTML code for a table data cell that contain the text “Holiday” and spans across 3 rows and 4 columns.
5. Given the data shown in table 1 on the total utilities of plain chocolate bar...
5. Given the data shown in table 1 on the total utilities of plain chocolate bar and milk chocolate bar. And given that the price of plain chocolate bar is 20 cents and the price of milk chocolate bar is 40 cents. Quantity TU plain chocolate bar MU MU per $ chocolate bar TU milk chocolate bar MU MU per $ milk chocolate bar 1 8 - - 8 - - 2 14 6 13.25 3 18 4 18.25 4...
1. From the data shown in the table below about demand for smart phones, calculate the...
1. From the data shown in the table below about demand for smart phones, calculate the price elasticity of demand (using the arc method) from: 1.1. Point B to point C 1.2. Point D to point E 1.3. Point G to point H Classify the elasticity at each point as elastic, inelastic or unit elastic. Points P Q A 60 3,000 B 70 2,800 C 80 2,600 D 90 2,400 E 100 2,200 F 110 2,000 G 120 1,800 H...
Use the data shown in the table. Replace each x-value and y-value in the table with...
Use the data shown in the table. Replace each x-value and y-value in the table with its logarithm. Find the equation of the regression line for the transformed data. Then construct a scatter plot of left parenthesis log x comma log y right parenthesis(log x,logy) and sketch the regression line with it. What do you notice? x 1 2 3 4 5 6 7 8 y 828828 353353 174174 103103 121121 6464 6969 3232 Find the equation of the regression...
Utilizing the data shown in the contingency table 1 below, determine whether the relationship between types...
Utilizing the data shown in the contingency table 1 below, determine whether the relationship between types of residential area and gun ownership is statistically significant. Once you have arrived at an answer for each question, please write a sentence or two interpreting the results, you may want to round the decimals to the nearest whole number (70 pts.). What are the alternative and null hypotheses (5pts)? Calculate the total column percentages (10pts.) Gun Ownership Types of Residential Area Rural Town...
Utilizing the data shown in the contingency table 1 below, determine whether the relationship between types...
Utilizing the data shown in the contingency table 1 below, determine whether the relationship between types of residential area and gun ownership is statistically significant. Once you have arrived at an answer for each question, please write a sentence or two interpreting the results, you may want to round the decimals to the nearest whole number (70 pts.). Gun Ownership Types of Residential Area Rural Town City Total Own Gun 218 206 131 555 (         %) No Gun 375 379...
Utilizing the data shown in the contingency table 1 below, determine whether the relationship between types...
Utilizing the data shown in the contingency table 1 below, determine whether the relationship between types of residential area and gun ownership is statistically significant. Once you have arrived at an answer for each question, please write a sentence or two interpreting the results, you may want to round the decimals to the nearest whole number (70 pts.). What are the alternative and null hypotheses (5pts)? Calculate the total column percentages (10pts.) Gun Ownership Types of Residential Area Rural Town...
Consider the headway data shown in the following table. Data was taken from the center lane...
Consider the headway data shown in the following table. Data was taken from the center lane a three-lane intersection approach for a total of ten signal cycles. For the purposes of the analysis, the data may be considered to have been collected under ideal conditions. Calculate the average headway per vehicle ID, and plot the average headways with respect to vehicle positions in the queue for the data shown below. Sketch an approximate best-fit curve through the data. Use the...
The element nitrogen is found in the second row of the periodic table and has an...
The element nitrogen is found in the second row of the periodic table and has an atomic number of 7. how many electrons must nitrogen gain in order for its valence shell to be full? The answer is 3 but what's the concept behind this?
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT