WordPress.org

Forums

Centre a table on a page (28 posts)

  1. terryau
    Member
    Posted 1 year ago #

    Hi,
    I have entered a table on a page but wish to centre it on the page. Can some one advise as to how to do this? The page is here http://www.terrycallaghan.com/?page_id=1202

    Tia Terry

  2. reneeinspired
    Member
    Posted 1 year ago #

    Hi Tia Terry,

    In the html area where you have:

    <table border="1" cellspacing="0" bgcolor="#ffffff">

    try adding: align="center"

    so it would look like this:

    <table align="center" border="1" cellspacing="0" bgcolor="#ffffff">

    Let me know if that works for you. That is best option but sometimes, it will require a bit more action.

    -Renee'

  3. terryau
    Member
    Posted 1 year ago #

    Thanks Renee' But it did not work.
    Tery

  4. Andrew
    Forum moderator
    Posted 1 year ago #

    It is actually centred, what you're asking for is how to make it shorter.

  5. Andrew
    Forum moderator
    Posted 1 year ago #

    You can make content fill up more area by adding this style:

    .singular .entry-content {
     width: 100%;
    }

    http://wordpress.org/plugins/custom-css-manager-plugin/

  6. terryau
    Member
    Posted 1 year ago #

    Thank you Andrew,

    My mistake. What I really meant was how to float the table to the left or reduce the left margin so that the table does not overlap the white section of the page. Or how do I increase the size of the page so to reduce the overlap.
    tia
    Terry

  7. lorro
    Member
    Posted 1 year ago #

    Try this in your custom css:

    .singular #content {margin: 0 3.6%;}
    .singular .entry-content {margin-left: 0;}

    Check for ill-effects elsewhere on your site.

    If it doesn't work leave it in so it can be debugged remotely.

  8. terryau
    Member
    Posted 1 year ago #

    Thanks lorro,

    Did not realise this would be so difficult.

    terry

  9. reneeinspired
    Member
    Posted 1 year ago #

    Terry,

    Hi! Your table is too big for your site content zone.

    To show you what I mean if you changed this in your css:

    #page {
    margin: 2em auto;
    max-width: 1000px;
    }

    If you change max-width to 1500px; you will note that your table now fits.

    -Renee'

  10. terryau
    Member
    Posted 1 year ago #

    Good Morning Renee',

    I am sorry but still cant get it to centre. I am only a novice with CSS. The text page for the site page does not have the code you list for me to change the width. Sry for being so dumb.
    Terry

  11. lorro
    Member
    Posted 1 year ago #

    Try to install the Simple Custom CSS plugin.

    Then go to Admin page / Appearance / Custom CSS, and put in the above custom css suggestions where it says "/* Enter Your Custom CSS Here */". Click "Update Custom CSS" to save the changes.

    If the custom css doesn't work, leave it in so other members can see why.

  12. terryau
    Member
    Posted 1 year ago #

    Hello again,

    No success

    http://www.terrycallaghan.com/?page_id=1202

    Terry

  13. terryau
    Member
    Posted 1 year ago #

  14. reneeinspired
    Member
    Posted 1 year ago #

    Terry,

    You are not dumb buddy, not at all. This stuff is complicated.

    What WP Theme are you using?

    -Renee'

  15. terryau
    Member
    Posted 1 year ago #

    Hi, thanks.

    Twenty eleven

    terry

  16. reneeinspired
    Member
    Posted 1 year ago #

    Terry,

    Ok, I would like to think that there is a better way that what I know but I am going to tell you what I know.

    I have a blank site, so I switched to that theme to test it and make sure that it works.

    Here is what you can do:

    Step 1:
    Under appearances ---> click on edit

    This will take you to the style.css sheet.

    Step 1a:
    Note: the first thing that I always do when I get to something like this is do a "control a" to select all of the text and then do a "control c" to paste that into a notepad. This way if something goes wrong you can paste the original saved CSS code back in there.

    Step 2:

    do a "control f" find command for: #page

    Step 2a:

    You will find this:

    #page {
    	margin: 2em auto;
    	max-width: 1000px;

    Step 3:

    Change 1000px to 1500px

    Step 4:

    Scroll to the bottom and click: Update File

    Let me know if this makes sense and works.

    -Renee'

  17. terryau
    Member
    Posted 1 year ago #

    Hi thanks will try, but have to go out now.
    Terry

  18. terryau
    Member
    Posted 1 year ago #

    Good morning Renee',

    Did as you suggest, it made no difference. Maybe I should go back to the table which was made in access and attempt to reduce its size.
    Terry

  19. lorro
    Member
    Posted 1 year ago #

    I think this can be beaten with the right custom css. It seems a shame to reduce the size of the table from what you wanted.

    Renee's line:

    margin: 2em auto;

    must end with a semi-colon, and you have a colon. The colon will stop it working.

    We may have to try a few alternatives to get it looking good.

  20. terryau
    Member
    Posted 1 year ago #

    Hi and thanks,

    Semicolon entered , still the same.
    I certainly appreciate the help for a guy who is 75 and still learning.
    Terry

  21. lorro
    Member
    Posted 1 year ago #

    http://www.terrycallaghan.com/ gives 404 not found error. What happened? I was just getting warmed up.

  22. terryau
    Member
    Posted 1 year ago #

    Hi . sorry.

    I lost my site due to wrong information given to me by my hosting provider and deleted my public. file. I am endeavoring to recover it.
    Terry

  23. terryau
    Member
    Posted 1 year ago #

    Hello all,

    I am back on line.
    Terry

  24. lorro
    Member
    Posted 1 year ago #

    The last custom css didn't work. Here is some more to try. It replaces what you have already in the custom css plugin.

    .singular .entry-header {width:100%}
    .singular .entry-content {width:100%}
    .entry-content table[style]{height:auto !important}
  25. terryau
    Member
    Posted 1 year ago #

    Thanks lorro,

    However , did not work.

    Terry

  26. lorro
    Member
    Posted 1 year ago #

    It looks like you have full stops after .entry-header and .entry-content, and you have used curly brackets instead of square brackets for [style]. Best to copy and paste to make sure it is exact. CSS breaks easily.

  27. terryau
    Member
    Posted 1 year ago #

    Hi again. I corrected the errors but still the same. Maybe it is not possible?

  28. lorro
    Member
    Posted 1 year ago #

    It looks the same only because the page is being cached so we are seeing an old copy. Press control-F5 to fully reload the page and you should see a difference. The table is over to the left, but not wide enough, so a slight change then it should be there:

    .singular .entry-header {width:100%}
    .singular .entry-content {width:100%}
    .entry-content table[style]{height:auto !important; width:auto !important}

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.