Alright, let's take a quick break and put what we've learned into practice. Time to flex those brain muscles and practice what we've learned so far. Remember, practice makes perfect, so let's make the most of this moment to sharpen our skills. Ready? Let's do this!
Let's open our online, free HTML editor in the playground.
Don't worry about styles just yet! I've already taken care of it and added CSS for this exercise.
In the editor, you will see HTML, CSS, and JS input on the left/top, and the output on the right/bottom. We only need the HTML editor, so feel free to minimize the other two if you want.
Our goal
Display a report card with the help of html table. See below image.
Understanding the problem
We can divide this problem into three smaller parts.
- Display "Days of the week", as a heading tag.
- Display a horizontal line below it.
- Display a table, with heading at the top and three rows.
As we learned previously, we can easily solve the first two steps.
For step three you can refer to HTML Tables
Complete Solution
<html>
<head>
<title>The title</title>
</head>
<body>
<h1> Report Card </h1>
<hr>
<table>
<thead>
<tr>
<th>
<p>
Subject
</p>
</th>
<th>
<p>
Mid-TERM
</p>
</th>
<th>
<p>
Finals
</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>Science</p>
</td>
<td>
<p>30</p>
</td>
<td>
<p>44</p>
</td>
</tr>
<tr>
<td>
<p>Maths</p>
</td>
<td>
<p>35</p>
</td>
<td>
<p>40</p>
</td>
</tr>
<tr>
<td>
<p>History</p>
</td>
<td>
<p>35</p>
</td>
<td>
<p>40</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Want to practice more? Click here for more hands-on exercise.
References: