[FIXED] How to use <p> tag in HTML table

Issue

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>

Solution

<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>

Answered By - evilReiko

Answer Checked By - David Goodson (PHPFixing Volunteer)