How to constrain Table Width

[GrannyGrump]

My search skills have failed, and I can't discover if there is a way to do this, or if it is not supported.

I would like to make a CENTERED paragraph, OR a single-cell table, with a border on all four sides.

If I use Margins: Auto, it displays fine in Sigil, but ADE makes the box the full width of the window. leaving a wide strip of white space down each side of the text. So I guess auto-margins are not supported everywhere.

If I use Width: (ems or percentage here), it comes closer to what I want, but when the reading screen is narrow, it causes the lines to break in unattractive places. Am I stuck with using this method, and using nbsp to force the line-breaks to better places? Also, if I set to a wider width, then again I have the large swatches of white space down each side.

--- PS: I forgot to mention that this is a fairly narrow paragraph, and would display about 20 to 30 characters per line. Another similar one would be only 8 characters.


If I can't find a better method, I guess I might have to give up the idea of borders...

[Toxaris]

According to the specs, auto margins are free to interpret. That results into the fact that this does not work in ADE as desired and expected. The problem is, that centering is only applied to the inline elements. What you can try is the following:

In your stylesheet:

.wrap {text-align:center}
.center {text-align:center; width: 60%; display:inline-block}
.centerleft {text-align: left; width: 60%; display:inline-block }

In your code:

<div class="wrap">
<p class="center">Here is some text that should be centered</p>
<p class="centerleft">Here is text that is left aligned in the center. As you can see this is quite nifty.</p>
</div>

I expect that the 'centerleft' example is what you are looking for.

[mrmikel]

You are not the only one frustrated. I do a lot of non-fiction full of tables. It seems impossible to center it. If you use a trick shown on a Liz Castro blog, it centers, but the table elements break up into odd lines. Anything else leaving it normal doesn't center it.

If you aren't trying to make it for anyone but yourself make the table the width of your device, minus a bit. At least it won't be so obvious. You can control the table width, in one view at least, by changing text size and inserting breaks so the columns aren't overly wide. For your narrow column you can put the border information into each td you want to show. It should not be this hard, but it is, for me anyway.
If I have the original source I use images rather than go through all this. Images I can center.

[HarryT]

Feel free to shoot me, but the deprecated but still functional "<center>" tag works extremely well for this.

ie:

<center>
<table width=30% border=1>
<tr> 
<td>This is a centred table</td>
</tr>
</table>
</center>

Try it and see.

[mrmikel]

Since Sigil complains about it I haven't been using it, but it does work and it works fine for my Sony. I will just use it and ignore Flight Crew.

[HarryT]

Originally Posted by mrmikel

Since Sigil complains about it I haven't been using it, but it does work and it works fine for my Sony. I will just use it and ignore Flight Crew.

Yes, this is a case where a practical solution which works is what's important, in my view. "<center>" is deprecated, but I can't imagine any device not supporting it.

But I too generally use an image for a complex table - it's often the most hassle-free way of doing it. The centred table code I posted, though, I've used quite a lot where I want to have a centred paragraph with a border - it's useful in books for things like business cards, signs, notices, etc.

[GrannyGrump]

Thank you all for the suggestions. I have done a tiny bit of experimenting.

The problem was mostly that, if I set "width" to a percentage, I could not keep the borders close to the text if the screen width changes, they floated way out to the sides.

Now I have tried setting the width at ems instead of percentage, and using <center> as suggested by Harry, and I think this is as close as I will get to my wishes. I just must make sure I specify enough ems to hold the width of the longest line.

Toxaris, that IS pretty nifty. And if I set the widths narrower, I can have two paragraphs side-by-side. I wish I had known about this before, I know just the project it would have helped.

mrmikel, I have given up trying to center tables. I mostly let them sit left-aligned on the page, and who doesn't like it doesn't have to look. Although I might try using <center> in future.

Thank you all again.

[GMcG]

In my example the tables are centered. The border of the cell fits to the text, because the width of the table is only 5% with the text expanding the cell.
To avoid line breaks I have added the <nowrap> attribute to <td> except where I want a line break (in the second table). This is done with <br>.
I don't know what happens if the screen of the device is narrower than the longest line (30 characters). I'm afraid part of the text will be hidden. But then the device would be very (!) small.
The formatting is in old style html, but you can do it in CSS as well.

George

[GrannyGrump]

Ah, thank you GMcG, the nowrap must be the secret word! This works beautifully!

I still have SO much to learn, it seems like an endless education.