Tables Align

[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?

[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

[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.

[JugglerDrummer]

could you post the code?

[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.

[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)

[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%; ?

[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.

[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

[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>