HTML For Formatting Badge Blogs
Last updated: Sunday October 3rd, 2021
Report this blog
<style>
table, th, td {
border: 1px grey;
}
</style>
<h1 style="text-align:center;">
<b>Badge Name</b>
</h1>
<p style="text-align:center;">
1 user has earned this badge
</p>
<table class="standard-table" align="center">
<tr>
<th>Quiz</th>
<th>Required Score</th>
</tr>
<tr>
<td>
<a href="First Hyperlink">Name of First Quiz</a>
</td>
<td>Score Required</td>
</tr>
<tr>
<td>
<a href="Second Hyperlink">Name of Second Quiz</a>
</td>
<td>Score Required</td>
</tr>
<tr>
<td>
<a href="Third Hyperlink">Name of Third Quiz</a>
</td>
<td>Score Required</td>
</tr>
<tr>
<td>
<a href="Fourth Hyperlink">Name of Fourth Quiz</a>
</td>
<td>Score Required</td>
</tr>
<tr>
<td>
<a href="Fifth Hyperlink">Name of Fifth Quiz</a>
</td>
<td>Score Required</td>
</tr>
</table>
As you can see, you can copy and paste each “set” of code to add more rows to the badge’s table. The outcome should look something like this:
Badge Name
1 user has earned this badge
Quiz | Required Score |
---|---|
Name of First Quiz | Score Required |
Name of Second Quiz | Score Required |
Name of Third Quiz | Score Required |
Name of Fourth Quiz | Score Required |
Name of Fifth Quiz | Score Required |
Vatican City Badge
1 user has earned this badge
Btw I would like to make the classic thin gray border of the table invisible. Is there a way to do so?