Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1556
  • Last Modified:

padding-left in <td>

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
ill
Asked:
ill
  • 13
  • 6
  • 5
  • +3
2 Solutions
 
jonnyfbCommented:
Use This:

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

Replace value with the required amount of pixels.
Its so simple I tested is just now!
0
 
illAuthor Commented:
i do not want  to place into each cell until i really have to
0
 
RozanaZCommented:
<style>
td
{
      padding-left: 15px;
}
</style>
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
jonnyfbCommented:
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
 
jonnyfbCommented:
Although you dont want to put code in every cell, Its the only way, man!
0
 
mreuringCommented:
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
 
jonnyfbCommented:
Fine, We'll do it your way!

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

<td class="padding">

It still works!
0
 
mreuringCommented:
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
 
illAuthor Commented:
this one work. is it correct way ?
table#tab_detail td {
    padding-left: 3em;
    border: solid #ffffff 0px;
}
0
 
RozanaZCommented:
Depands how do you use it...
0
 
jonnyfbCommented:
Yes it will still work!
0
 
illAuthor Commented:
@mreuring
it works for whole table now, but i would like to have it different for each column
0
 
jonnyfbCommented:
Can someone tell me what is wrong with this???

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

<td class="padding">
0
 
RozanaZCommented:
<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
 
BrandwoodCommented:
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
 
jonnyfbCommented:
Why dont you just add a different class to each different cell in a different colum?

It is the only way!!!
0
 
jonnyfbCommented:
Fine... You obviously have no need for me here...
0
 
BrandwoodCommented:
while i was typin that a million different answers came in an you changed you mind as to what you wanted.
0
 
jonnyfbCommented:
So you mean my answer is correct?
0
 
BrandwoodCommented:
tis now, he's changed his mind, yeah
0
 
jonnyfbCommented:
Great! I finally can get some points!
0
 
illAuthor Commented:
<!--
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
 
mreuringCommented:
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
 
jonnyfbCommented:
<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
 
RozanaZCommented:
<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
 
seanpowellCommented:
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
 
jonnyfbCommented:
.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
 
seanpowellCommented:
jonnyfb,
With all due repsect, what you posted is still invalid :-)
The question has already been adequately answered...
0
 
jonnyfbCommented:
Why dont we let the AUTHOR OF THE QUESTION DECIDE!
0
 
seanpowellCommented:
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
 
illAuthor Commented:
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
 
seanpowellCommented:
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
 
illAuthor Commented:
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
 
seanpowellCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 13
  • 6
  • 5
  • +3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now