It has been mentioned by one of the experts on here that the tables on my web pages are not very well centred.
He’s very diplomatic!
This is an example http://www.c5d.co.uk/1939NTHB.php
Some are better than others and there are about 250 individual pages. There are seven or 8 different CSS sheets though the container in all of them is structured like this
.container {width:950px;margin:0 auto;}
Is it a big job to centre the tables better, or even correctly ?
Thanks for any suggestions
It is centered, the contents of the table are just too wide though 
. Add table-layout:fixed; here to see what I mean.
.table1939 {
width: 100%;
table-layout: fixed;
}
I know that the table is too wide, but I gained the impression that it was possible to do something about it
Table layout fixed just makes it look a mess with much of the date illegible
Don’t restrict your container width to 950px. If you want the header and other elements that are above the table to be 950px wide and centered, wrap just them in a wrapper and set it to the width you want.
So if my HTML is this
<div class="wrapper">
<div class="container">zzzzzz etc <table class="table1939">
Are you saying that it should be
<div class="wrapper">
<div class="container">zzzzzz
</div> <table class="table1939">
If you are, the it’s simply a no go-er because of the number of pages that would need adjusting
There are two things you can do (at least).
One is easy and one is hard.
A simple fix is to add display:table to .container.
.container {display:table}
As you already have a width set and margin:auto (.container {width:950px;margin:0 auto;}) then what happens is that your page will be 950px wide and centred unless content in that container forces the element to be wider than the 950px. An element with display:table will automatically stretch to accommodate its content (as long as you haven’t used table-layout:fixed) and the whole thing will stretch nicely and still remain centred.
The downside of this approach is that when the table stretches wider than 950px then so will your other content above and below the table although in my mind that is a better approach anyway as it will all stay together nicely.
If however you want the normal content to only be 950px wide at all times then you will have no choice but to edit all of your pages and remove the tables from inside the div of .container and then center them independently. Or depending on the way your pages are structured you could use the display:table-method as mentioned but then change the header, nav and other elements on the page to be 950px width only and margin:auto. This may be a bit hit and miss.
I would try the first method to start with and then see how your pages look. It may indeed work ok.
.container {display:table}
Thanks.
That’s what I thought and why I haven’t done it.
As there are about 50 pages of transcriptions still to do, I shall try it with the next one and see how it goes on.
Antony,
This is a recreation of a suggestion that I sent to you three years ago in which I had suggested that you separate the top of the page from the table and allow them to center themselves independently using the display:table container around the table that @PaulOB is talking about. It’s the easiest way I could think of to handle your wide census tables and maintain some sense of balance on the page.
FWIW…
separate-containers.php (8.8 KB)
I know, but I got the impression from Paul OB’s post that there was a simple procedure to resolve it.
Rather than replacing each individual page.
It’s just not really a practicallity at present
Paul was suggesting you add {display:table} to your rules for .container. You already have that class in your HTML, so it couldn’t get much simpler. Did you try it?
Yes, but either I misunderstood what he meant or it didn’t do the trick
Near the top of your page, there lies a div.wrapper with no CSS assigned.
Move that div.wrapper down to just before the table and assign display:table; margin:0 auto; just as in my example. If the page is valid, that should work… although you may need to move the closing div (wrapper) up to just below </table>.
That’s all I did 3 years ago.
You’ll need to explain what you were expecting to happen, because that looks OK to me.
If you want to centre the header image (arrgh - accessibility nightmare 
) over the table, then text-align: center on #header should do the trick.
I was hoping that the table would “center” below the header which would remain across the middle at the top
As it is, the suggestion centres the table and the header expands across the page too
See this one which is how I want the header to look http://www.c5d.co.uk/1939NVPB.php
Are you about to post a link? because I don’t quite understand your description.
Just for my information, have you looked at the example that I posted?
You caught me before I could edit it. This is one I have adjusted manually
The example that I posted does exactly that.
I know and I have done that, but what I thought Paul was giving me was something to do all the sheets at once.
As it is, I still have to make a manual adjustment to each page
Thanks as always
Anton
In the recent page you posted you have the table outside of .container so the display:table you added to .container will have no effect on the table. In pages where the table is outside of .container (i.e. follows after the closing div of .container) then you would need to set a width on the table of 950px
.table1939{width:950px;margin:auto}
Of course that assumes you have used the same class for other tables in other pages. Note that setting a width on the table will still allow tables bigger than that to grow automatically and still be centred.
As I have said a number of times now consistency is the key and while I realise these pages have been developed over time it does not diminish the fact that there is a proper way to do something from the start. 
What did you not understand when I said:
The downside of this approach is that when the table stretches wider than 950px then so will your other content above and below the table although in my mind that is a better approach anyway as it will all stay together nicely.
As you seem to have different structures in different pages then obviously a one-size fits all approach is not about to appear unless you make compromises and accept the result or dive in and start changing code around.
If you want the header and other content to only be 950px wide then the table will need to be pulled out of the same container as the header so that it can be styled to a different width as I mentioned before. Or alternatively:
Or depending on the way your pages are structured you could use the display:table-method as mentioned but then change the header, nav and other elements on the page to be 950px width only and margin:auto. This may be a bit hit and miss.
Only you can judge which is the best method depending on your time available and on the number of pages you have to work through. We can’t look at 500 pages for you but we can point you in the right direction. There is a learning curve but you have had a lot of prompting so eventually some of this stuff is going to stick.
Thanks for coming back to me.
The tables are all different as over the years the information collected in the censuses differed enormously.
Some have as few as six columns other have as many as eighteen.
I really did not think it looked right with the header stretching so wide. Your suggestion to take the table outside of the container and centre it with margin auto seems to exactly what I wanted to do.
It isn’t perfect because some of the tables are still quite large and will not fit on the screen, but there is very little one could do without making the table so small as to me it illegible.
I do appreciate what you have suggested and have adapted a little to ensure that it does what I think looks best.
Thanks again for you help