Table columns not equal

Question

I have the following table. I use colspan="4" for 2 td - but they are not equal. First column is greater than second. What is this due to?

<table border="0" cellpadding="0" cellspacing="0">         
            <tr><td colspan="8" style="height:10px;">&nbsp;</td></tr>
            <tr><td colspan="8" style="height:10px;">&nbsp;</td></tr>
   <tr>
                <td style="position: relative; font-size: 14px;" colspan="8">
               text
                </td>
   </tr>
  
   <tr><td colspan="8">&nbsp;</td></tr>
            <tr>
                <td colspan="4">
                    To:
                </td>
                <td colspan="4">
                    From:
                </td>
            </tr>
            <tr>
                <td colspan="4">
                   text<br>
                   text<br>
                   text<br>
                   text
                </td>
                <td colspan="4">
                   text<br>
                   text<br>
                   text<br>
                   text
                </td>
            </tr>
  //in the same way other rows
  </table>

It looks in this way:

Answer 1

Not quite sure what you meant, but I've given it a shot. I added a colgroup to depict the difference more clearly, and replaced the HTML5 deprecated border="0" cellpadding="0" cellspacing="0" attributes.

table {
  border: 0;
  border-spacing: 0;
  border-collapse: collapse;
  table-layout: fixed;
  width: 100px;  /*Needs to be greater than the size of 'From:'*/
}
td {
  padding: 0;
}

<table>
  <colgroup>
    <col span="4" style="background-color:red">
    <col span="4" style="background-color:yellow">
  </colgroup>
  <tr>
    <td colspan="8" style="height:10px;">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="8" style="height:10px;">&nbsp;</td>
  </tr>
  <tr>
    <td style="position: relative; font-size: 14px;" colspan="8">
      text
    </td>
  </tr>

  <tr>
    <td colspan="8">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="4">
      To:
    </td>
    <td colspan="4">
      From:
    </td>
  </tr>
  <tr>
    <td colspan="4">
      text
      <br>text
      <br>text
      <br>text
    </td>
    <td colspan="4">
      text
      <br>text
      <br>text
      <br>text
    </td>
  </tr>
</table>

Although looking at your image, the following structure would be more appropriate:

table {
  border: 0;
  border-spacing: 0;
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  /*Needs to be greater than the size of 'From:'*/
}
td {
  padding: 0;
}
caption {
  color: #002B7F;
  font-weight: bold;
}
caption,
th {
  text-align: left;
}
thead {
  background-color: #007C66;
  color: white;
}

<table>
  <caption>text</caption>
  <thead>
    <th>To:</th>
    <th>From:</th>
  </thead>
  <tr>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
  </tr>
</table>