I need to make this code look like the image I am providing. I'm providing directions also DepartmentEditorialMarketingCustomer ServiceEmployee TableNameJoel MurachAnne BoehmZak RuvalcabaJudy TaylorBethany LeeKelly SlivkoffJuliette BaylonE-mailjoelmurach@yahoo.comanne@murach.comzak@modulemedia.comjudy@murach.combethany@murach.comkelly@murach.comjuliette@murach.comTotal Years of ServiceYears of Service2234439102511051. Open this HTML file and run it:short_exercises\town_hall\c12x_employee_table.htmlNote that this HTML file uses embedded CSS in the head section to do the formatting.2. Expand the HTML so the table has the caption and data shown in the second table above.Expand the CSS so it does the formatting shown in the second table above.3.4.If you used classes to do the alignment and apply the colors to the cells of the table, try usingpseudo-classes to get the same results.

Given: There are five core tags that are used to create a table in HTML. <table> tag is used…

Answered: Department Editorial Marketing Employee…

Information Technology Project Management

9th Edition

ISBN:9781337101356

Author:Kathy Schwalbe

Publisher:Kathy Schwalbe

Chapter8: Project Quality Management

Section: Chapter Questions

Problem 2E

See similar textbooks

Related questions

Question

I need to make this code look like the image I am providing. I'm providing directions also

Department
Editorial
Marketing
Customer Service
Employee Table
Name
Joel Murach
Anne Boehm
Zak Ruvalcaba
Judy Taylor
Bethany Lee
Kelly Slivkoff
Juliette Baylon
E-mail
joelmurach@yahoo.com
anne@murach.com
zak@modulemedia.com
judy@murach.com
bethany@murach.com
kelly@murach.com
juliette@murach.com
Total Years of Service
Years of Service
22
34
4
39
10
25
1
105
1. Open this HTML file and run it:
short_exercises\town_hall\c12x_employee_table.html
Note that this HTML file uses embedded CSS in the head section to do the formatting.
2. Expand the HTML so the table has the caption and data shown in the second table above.
Expand the CSS so it does the formatting shown in the second table above.
3.
4.
If you used classes to do the alignment and apply the colors to the cells of the table, try using
pseudo-classes to get the same results.

Expert Solution

Trending now

This is a popular solution!

Step by step

Solved in 3 steps with 1 images

SEE SOLUTION Check out a sample Q&A here

Follow-up Questions

Read through expert solutions to related follow-up questions below.

Follow-up Question

I forgot to attach the orignial code. Here it is, I just need to make this code look like the image provided.

<!DOCTYPE html>

<html>

<head>

<title>Employee table</title>

<style>

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;

}

</style>

</head>

<body>

<table>

<thead>

<tr>

<th class="right">Years of Service</th>

</tr>

</thead>

<tbody>

<tr>

<td>Joel Murach</td>

<td>joelmurach@yahoo.com</td>

</tr>

<tr>

<td>Anne Boehm</td>

<td>anne@murach.com</td>

</tr>

<tr>

<td>Zak Ruvalcaba</td>

<td>zak@modulemedia.com</td>

</tr>

<tr>

<td>Judy Taylor</td>

<td>judy@murach.com</td>

</tr>

<tr>

<td>Bethany Lee</td>

<td>bethany@murach.com</td>

</tr>

<tr>

<td>Kelly Slivkoff</td>

<td>kelly@murach.com</td>

</tr>

<tr>

<td>Juliette Baylon</td>

<td>juliette@murach.com</td>

</tr>

</tbody>

</table>

</body>

</html>

Solution

by Bartleby Expert

SEE SOLUTION

Knowledge Booster

Learn more about

Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.