My HTML table appears jagged, even though I am using fixed pixel size

Question

The HTML table is constructed by another program and has to be done a row at a time. I am using fixed widths in the columns, but the output appears jagged I can't see why the following table appears jagged. Can someone please help

Sorry, I can't show output due to security issues. please copy and paste the code below into https://onlinehtmleditor.dev/ to see

<table align="center" border="1" cellpadding="1" cellspacing="1" style="background-color:#ebf5f7; width:1200px">
  <tbody>
    <tr>
      <td style="width:300px"><span style="font-family:Courier New,Courier,monospace"><strong>Attribute Name</strong></span></td>
      <td style="width:500px"><span style="font-family:Courier New,Courier,monospace"><strong>Attribute Type (or DXL if DXL Attribute)</strong></span></td>
      <td style="width:200px"><span style="font-family:Courier New,Courier,monospace"><strong>Enumerations</strong></span></td>
      <td style="width:300px"><span style="font-family:Courier New,Courier,monospace"><strong>Access (Value)</strong></span></td>
    </tr>
    <tr>
      <td style="width:300px"><span style="font-family:Courier New,Courier,monospace">[ACCEPTANCE CATEGORY]</span></td>
      <td style="width:500px"><span style="font-family:Courier New,Courier,monospace">Text</span></td>
      <td style="width:200px">&nbsp;</td>
      <td style="width:300px">&nbsp;</td>
    </tr>
  </tbody>
</table>

<table align="center" border="1" cellpadding="1" cellspacing="1" style="background-color:#ebf5f7; width:1200px">
  <tbody>
    <tr>
    </tr>
    <tr>
      <td style="width:300px"><span style="font-family:Courier New,Courier,monospace">[ACCEPTANCE CRITERIA]</span></td>
      <td style="width:500px"><span style="font-family:Courier New,Courier,monospace">Text</span></td>
      <td style="width:200px">&nbsp;</td>
      <td style="width:300px"><span style="font-family:Courier New,Courier,monospace">Requirements Management<span style="color:#3278b2"> RMCD</span></span>
      </td>
    </tr>
  </tbody>
</table>

<table align="center" border="1" cellpadding="1" cellspacing="1" style="background-color:#ebf5f7; width:1200px">
  <tbody>
    <tr>
      <td style="width:300px">&nbsp;</td>
      <td style="width:500px">&nbsp;</td>
      <td style="width:200px">&nbsp;</td>
      <td style="width:300px"><br />
        <span style="font-family:Courier New,Courier,monospace">Requirements Management<span style="color:#3278b2"> RMCD</span></span>
      </td>
    </tr>
  </tbody>
</table>

<table align="center" border="1" cellpadding="1" cellspacing="1" style="background-color:#ebf5f7; width:1200px">
  <tbody>
    <tr>
    </tr>
    <tr>
      <td style="width:300px"><span style="font-family:Courier New,Courier,monospace">[CAS 1 REVIEW]</span></td>
      <td style="width:500px"><span style="font-family:Courier New,Courier,monospace"><span style="color:#9966ff">[LIST]</span></span>
      </td>
      <td style="width:200px">
        <p><span style="font-family:Courier New,Courier,monospace"><span style="color:#9966ff">[Batch 1]<br />
            [Batch 2]<br />
            [Batch 3]<br />
            [Legacy Process]</span></span><br /> &nbsp;
        </p>
      </td>
      <td style="width:300px"><span style="font-family:Courier New,Courier,monospace">DOORS Admin<span style="color:#3278b2"> RMCDA</span><br /> Requirements Management<span style="color:#3278b2"> RMCD</span></span>
      </td>
    </tr>
  </tbody>
</table>

<table align="center" border="1" cellpadding="1" cellspacing="1" style="background-color:#ebf5f7; width:1200px">
  <tbody>
    <tr>
    </tr>
    <tr>
      <td style="width:300px"><span style="font-family:Courier New,Courier,monospace">[Cop]</span></td>
      <td style="width:500px">&nbsp;</td>
      <td style="width:200px">&nbsp;</td>
      <td style="width:300px">&nbsp;</td>
    </tr>
  </tbody>
</table>

<table align="center" border="1" cellpadding="1" cellspacing="1" style="background-color:#ebf5f7; width:1200px">
  <tbody>
    <tr>
    </tr>
    <tr>
      <td style="width:300px"><span style="font-family:Courier New,Courier,monospace">[DEVIATION JUSTIFICATION]</span></td>
      <td style="width:500px"><span style="font-family:Courier New,Courier,monospace">Text</span></td>
      <td style="width:200px">&nbsp;</td>
      <td style="width:300px"><span style="font-family:Courier New,Courier,monospace">DOORS Admin<span style="color:#3278b2"> RMCDA</span><br /> Requirements Management<span style="color:#3278b2"> RMCD</span></span>
      </td>
    </tr>
  </tbody>
</table>

<table align="center" border="1" cellpadding="1" cellspacing="1" style="background-color:#ebf5f7; width:1200px">
  <tbody>
    <tr>
    </tr>
    <tr>
      <td style="width:300px"><span style="font-family:Courier New,Courier,monospace">[E-T ID]</span></td>
      <td style="width:500px"><span style="font-family:Courier New,Courier,monospace">Text</span></td>
      <td style="width:200px">&nbsp;</td>
      <td style="width:300px"><span style="font-family:Courier New,Courier,monospace">DOORS Admin<span style="color:#3278b2"> RMCDA</span><br /> Requirements Management<span style="color:#3278b2"> RMCD</span></span>
      </td>
    </tr>
  </tbody>
</table>

<table align="center" border="1" cellpadding="1" cellspacing="1" style="background-color:#ebf5f7; width:1200px">
  <tbody>
    <tr>
    </tr>
    <tr>
      <td style="width:300px"><span style="font-family:Courier New,Courier,monospace">[FI</span></td>
      <td style="width:500px">&nbsp;</td>
      <td style="width:200px">&nbsp;</td>
      <td style="width:300px">&nbsp;</td>
    </tr>
  </tbody>
</table>

<table align="center" border="1" cellpadding="1" cellspacing="1" style="background-color:#ebf5f7; width:1200px">
  <tbody>
    <tr>
    </tr>
  </tbody>
</table>

you have caluclating issues: 300px + 500px + 200px + 300px do not fit into a 1200px container according to my math — tacoshy, Aug 09 '23 at 12:03
Plus, table cell widths you specify are more or less only "suggestions", unless you apply [`table-layout: fixed;`](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout). — CBroe, Aug 09 '23 at 12:05
Should you be using tables? They should only be used for tabular data - also all the empty `tr` tags may cause issues and finally why do you need to open and close the tables - why not just have them part of the same table if you want the cells to line up — Pete, Aug 09 '23 at 12:36
Hi Pete. I am not an HTML coder, so I use an HTML editor and make the tables as I need. Then copy the table code. I must have made an error - but it still worked. I will look into putting everything in the one table. thanks — Ammo999, Aug 09 '23 at 16:54

score 0 · Accepted Answer · answered Aug 09 '23 at 12:09

This is a pure calculating issue:

  200px
 +500px
 +200px
 +300px
=1300px

so your 4 columns do not fit the container and as such the table will recalculate the width of the cell to fit the container. If you change the width from 1200px to 1300px it will work again.

However, this only remains true as long as the content is not larger than the cells. A counter could be table-layout: fixed or better yet merging the tables with JS.

<table align="center" border="1" cellpadding="1" cellspacing="1" style="background-color:#ebf5f7; width:1300px">
  <tbody>
    <tr>
      <td style="width:300px"><span style="font-family:Courier New,Courier,monospace"><strong>Attribute Name</strong></span></td>
      <td style="width:500px"><span style="font-family:Courier New,Courier,monospace"><strong>Attribute Type (or DXL if DXL Attribute)</strong></span></td>
      <td style="width:200px"><span style="font-family:Courier New,Courier,monospace"><strong>Enumerations</strong></span></td>
      <td style="width:300px"><span style="font-family:Courier New,Courier,monospace"><strong>Access (Value)</strong></span></td>
    </tr>
    <tr>
      <td style="width:300px"><span style="font-family:Courier New,Courier,monospace">[ACCEPTANCE CATEGORY]</span></td>
      <td style="width:500px"><span style="font-family:Courier New,Courier,monospace">Text</span></td>
      <td style="width:200px">&nbsp;</td>
      <td style="width:300px">&nbsp;</td>
    </tr>
  </tbody>
</table>

<table align="center" border="1" cellpadding="1" cellspacing="1" style="background-color:#ebf5f7; width:1300px">
  <tbody>
    <tr>
    </tr>
    <tr>
      <td style="width:300px"><span style="font-family:Courier New,Courier,monospace">[ACCEPTANCE CRITERIA]</span></td>
      <td style="width:500px"><span style="font-family:Courier New,Courier,monospace">Text</span></td>
      <td style="width:200px">&nbsp;</td>
      <td style="width:300px"><span style="font-family:Courier New,Courier,monospace">Requirements Management<span style="color:#3278b2"> RMCD</span></span>
      </td>
    </tr>
  </tbody>
</table>

<table align="center" border="1" cellpadding="1" cellspacing="1" style="background-color:#ebf5f7; width:1300px">
  <tbody>
    <tr>
      <td style="width:300px">&nbsp;</td>
      <td style="width:500px">&nbsp;</td>
      <td style="width:200px">&nbsp;</td>
      <td style="width:300px"><br />
        <span style="font-family:Courier New,Courier,monospace">Requirements Management<span style="color:#3278b2"> RMCD</span></span>
      </td>
    </tr>
  </tbody>
</table>

<table align="center" border="1" cellpadding="1" cellspacing="1" style="background-color:#ebf5f7; width:1300px">
  <tbody>
    <tr>
    </tr>
    <tr>
      <td style="width:300px"><span style="font-family:Courier New,Courier,monospace">[CAS 1 REVIEW]</span></td>
      <td style="width:500px"><span style="font-family:Courier New,Courier,monospace"><span style="color:#9966ff">[LIST]</span></span>
      </td>
      <td style="width:200px">
        <p><span style="font-family:Courier New,Courier,monospace"><span style="color:#9966ff">[Batch 1]<br />
            [Batch 2]<br />
            [Batch 3]<br />
            [Legacy Process]</span></span><br /> &nbsp;
        </p>
      </td>
      <td style="width:300px"><span style="font-family:Courier New,Courier,monospace">DOORS Admin<span style="color:#3278b2"> RMCDA</span><br /> Requirements Management<span style="color:#3278b2"> RMCD</span></span>
      </td>
    </tr>
  </tbody>
</table>

<table align="center" border="1" cellpadding="1" cellspacing="1" style="background-color:#ebf5f7; width:1300px">
  <tbody>
    <tr>
    </tr>
    <tr>
      <td style="width:300px"><span style="font-family:Courier New,Courier,monospace">[Cop]</span></td>
      <td style="width:500px">&nbsp;</td>
      <td style="width:200px">&nbsp;</td>
      <td style="width:300px">&nbsp;</td>
    </tr>
  </tbody>
</table>

<table align="center" border="1" cellpadding="1" cellspacing="1" style="background-color:#ebf5f7; width:1300px">
  <tbody>
    <tr>
    </tr>
    <tr>
      <td style="width:300px"><span style="font-family:Courier New,Courier,monospace">[DEVIATION JUSTIFICATION]</span></td>
      <td style="width:500px"><span style="font-family:Courier New,Courier,monospace">Text</span></td>
      <td style="width:200px">&nbsp;</td>
      <td style="width:300px"><span style="font-family:Courier New,Courier,monospace">DOORS Admin<span style="color:#3278b2"> RMCDA</span><br /> Requirements Management<span style="color:#3278b2"> RMCD</span></span>
      </td>
    </tr>
  </tbody>
</table>

<table align="center" border="1" cellpadding="1" cellspacing="1" style="background-color:#ebf5f7; width:1300px">
  <tbody>
    <tr>
    </tr>
    <tr>
      <td style="width:300px"><span style="font-family:Courier New,Courier,monospace">[E-T ID]</span></td>
      <td style="width:500px"><span style="font-family:Courier New,Courier,monospace">Text</span></td>
      <td style="width:200px">&nbsp;</td>
      <td style="width:300px"><span style="font-family:Courier New,Courier,monospace">DOORS Admin<span style="color:#3278b2"> RMCDA</span><br /> Requirements Management<span style="color:#3278b2"> RMCD</span></span>
      </td>
    </tr>
  </tbody>
</table>

<table align="center" border="1" cellpadding="1" cellspacing="1" style="background-color:#ebf5f7; width:1300px">
  <tbody>
    <tr>
    </tr>
    <tr>
      <td style="width:300px"><span style="font-family:Courier New,Courier,monospace">[FI</span></td>
      <td style="width:500px">&nbsp;</td>
      <td style="width:200px">&nbsp;</td>
      <td style="width:300px">&nbsp;</td>
    </tr>
  </tbody>
</table>

<table align="center" border="1" cellpadding="1" cellspacing="1" style="background-color:#ebf5f7; width:1300px">
  <tbody>
    <tr>
    </tr>
  </tbody>
</table>

My HTML table appears jagged, even though I am using fixed pixel size

1 Answers1