Search code examples
htmlhtml-tablehtml-to-pdf

How to use <p> tag in HTML table


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>