Homework Sourselink rel stylesheet type testcss href prob1css In the
< link rel = “stylesheet” type = “test/css” href = “prob1.css” / >
In the rendering. Results is the content of an h3 element (underline, Courier font). The two tables are very similar. The captions are italic. Each has a one-row table head (th elements as cells) and two-row table body (first cell a th, and the remaining two td). The contents of the th cells in the body are red.
Write the HTML for the h3 element and the table on the left. The h3 element has class report and, in addition, specifies a style so that the rendering is 50 pixels in height. The table has a one-pixel boarder and class left.
Also write stylesheet prob1.css it specifies that the contents of th elements inside tbody elements are red, that the contents of the caption elements are italic, and that the renderings of table elements occupying 35% of the table width of the window and have padding half the current font size (think em). The stylesheet defines class left for the elements that float left.it also defines a class report for h3 elements that specifies content that is underline and of Courier font unless that font is not available, in which case any monospace font will do.
Results Exam Scores Quiz Scores Ed Ken Ed Ken Exam 1 82 75 Quiz 1 8 Exam 2 71 78 Quiz 2 7Solution
prob1.html
<html>
<head>
<title>
</title>
<link rel=\"stylesheet\" type=\"text/css\" href=\"prob1.css\">
</head>
<body>
<h3 class=\"report\"> Results </h3>
<table class=\"left\">
<caption> Exam Scores </caption>
<tr>
<th></th>
<td>Ed</td>
<td>Ken</td>
</tr>
<tr>
<th>Exam 1</th>
<td>82</td>
<td>75</td>
</tr>
<tr>
<th>Exam 2</th>
<td>71</td>
<td>78</td>
</tr>
<table>
<caption> Quiz Scores </caption>
<tr>
<th></th>
<td>Ed</td>
<td>Ken</td>
</tr>
<tr>
<th>Quiz 1</th>
<td>8</td>
<td>7</td>
</tr>
<tr>
<th>Quiz 2</th>
<td>7</td>
<td>7</td>
</tr>
</body>
</html>
prob1.css
table, th, td {
border: 1px solid black;
border-collapse: collapse;
table-layout: fixed;
}
th, td {
overflow: hidden;
width: 35%;
}
caption {
font-style: italic;
}
th {
padding: 0.5em; //curret font-size is 16px, so in em it is 1. Therefore, the padding being half of the font-size is 0.5em.
text-align: left;
color: red;
}
td {
padding: 0.5em; //curret font-size is 16px, so in em it is 1. Therefore, the padding being half of the font-size is 0.5em.
text-align: left;
}
.report {
font-family: courier;
height: 50px;
text-decoration: underline;
}
.left {
float: left;
}
