Solved

padding-left in <td>

Posted on 2004-08-04
34
1,537 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
  • 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
 
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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
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 72 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 150 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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
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…

708 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now