Html table style left padding

html cellpadding the left side of a cell

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.

6 Answers 6

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?

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

I would suggest using inline CSS styling.

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

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.

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 Sorry if I came across that way! I just wanted to clarify that adding padding to a

element isn’t to spec (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).

Источник

HTML Table Padding & Spacing

HTML tables can adjust the padding inside the cells, and also the space between the cells.

With Padding

hello	hello	hello
hello	hello	hello
hello	hello	hello

With Spacing

hello	hello	hello
hello	hello	hello
hello	hello	hello

HTML Table — Cell Padding

Cell padding is the space between the cell edges and the cell content.

By default the padding is set to 0.

To add padding on table cells, use the CSS padding property:

Example

To add padding only above the content, use the padding-top property.

And the others sides with the padding-bottom , padding-left , and padding-right properties:

Example

HTML Table — Cell Spacing

Cell spacing is the space between each cell.

By default the space is set to 2 pixels.

To change the space between table cells, use the CSS border-spacing property on the table element:

Example

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

padding-left inside a table

I’m trying to build a newsletter which I’ve designed to be sent by email. I’ve now the problem that the text has no space to the images around it and I would like to change the background-color of the text field to grey just like: If I’m giving it a new td is the whole code not working anymore could you help me please. Here is the complete code jsfiddle

the reason is that googlemail cant read div boxes or often ignore this. everytime im doing it with div boxes it will showed broke in googlemail

To move the text with padding-left you could wrap the text in a div and set that div with style=»padding-left: 10px;» or whatever you want it to be.

@MackieeE The OP didn’t state it was designed for an email until commenting. Read my comment under «Nasapc123» answer.

4 Answers 4

Lets have a little look at this.

Even for a table layout its pretty bad but we will just work with what we have.

Padding Text:

Changing the background:

I have added a demo for you to look at. With the images it should sit correctly if not you will have to make sure the height and widths are correct to stop the background colour from showing under the images.

Getting rid of extra space:

Because thats how big both

‘s are. If you put a background in the one next it you will see there the same size. So change the height.

i updated the jsfiddle the only problem i have is the color under the pics , there should be a cut. jsfiddle.net/9Psun/2 is not possible to fix it ?

You can wrap the font tag within div. Then add padding-left and set display: inline-block. Also background-color can be applied to the td, as rest of the part will be covered by images.

you mean like this ? but than hase only the text a background color but not the whole space where the text is . and if im giving it a padding left is only the first line moving to the right not the whole on jsfiddle.net/9Psun sorry i made a mistake i changed the bgcolor in the div and not in the td . if im doing it is it working with the color but under the button is also some grey. i updated the jsfiddle file and changed the color to red so that ya can see what i mean . there is some red color under the button jsfiddle.net/9Psun/1

Yes, the color is due to br tags in the td where there are two images and the paragraphs. Just remove all the br(4 occurrences), then extra color at the bottom will go away.

I suggest this is not done with a table, tables are clunky, and should never be used for layout on principle. You can use floated divs, as is shown in my example code below, allowing you to add any padding you wish, and simply updating the width of the bounding div to account for this. You should use tables for data needing to be tabulated, and rarely used in layout unless it is specifically called for due to CSS not being able to style it.

 
  
Sehr geehrte Frau Muster,
 
haben Sie schon Pläne für die schönste Zeit des Jahres 2014? Wir haben ein paar verlockende Urlaubsideen für Sie zusammen gestellt. Eine Kreuzfahrt mit Costa ist die stilvolle Art, neue Länder, aufregende Metropolen und nette Menschen kennen zu lernen. Entdecken Sie die schönsten Plätze der Ostsee, des Orients und des Mittelmeers auf einer Kreuzfahrt mit Costa! 
 
  
Sehr geehrte Frau Muster,
 
haben Sie schon Pläne für die schönste Zeit des Jahres 2014? Wir haben ein paar verlockende Urlaubsideen für Sie zusammen gestellt. Eine Kreuzfahrt mit Costa ist die stilvolle Art, neue Länder, aufregende Metropolen und nette Menschen kennen zu lernen. Entdecken Sie die schönsten Plätze der Ostsee, des Orients und des Mittelmeers auf einer Kreuzfahrt mit Costa! 
 
 
 
  Wie gemacht für alle, die den etwas anderen Sommer erleben wollen: Diese Reise führt Sie zu den großen Metropolen und kleinen Städten des Baltikums. Jede davon wird Sie durch den Kontrast zwischen prunkvoller Architektur in den historischen Stadtzentren und der nachhaltigen in den neuen Arealen Bauweise faszinieren. Jeder Ort erzählt hier seine eigene, spannende Geschichte. Lassen Sie sich verzaubern.  
 
 
 

Источник

Padding a table row

Here’s what the padding looks like. See how the td inside isn’t affected. What’s the solution?

use

7 Answers 7

The trick is to give padding on the td elements, but make an exception for the first (yes, it’s hacky, but sometimes you have to play by the browser’s rules):

You can use the same reasoning for the horizontal padding by using tr:first-child td .

Alternatively, exclude the first column by using the not operator. Support for this is not as good right now, though.

Oh, you may be right. I don’t know, it just makes sense to believe that :not operator is a more supported one, but again, I only test in Chrome 😀

@AdamLeggett adding non-semantic html is always the last resort. You can adapt the rule for rtl content by using the :dir(rtl) pseudoclass (I would add it to the answer but I did not actually test this)

Update: in Feb 2015, this thread on the www-style@w3c.org mailing list discussed about adding support of padding and border for table-row. This would apply the standard box model also to table-row and table-column elements. It would permit such examples. The thread seems to suggest that table-row padding support never existed in CSS standards because it would have complicated layout engines. In the 30 September 2014 Editor’s Draft of CSS basic box model, padding and border properties exist for all elements including table-row and table-column elements. If it eventually becomes a W3C recommendation, your html+css example may work as intended in browsers at last.

You could also solve it by adding a transparent border to the row (tr), like this

Works like a charm, although if you need regular borders, then this method will sadly not work.

Since rows act as a way to group cells, the correct way to do this, would be to use

This one should be the accepted answer based on the question. It’s not always straight forward to add padding to columns (td) (and might be headers (th) as well). This answers the question more accurately. The assumption is often that the OP can modify the HTM, but with visual builders and CMS having such prominence, that’s often not the case. Upvoted

Only thing is the if there is 2 td inside a tr then there will be padding between the 2 td, which I don’t want.

It was important to me in the context of ‘responsive’ tables, ie td

You could simply add this style to the table.

This is a very old post, but I thought I should post my solution of a similar problem I faced recently.

Answer : I solved this issue by displaying the tr element as a block element i.e. specifying a CSS of display:block for the tr element. You can see this in code sample below.

 tr < display: block; padding-bottom: 20px; >table 
 
 
 
Lorem Ipsum
 
Fusce sodales lorem nec magna iaculis a fermentum lacus facilisis. Curabitur sodales risus sit amet neque fringilla feugiat. Ut tellus nulla, bibendum at faucibus ut, convallis eget neque. In hac habitasse platea dictumst. Nullam elit enim, gravida eu blandit ut, pellentesque nec turpis. Proin faucibus, sem sed tempor auctor, ipsum velit pellentesque lorem, ut semper lorem eros ac eros. Vivamus mi urna, tempus vitae mattis eget, pretium sit amet sapien. Curabitur viverra lacus non tortor luctus vitae euismod purus hendrerit. Praesent ut venenatis eros. Nulla a ligula erat. Mauris lobortis tempus nulla non scelerisque.
 
 
 
 
 

This TEXT IS BELOW and OUTSIDE the TABLE element. NOTICE how the red table border is pushed down below the end of paragraph due to bottom padding being specified for the tr element. The key point here is that the tr element must be displayed as a block in order for padding to apply at the tr level.

Источник