How to use tag in HTML table

Question

I need to use <p> tag in html table. If I put <p> tag it's not align properly. I am using these HTML for generate PDF in .Net web application using string builder. I am unable to remove <p> because it comes from backend.

<table>
<tr>
<td> Matter </td>
<td> <p> Test </p> </td>
</tr>
</table>

See the output screenshot

<table  border='0' cellspacing='0' cellpadding='0' summary='Layout table' width='100%' style='border:none;'width='100%'>
<tbody>
<tr style='line-height:22px;border-spacing: 0px;padding: 0px;'>
<td valign='top' style='padding: 0px;border:none; width:150px' ><p>Matter</p></td>
<td valign='top' style='padding: 0px;border:none; width'> :&nbsp;<p>Test</p></td>
</tr>
<tr style='line-height:22px;border-spacing: 0px;padding: 0px;'>
<td valign='top' style='padding: 0px;border:none; width:150px' ><p>Responsibility</p></td>
<td valign='top' style='padding: 0px;border:none;width:250px'><p>:&nbsp;{2}</p></td>
</tr>
<tr style='line-height:22px;border-spacing: 0px;padding: 0px;'>
<td valign='top' style='padding: 0px;border:none; width:150px' ><p>KPI</p></td>
<td valign='top' style='padding: 0px;border:none;width:250px'><p>:&nbsp;{3}</p></td>
</tr>
<tr style='line-height:22px;border-spacing: 0px;padding: 0px;'>
<td valign='top' style='padding: 0px;border:none; width:150px' ><p>Target Date</p></td>
<td valign='top' style='padding: 0px;border:none;width:250px'><p>:&nbsp;{4}</p></td>
</tr>
</tbody>
</table>

Answer 1

You don't really need to use a p element in the td - and personally I would use a span rather than a p - but to answer your question - the p element gets a margin applied by the browser - so you simply have to remove that with CSS and the alignment will be as expected.A;lso - since the p is a block-level element - you need to apply display: inline-block to get it and the colon on the same line.

Note - I would also remove that inline styling on the table trs and tds and pu that into the css as well.

table {
   border:none;
   width: 100%;
}

tr {
  line-height:22px;
  border-spacing: 0px;
  padding: 0px
}

td {
  padding: 0px;
  border:none; 
  width:150px;
  vertical-align: top
;

}
td:last-child {
  width: 250px;
}

td p {
  margin: 0;
  display: inline-block
}

<table  border='0' cellspacing='0' cellpadding='0' summary='Layout table' width='100%' >
<tbody>
<tr >
  <td><p>Matter</p></td>
  <td> :&nbsp;<p>Test</p></td>
</tr>
<tr>
  <td><p>Responsibility</p></td>
  <td><p>:&nbsp;{2}</p></td>
</tr>
<tr>
  <td><p>KPI</p></td>
  <td><p>:&nbsp;{3}</p></td>
</tr>
<tr>
<td ><p>Target Date</p></td>
<td><p>:&nbsp;{4}</p></td>
</tr>
</tbody>
</table>

Answer 2

<table>+<tr>+<td> are already aligned.

<p> by default has CSS display: block; margin-top: 16px; margin-bottom: 16px;

To fix your problem: just don't use <p> inside your tables, put your text directly inside <td>, like so:

<table  border='0' cellspacing='0' cellpadding='0' summary='Layout table' width='100%' style='border:none;'width='100%'>
    <tbody>
        <tr style='line-height:22px;border-spacing: 0px;padding: 0px;'>
            <td valign='top' style='padding: 0px;border:none; width:150px'>Matter</td>
            <td valign='top' style='padding: 0px;border:none; width'>:&nbsp;Test</td>
        </tr>
        <tr style='line-height:22px;border-spacing: 0px;padding: 0px;'>
            <td valign='top' style='padding: 0px;border:none; width:150px'>Responsibility</td>
            <td valign='top' style='padding: 0px;border:none;width:250px'>:&nbsp;{2}<</td>
        </tr>
        <tr style='line-height:22px;border-spacing: 0px;padding: 0px;'>
            <td valign='top' style='padding: 0px;border:none; width:150px'>KPI</td>
            <td valign='top' style='padding: 0px;border:none;width:250px'>:&nbsp;{3}</td>
        </tr>
        <tr style='line-height:22px;border-spacing: 0px;padding: 0px;'>
            <td valign='top' style='padding: 0px;border:none; width:150px'>Target Date</td>
            <td valign='top' style='padding: 0px;border:none;width:250px'>:&nbsp;{4}</td>
        </tr>
    </tbody>
</table>