Home /
Expert Answers /
Computer Science /
using-source-code-below-make-the-first-table-look-like-second-table-lt-doctype-html-gt-lt-html-pa306
(Solved): using source code below, make the first table look like second table? <!DOCTYPE html><html& ...
using source code below, make the first table look like second table?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Employee table</title>
<style>
body {
width: 750px;
margin: 0 auto;
}
table {
border-collapse: collapse;
border: 1px solid black;
margin: 20px;
}
caption {
/* add styles for your table caption element */
}
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;
}
/* create a .top class to adjust the vertical alignment of merged cells */
/* create a selector and CSS rule to assign a background color to the even rows in the table */
</style>
</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>joelmurach@yahoo.com</td>
<td class="right">22</td>
</tr>
<tr>
<td>Anne Boehm</td>
<td>anne@murach.com</td>
<td class="right">34</td>
</tr>
<tr>
<td>Zak Ruvalcaba</td>
<td>zak@modulemedia.com</td>
<td class="right">4</td>
</tr>
<tr>
<td>Judy Taylor</td>
<td>judy@murach.com</td>
<td class="right">39</td>
</tr>
<tr>
<td>Cyndi Vasquez</td>
<td>cyndi@murach.com</td>
<td class="right">10</td>
</tr>
<tr>
<td>Kelly Slivkoff</td>
<td>kelly@murach.com</td>
<td class="right">25</td>
</tr>
<tr>
<td>Juliette Baylon</td>
<td>juliette@murach.com</td>
<td class="right">1</td>
</tr>
</tbody>
</table>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Employee table</title>
<style>
body {
width: 750px;
margin: 0 auto;
}
table {
border-collapse: collapse;
border: 1px solid black;
margin: 20px;
}
caption {
/* add styles for your table caption element */
}
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;
}
/* create a .top class to adjust the vertical alignment of merged cells */
/* create a selector and CSS rule to assign a background color to the even rows in the table */
</style>
</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>joelmurach@yahoo.com</td>
<td class="right">22</td>
</tr>
<tr>
<td>Anne Boehm</td>
<td>anne@murach.com</td>
<td class="right">34</td>
</tr>
<tr>
<td>Zak Ruvalcaba</td>
<td>zak@modulemedia.com</td>
<td class="right">4</td>
</tr>
<tr>
<td>Judy Taylor</td>
<td>judy@murach.com</td>
<td class="right">39</td>
</tr>
<tr>
<td>Cyndi Vasquez</td>
<td>cyndi@murach.com</td>
<td class="right">10</td>
</tr>
<tr>
<td>Kelly Slivkoff</td>
<td>kelly@murach.com</td>
<td class="right">25</td>
</tr>
<tr>
<td>Juliette Baylon</td>
<td>juliette@murach.com</td>
<td class="right">1</td>
</tr>
</tbody>
</table>
</body>
</html>
\begin{tabular}{|l|l|r|} \hline Name & E-mail & Years of Service \\ \hline Joel Murach & joelmurach@yahoo.com & 22 \\ \hline Anne Boehm & anne@murach.com & 34 \\ \hline Zak Ruvalcaba & zak@modulemedia.com & 4 \\ \hline Judy Taylor & judy@murach.com & 39 \\ \hline Cyndi Vasquez & cyndi@murach.com & 10 \\ \hline Kelly Slivkoff & kelly@murach.com & 25 \\ \hline Juliette Baylon & juliette@murach.com & 1 \\ \hline \end{tabular}
Employee Table
Expert Answer
Below is your updated code of Employee Table :