Member Avatar for ytregnn

I was just thinking if there's some way to use the align tag (tables) like "half way". Instead of

align="center"

or

align="left"

somewhere in between so it's not centered or to the left?

  • 3 Contributors
  • 9 Replies
  • 108 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Troy III

Dani AI

Generated

Quick diagnosis and a clean fix: the style must target the actual inner table element, not a surrounding paragraph. was on the right track — give the nested table its own class and style that table directly. If a margin you add still "does nothing", check whether another rule (inline attributes, a later stylesheet or higher‑specificity selector) is overriding it.

How to pick the offset numerically: measure the cell width and the inner table width, subtract to get the free space, then divide that free space appropriately. If you want the inner table halfway between the cell’s left edge and the cell’s center, use one quarter of the free space as the left offset. For debugging, confirm those computed widths with the browser inspector before applying a value.

Other approaches if margin tweaks feel brittle:

  • Make the nested table behave like an inline element and use the cell’s text alignment plus a small left offset to nudge it visually.
  • Use a positioned container (position: relative on the TD, absolute on the inner table) to place the nested table with a pixel or percentage left value.
  • For future layout work, replace table-based layout with flexbox or grid — they give precise control over alignment and spacing without hacks.

Quick checklist when the change doesn’t show up: ensure the class is on the table tag, inspect the computed style in devtools, verify no inline attributes are forcing layout, and test an inline style to rule out stylesheet cascade issues. For reference on CSS behavior and modern layout options see MDN: margin and flexbox basics.

Recommended Answers

All 9 Replies

Member Avatar for JugglerDrummer

You can just set the padding to a relative value:

selector {
padding-right: 15%;
}

You'll need to play around with the percentage a bit, depending on the size of the container and the size of the content, and whether relative positioning is used elsewhere. :D

Member Avatar for ytregnn

Didnt work :(

It's like a table within a table. I have one table with to colums, then inside the second column I have another table - I'd like to have that table positioned within the column somewhere in between left and center.

Member Avatar for JugglerDrummer

could you post the code?

Member Avatar for ytregnn

Thanks for your help.

Here's the code (this is not from the actual page since the code would be too long otherwise but more for you to see what I mean):

<table width="702" border="0" align="center">
  <tr>
    <td width="282" height="228">&nbsp;</td>
    <td width="410"><table width="350" height="113" border="0">
      <tr>
        <td width="344">&nbsp;</td>
        </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table></td>
  </tr>
</table>

It's the "<table width="350" height="113" border="0">" I'd like to have "half way" in the middle.

Member Avatar for ytregnn

Have tried different ways but none has worked. (I dont want to use the cellpad / cellspace since it will change other parts of the code)

Member Avatar for JugglerDrummer

+1 for not dumping the entire code on us. :D

-1 for using table based layout.

Could we see the related CSS too? What selector did you use with padding-right=15%; ?

Member Avatar for Troy III

Didnt work :(

It's like a table within a table. I have one table with to colums, then inside the second column I have another table - I'd like to have that table positioned within the column somewhere in between left and center.

Your table row width is = 410px;
your inner-table width is = 350px,

So you'd like it to sit the halfway-left from where it would've been Centered.

Meaning the center is 1/2 x remaining space,
and that the half way from the 1/2 of the remaining space is again the half of it - that is the quarter!

Total space left is 60px
the half of it is 30px, and the half of this half is 15px

Therefore you wanna give your inner-table margin-left:15px.

That was to answer your question precisely - But, to my opinion, I strongly suggest, you use (0.33 x 60) ~20px; It will look balanced as if some professional artist has done it. :')

You can test them both but I would personally go with:
inner-table { margin-left: 20px }

Regards.

Member Avatar for ytregnn 
<style>
.inner-table { margin-left: 20px }
</style>

<p class="inner-table">
<table width="702" border="0" align="center">
  <tr>
    <td width="282" height="228">&nbsp;</td>
    <td width="410"><table width="350" height="113" border="0">
      <tr>
        <td width="344">&nbsp;</td>
        </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table></td>
  </tr>
</table>
</p>

You mean something like this?

I tried this but didn't make any difference. :S

Member Avatar for Troy III 
<style>
.inner-table { margin-left: 20px }
</style>

<p class="inner-table">
<table width="702" border="0" align="center">
  <tr>
    <td width="282" height="228">&nbsp;</td>
    <td width="410"><table width="350" height="113" border="0">
      <tr>
        <td width="344">&nbsp;</td>
        </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table></td>
  </tr>
</table>
</p>

You mean something like this?

I tried this but didn't make any difference. :S

No! :') I was thinking something more like this:

<style>
body * {border: solid 1px silver; }
table td * {border: solid 1px gray;}
.inner-table { margin-left: 20px }
</style>

<table width="702" border="0" align="center">
  <tr>
    <td width="282" height="228">&nbsp;</td>
    <td width="410"><table class="inner-table" width="350" height="113" border="0">
      <tr>
        <td width="344">&nbsp;</td>
        </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table></td>
  </tr>
</table>
table.jpg 15.22 KB
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.