Why is my table heading pushing the table rows out of place? - html

Question

Without a heading, my table looks fine and normal. I tried adding a table heading and it pushed everything out of place. Could anyone tell me how to avoid this?
Relevant code:
<table width="100%" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="white">
<th width="80%"> Let's talk about the wall </th>
<tr>
<td width="6%" align="center" bgcolor="white"><font face="arial"><strong></strong></font></td>
<td width="75%" align="center" bgcolor="white"><font face="arial"><strong></strong></font></td>
<td width="19%" align="center" bgcolor="white"><font face="arial"><strong></strong></font></td>
</tr>
And then:
<tr>
<td bgcolor="white"><font face="arial"></font></td>
<td bgcolor="white"><font face="arial"><? echo $rows['topic']; ?><BR></font></td>
<td align="center" bgcolor="white"><font face="arial"></font></td>
</tr>
To be clear, the text you see such as 'test,' 'slaaa,' etc. - I want that to be aligned much farther to the left of where it sits, which is how it sits when I have the table without a heading.

Answer 1

You're missing a tr wrapping the th, and a colspan
th {
background: #ccc;
}
td {
background: #aaa;
}
<table width="100%" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="white">
<tr>
<th colspan="3"> Let's talk about the wall</th>
</tr>
<tr>
<td width="6%" align="center" bgcolor="white">
<strong>some text</strong>
</td>
<td width="75%" align="center" bgcolor="white">
<strong>Column 2</strong>
</td>
<td width="19%" align="center" bgcolor="white">
<strong>Column 3</strong>
</td>
</tr>