[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

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

Table cell margin problem

Hello,

I may have a very simple question.
I am trying to make a table with cell margins like this:

<html>
<head>
<title>test</title>
</head>

<body class="body">
  <table border="1" width="250">
   <tr>
    <td style="margin-left:50px" height="30">testing</td>
  </tr>
</table>
</body>
</html>

Somehow the margin isn't shown in my browser...
What is wrong with code above??

Mkraan
0
mkraan
Asked:
mkraan
  • 4
  • 3
1 Solution
 
TNameCommented:
To see the cell border, you need more than 1 cell :)


<html>
<head>
<title>test</title>
</head>

<body class="body">
  <table border="1" width="250">
   <tr>
    <td style="margin-left:50px" height="30">testing</td>
    <td style="margin-left:50px" height="30">testing</td>
  </tr>
</table>
</body>
</html>
0
 
TNameCommented:
But I'm not sure what you are trying to achieve by setting the cell's margin? -> style="margin-left:50px"
A cell is part of a table, not an independent entity that you can freely position or shift...
0
 
mkraanAuthor Commented:
Hello TName, i'm not trying to position the cell,
i'm just trying to have a cell with the text in it left margin 50 px.

with 2 cells it isn't working either.
0
Industry Leaders: 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!

 
mkraanAuthor Commented:
Copy and paste this code and u'll see no left-margin

<html>
<head>
<title>test</title>
</head>
<body>
  <table border="1" width="250">
   <tr>
    <td style="margin-left:50px;" height="30">testing</td>
  </tr>
</table>
</body>
</html>
0
 
mkraanAuthor Commented:
Ok i found the solution :

replace margin-left with padding-left  that's it

I don't know why but margin-left doesn't work on table cells
0
 
TNameCommented:

Sorry, was busy for a while...

Padding sets the margins *for the content* of the element (in your case, the text in a cell), margin is the margin of the element itself...
Margin cannot work on table cells, as mentioned above, they are not independent elements like a <div> or a <p>, you can only set e.g. the cell-spacing for the whole table...

But what you need here is indeed "padding" (we could call it "the inner margin" of a element).
If for instance you wrap the text in a span and put that span inside a cell, you can give that span a margin either by setting the *span's* margin, or by setting the *cell's padding*.

Have a look at the w3 box-model:
http://www.w3.org/TR/REC-CSS2/box.html
0
 
mkraanAuthor Commented:
Ty TName,

I'm a lot wiser now!!
0

Featured Post

Technology Partners: 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!

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now