Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

padding-left in <td>

Posted on 2004-08-04
34
Medium Priority
?
1,550 Views
Last Modified: 2006-11-17
to which elements should i put padding-left ? tbody, table, tr, td ?
currently i use this ugly code in each cell
------------------
<td>&nbsp;&nbsp;"&rs("FieldName")&"</td>
0
Comment
Question by:ill
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 13
  • 6
  • 5
  • +3
34 Comments
 
LVL 1

Expert Comment

by:jonnyfb
ID: 11713273
Use This:

<td style="padding-left:VALUE">

Replace value with the required amount of pixels.
Its so simple I tested is just now!
0
 
LVL 12

Author Comment

by:ill
ID: 11713295
i do not want  to place into each cell until i really have to
0
 
LVL 8

Expert Comment

by:RozanaZ
ID: 11713304
<style>
td
{
      padding-left: 15px;
}
</style>
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Expert Comment

by:jonnyfb
ID: 11713319
Or if you only want it in certain cells (not every table on your whole page) Put this:

<style>
#padding
{
     padding-left: 15px;
}

<td id="padding">

Nothing is wrong with RozanaZ 's way but if you have other tables, your page will be distorted!
0
 
LVL 1

Expert Comment

by:jonnyfb
ID: 11713320
Although you dont want to put code in every cell, Its the only way, man!
0
 
LVL 17

Expert Comment

by:mreuring
ID: 11713366
Jonny please don't suggest using id's for formatting several elements on the same page. Id's should be unique on a single page, classes were invented for these cases.
0
 
LVL 1

Expert Comment

by:jonnyfb
ID: 11713378
Fine, We'll do it your way!

<style>
.padding
{
     padding-left: 15px;
}

<td class="padding">

It still works!
0
 
LVL 17

Expert Comment

by:mreuring
ID: 11713383
What I would like to know is, what are you trying to achieve with this code-snippet:
<td>&nbsp;&nbsp;"&rs("FieldName")&"</td>

Is it only the first table-colum that's being indented, or are do trying to do this to every cell in the table. If the latter, RozanaZ's solution is the obvious.
0
 
LVL 12

Author Comment

by:ill
ID: 11713385
this one work. is it correct way ?
table#tab_detail td {
    padding-left: 3em;
    border: solid #ffffff 0px;
}
0
 
LVL 8

Expert Comment

by:RozanaZ
ID: 11713390
Depands how do you use it...
0
 
LVL 1

Expert Comment

by:jonnyfb
ID: 11713397
Yes it will still work!
0
 
LVL 12

Author Comment

by:ill
ID: 11713398
@mreuring
it works for whole table now, but i would like to have it different for each column
0
 
LVL 1

Expert Comment

by:jonnyfb
ID: 11713402
Can someone tell me what is wrong with this???

<style>
.padding
{
     padding-left: 15px;
}

<td class="padding">
0
 
LVL 8

Expert Comment

by:RozanaZ
ID: 11713410
<HTML>
<HEAD>
<TITLE></TITLE>

<style>
.type1
{
      padding-left: 15px;
}
.type2
{
      padding-left: 5px;
}
</style>

</HEAD>

<BODY>
<table border="1">
      <tr>
            <td class="type1">s dfs fsdf </td>
            <td class="type2">sdf sdf sdf</td>
      </tr>
      <tr>
            <td class="type1">s dfs fsdf </td>
            <td class="type2">sdf sdf sdf</td>
      </tr>
      <tr>
            <td class="type1">s dfs fsdf </td>
            <td class="type2">sdf sdf sdf</td>
      </tr>
      <tr>
            <td class="type1">s dfs fsdf </td>
            <td class="type2">sdf sdf sdf</td>
      </tr>

</table>
</BODY>
</HTML>
0
 
LVL 1

Expert Comment

by:Brandwood
ID: 11713412
just so your clear

if you put a style on an element, say a td, as RozanaZ suggested, then it will aply to all the td's where the style is included.

the other ways are pretty much the same.

in-line style as jonnyfb suggested, an a style by calling the style class defined in a similar way to RozanaZ.  (Notice the dot before class name.)

jonnyfb was wrong to suggest that "its the only way" cause RozanaZ's answer will do exactly what your asking.
0
 
LVL 1

Expert Comment

by:jonnyfb
ID: 11713414
Why dont you just add a different class to each different cell in a different colum?

It is the only way!!!
0
 
LVL 1

Expert Comment

by:jonnyfb
ID: 11713422
Fine... You obviously have no need for me here...
0
 
LVL 1

Expert Comment

by:Brandwood
ID: 11713429
while i was typin that a million different answers came in an you changed you mind as to what you wanted.
0
 
LVL 1

Expert Comment

by:jonnyfb
ID: 11713440
So you mean my answer is correct?
0
 
LVL 1

Expert Comment

by:Brandwood
ID: 11713458
tis now, he's changed his mind, yeah
0
 
LVL 1

Expert Comment

by:jonnyfb
ID: 11713465
Great! I finally can get some points!
0
 
LVL 12

Author Comment

by:ill
ID: 11713514
<!--
sorry for my disabbility to ask question.:/
i just wanted to know, where padding-left  should be placed, if i want last column to be padded more than others .
also, i'm increasing points for this debate;)
<html>
<head>
<style>
th{
      background-color: navy;
      color:white;
      border:0;
      }
td{
      text-align:right;
}
table#tab_detail td {
    padding-left: 3em;
    border: solid #ffffff 0px;
}
</style>
</head>
<body>
<table id='tab_detail' style='spacing:20px;'>
<thead style='font-size:smaller;border:0px none;'>
      <tr><th>Time</th><th>1.&#188;h</th><th>2.&#188;h</th><th>3.&#188;h</th><th>4.&#188;h</th><th>Sum</th></tr>
</thead>
<tbody>
      <tr style='background-color:#ddf0f9'>
            <td>06:00 </td>
            <td>800.00</td>
            <td>10280.00</td>
            <td>1032360.00</td>
            <td>10323160.00</td>
            <td>&nbsp;&nbsp;9743250.00</td>
      </tr>
</tbody>
</table>
</body>
</html>
0
 
LVL 17

Assisted Solution

by:mreuring
mreuring earned 288 total points
ID: 11713533
Thanx to IE, using adjescent sibling selectors is out of the question. This would work on most real CSS2 enabled browsers:
table#tab_detail td { //All td's
    padding-left: 3em;
    border: solid #ffffff 0px;
} table#tab_detail td+td { //Any td that's preceded by a td
    padding-left: 2em;
} table#tab_detail td+td+td { //Any td that's preceded by two td's
    padding-left: 5em;
}

But as it is, the suggestion of using classes is the only viable option. However I would like to make a suggestion (based on guesswork)
If you want the first colum to be different from the rest, but the rest should all be the same, I suggest using the th element:
<table id="tab_detail">
    <tr>
        <th>first colum, also known as header-colum</th>
        <td>Some information</td>
        <td>More detailed information</td>
    </tr>
</table>

You could then use for styles:
table#tab_detail th, table#tab_detail td { //All td's and th's
    padding-left: 3em;
    border: solid #ffffff 0px;
} table#tab_detail td { //Overriding the padding for td's
    padding-left: 2em;
}
0
 
LVL 1

Expert Comment

by:jonnyfb
ID: 11713553
<html>
<head>
<style>
colum1{padding-left:10}
colum2{padding-left:10}
colum3{padding-left:10}
colum4{padding-left:10}
colum5{padding-left:10}
colum6{padding-left:50}
th{
     background-color: navy;
     color:white;
     border:0;
     }
td{
     text-align:right;
}
table#tab_detail td {
    padding-left: 3em;
    border: solid #ffffff 0px;
}
</style>
</head>
<body>
<table id='tab_detail' style='spacing:20px;'>
<thead style='font-size:smaller;border:0px none;'>
     <tr><th>Time</th><th>1.&#188;h</th><th>2.&#188;h</th><th>3.&#188;h</th><th>4.&#188;h</th><th>Sum</th></tr>
</thead>
<tbody>
     <tr style='background-color:#ddf0f9'>
          <td class="colum1">&>06:00 </td>
          <td class="colum2">&>800.00</td>
          <td class="colum3">&>10280.00</td>
          <td class="colum4">&>1032360.00</td>
          <td class="colum5">&>10323160.00</td>
          <td class="colum6">&nbsp;&nbsp;9743250.00</td>
     </tr>
</tbody>
</table>
</body>
</html>
0
 
LVL 8

Accepted Solution

by:
RozanaZ earned 600 total points
ID: 11713557
<html>
<head>
<style>
th{
     background-color: navy;
     color:white;
     border:0;
     }
td{
     text-align:right;
}
table#tab_detail td {
    padding-left: 3em;
    border: solid #ffffff 0px;
}

.type1
{
     padding-left: 15px;
}

</style>
</head>
<body>
<table id='tab_detail' style='spacing:20px;'>
<thead style='font-size:smaller;border:0px none;'>
     <tr><th>Time</th><th>1.&#188;h</th><th>2.&#188;h</th><th>3.&#188;h</th><th>4.&#188;h</th><th>Sum</th></tr>
</thead>
<tbody>
     <tr style='background-color:#ddf0f9'>
          <td>06:00 </td>
          <td>800.00</td>
          <td>10280.00</td>
          <td>1032360.00</td>
          <td>10323160.00</td>
          <td class="type1">9743250.00</td>
     </tr>
</tbody>
</table>
</body>
</html>
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11713596
ill,

A few comments:

1. RozanaZ has adequately answered your question with that last post.
2. This has no meaning: style='spacing:20px;'
3. jonnyfb - I'm afraid that http:#11713553 is completely invalid CSS :-)
0
 
LVL 1

Expert Comment

by:jonnyfb
ID: 11713615
.colum1{padding-left:10}
.colum2{padding-left:10}
.colum3{padding-left:10}
.colum4{padding-left:10}
.colum5{padding-left:10}
.colum6{padding-left:50}
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11713631
jonnyfb,
With all due repsect, what you posted is still invalid :-)
The question has already been adequately answered...
0
 
LVL 1

Expert Comment

by:jonnyfb
ID: 11713642
Why dont we let the AUTHOR OF THE QUESTION DECIDE!
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11713696
I'm sure they will - but a relative simple question has become a very long thread.
I am merely trying to moderate the thread to make sure that it doesn't get too confusing - it can be very difficult for someone who's new to CSS to make heads or tails of things when the comments come in at the rate that they did here.
0
 
LVL 12

Author Comment

by:ill
ID: 11713701
agree, it's a solution, but one more question.
can ".type1" be changed to add to td padding, not to override  ?
2em(td) +3em ( .type1)

---------------
.type1
{
     padding-left: 3em;
}
this one should be 5 em
<td class="type1">9743250.00</td>  
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11713734
Please don't accept this comment...
No - the class will override what's in the cell. You can't accumulate padding in that way...
0
 
LVL 12

Author Comment

by:ill
ID: 11713877
thanx all.
i'm not css expert, so sorry for my unclear question/comments.
there is a problem to choose points for solution in new area, when one don't know how difficult it is.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11714146
Not to worry ill - you only need to ask if you're unsure. The experts here will always help you through.
mreuring, I'm sorry, I missed your post too - fortunately ill did not.
(...adjascent sibling selectors - I just love that term...)
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

610 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question