Table alignment with div - html

Question

I am trying to construct an html table with 6 rows. The first row has one line of text which is heading. The second row has 3 columns (set as three td elements). Third row has three values in 3 columns (set as three td elements). 4th row has 3 images in 3 columns (again set as three td elements). This works correctly so far. Now I want to add a fifth row which is a line of text that spans the entire div and has a dotted underline. When I add this element it just draws the the dotted border to 1/3rd of the div only. If I set the width to 100%, the elements above it are dragged to the right of the screen. What am I doing wrong? Here is my complete HTML snippet:
<div id="ToySummary" style="border:solid; border-width:4px; border-color:gray; padding:4px; margin:10px">
<span style="font-family:Calibri; font-size:large; color:midnightblue; text-align:right"><b>FINAL RESULTS SUMMARY</b></span>
<table style="width:100%">
<tr>
<td style="width:33%; font-size:large"><i>Result</i></td>
<td style="width:33%; font-size:large"><i>Lucky Toy</i></td>
<td style="width:33%; font-size:large"><i>Lucky Peoples</i> </td>
</tr>
<tr>
<td style="width:33%; font-size:large">{{overall_result}}</td>
<td style="width:33%; font-size:large">{{lucky}}</td>
<td style="width:33%; font-size:large">{{lucky_peoples}}</td>
</tr>
<tr>
<td><img src={{some_png}} style="width:50px;height:50px;"></td>
<td><img src={{some_other_png}} style="width:50px;height:50px;"></td>
<td><img src={{another_png}} style="width:50px;height:50px;"></td>
</tr>
<tr>
<td style=" border-bottom-style:dotted; border-bottom-color: black; border-bottom-width: 2px;"><b><em>{{animal_test_note}}</em></b></td>
</tr>
<tr>
<td>{{toy_score_note}}</td>
</tr>
</table>
</div>

Answer 1

You're trying to make the last two tr's span all the columns? Try this
<tr>
<td colspan="3" style=" border-bottom-style:dotted; border-bottom-color: black; border-bottom-width: 2px;"><b><em>{{animal_test_note}}</em></b></td>
</tr>
<tr>
<td colspan="3">{{toy_score_note}}</td>
</tr>

Answer 2

Use colspan attribute inside to span ur dotted border across all columns.
{{animal_test_note}}

Answer 3

<td colspan="3" style=" border-bottom-style:dotted; border-bottom-color: black; border-bottom-width: 2px;"><b><em>{{animal_test_note}}</em></b></td>
this will fix it.

Answer 4

When I understand you right, you try to align a dotted bottom border to your fifth td cell? And every try goes wrong and does not cover the whole bottom line?
I would recommend using CSS classes and ids instead of writing the style part directly into the td tags.
It's messy coding! No offense!
And for your approach:
HTML part:
<td id="dotted">
CSS part:
#dotted {
border-bottom: dotted #000000; /* or any colour you prefer! */
width:100%;
}
By the way: using % and then px in your td tags could cause your problem stick to one.
that should fix it