36

I want to pad my text in a cells on the right side with additional space .

I don't use css style sheets .

this is my code <table border="1" CELLPADDING="5"> on right size for example I want 10.

Thanks .

Night Walker
  • 20,638
  • 52
  • 151
  • 228
  • pretty sure you need css, it doesn't have to be a external stylesheet it can be inline also like Text. Of course if you do it inline you need to repeat it for each cell instead of just defining it once in an external stylesheet. If I'm not mistaken there is no way to apply the html cellpadding attribute to just one side or the other. It applies padding to all sides of a table cell. –  Dec 30 '11 at 18:39
  • 2
    Why would you not use css? That seems like saying you'll only use flat-head screwdrivers, regardless of the screw. Also, for what it's worth, the `cellpadding` attribute is obsoleted in HTML5. – eaj Dec 30 '11 at 18:42

6 Answers6

57

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.

Dennis T --Reinstate Monica--
  • 739
  • 6
  • 19
Ben D
  • 14,321
  • 3
  • 45
  • 59
12

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.

Pegues
  • 1,693
  • 2
  • 21
  • 38
  • 1
    These are not all valid. The first two will not produce consistent results across browsers and do not replicate the cellpadding attribute. Marking up the tag in particular shouldn't be used here. If you want to pad a cell, you should add the markup to that tag. – Ben D Dec 30 '11 at 18:42
  • @BenD why is the first one invalid? –  Jan 28 '16 at 03:52
  • Not seen this post in a long time, but I see @BenD was being very territorial with his answer. All of my responses are valid, and would certainly be needed in the case of nested tables. Work with things like Telerik controls and out-of-the-box MS C# webform controls and you'll experience a ton of cases where you'll have to use such techniques. I do advise that classes be added, however, and you control the CSS from within an internal or external stylesheet. – Pegues Oct 14 '19 at 16:25
  • @Pegues Sorry if I came across that way! I just wanted to clarify that adding padding to a `` element isn't to spec (https://stackoverflow.com/questions/3656615/padding-a-table-row) and while there might be some browsers that will render it anyway (especially if you display the row as `block`), it isn't the correct approach. And the question was about padding a cells, not a table, so the first answer didn't seem germane (i.e. most tables have more than one cell, so it's not going to do what the OP asked). – Ben D Oct 14 '19 at 18:13
7

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.

Ryan Buddicom
  • 1,131
  • 15
  • 30
  • 1
    You can't use units in a `width` or `height` attribute's value. All values are in px implicitly. Your email client might be accepting width="10px" as parseInt(digit, digit, unknown, unknown) => digit digit – Nicholas Shanks Jan 26 '17 at 13:03
  • Thanks Nicholas, have been building websites for decades now and never realized this. Funny how it's never been an issue! Have updated the code as per your comment. Note you can however use pixels or percentages in the width/height attributes, just as you said the pixels don't need units. – Ryan Buddicom Feb 01 '17 at 21:26
  • 1
    Yeah, I forgot to mention percentages too. And it's not really that the attributes "don't need units", more that the concept of abstract units didn't exist in the Violas and Netscape Navigators of the time, who's layout engines drew directly into bitmap video memory. – Nicholas Shanks Feb 03 '17 at 09:16
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. :)

Umesh Patil
  • 4,668
  • 32
  • 24
0

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>
nathanjessen
  • 1,008
  • 8
  • 8
-3

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.

user5719947
  • 11