html cellpadding the left side of a cell

Answer 1

I use inline css all the time BECAUSE.... I want absolute control of the design and place different things aligned differently from cell to cell.

It is not hard to understand...

Anyway, I just put something like this inside my tag:

style='padding:5px 10px 5px 5px'

Where the order represents top, right, bottom and left.

Answer 2

Well, as suggested by Hellfire you can use td width or you could place an element in the td and adjust its width. We could not use

CSS property Padding

as in Microsoft Outlook padding does not work. So what I had to do is,

<table>
    <tr>
        <td><span style="display: inline-block; width: 40px;"></span><span>Content<span></td>
        <td>Content</td>
    </tr>
</table>

With this you can adjust right and left spacing. For top and bottom spacing you could use td's height property. Like,

 <table>
        <tr>
            <td style="vertical-align: top; height: 100px;">Content</td>
            <td>Content</td>
        </tr>
    </table>

This will increase bottom space.

Hope it will work for you guys. :)

Answer 3

I choose to use both methods. Cellpadding on the table as a fallback in case the inline style doesn't stick and inline style for most clients.

<table cellpadding="5">
  <tr>
    <td style='padding:5px 10px 5px 5px'>Content</td>
    <td style='padding:5px 10px 5px 5px'>Content</td>
  </tr>
</table>

Answer 4

I would suggest using inline CSS styling.

<table border="1" style="padding-right: 10px;">
<tr>
<td>Content</td>
</tr>
</table>

or

<table border="1">
<tr style="padding-right: 10px;">
<td>Content</td>
</tr>
</table>

or

<table border="1">
<tr>
<td style="padding-right: 10px;">Content</td>
</tr>
</table>

I don't quite follow what you need, but this is what I would do, assuming I understand you needs.

Answer 5

This is what css is for... HTML doesn't allow for unequal padding. When you say that you don't want to use style sheets, does this mean you're OK with inline css?

<table>
    <tr>
        <td style="padding: 5px 10px 5px 5px;">Content</td>
        <td style="padding: 5px 10px 5px 5px;">Content</td>
    </tr>
</table>

You could also use JS to do this if you're desperate not to use stylesheets for some reason.

Answer 6

I recently had to do this to create half decent looking emails for an email client that did not support the CSS necessary. For an HTML only solution I use a wrapping table to provide the padding.

<table border="1" cellspacing="0" cellpadding="0">
    <tr><td height="5" colspan="3"></td></tr>
    <tr>
        <td width="5"></td>
        <td>
            This cells padding matches what you want.
            <ul>
                <li>5px Left, Top, Bottom padding</li>
                <li>10px on the right</li>
            </ul>    
            You can then put your table inside this
            cell with no spacing or padding set.                    
        </td>
        <td width="10"></td>
    </tr>
    <tr><td height="5" colspan="3"></td></tr>
</table>

As of 2017 you would only do this for old email client support, it's pretty overkill.