Grow your CSS skills. Land your dream job.

Vertical alignment within a table

  • # January 23, 2013 at 5:09 am

    Hi guys,

    Quick and simple hopefully. Take a look at the page I’ve linked below. All of the info (pics,blurb,audio players) is in a table. I created the table in MS Word and literally copied and pasted the table into word press which it apparently likes. However sometimes it doesn’t remember all the formatting so I was wondering if you could let me know the code that will allow me to vertically centre align everything that is in the table? If come across ‘vlign’ but haven’t managed to make it work for me yet.

    http://dnaproductionsuk.com/home/audio-mixing-mastering/

    Any help appreciated. Any code is fine. I realise I’m in a CSS forum but if you know html to solve it that’s just as good.

    Thanks!

    # January 23, 2013 at 5:22 am

    I’d go with vertical-align: middle; on both th and td tags.

    # January 23, 2013 at 5:34 am

    Hey Hugo thanks for getting back.

    I’ve tried that yes, seems logical but I haven’t got it to work. Here is the code for the first row of my table. See anything wrong with it that would mean all columns of that row wouldn’t align?

    MOD EDIT: Unviewable Code Removed

    # January 23, 2013 at 5:36 am

    It won’t let me post it. Any chance you can check the source code for that page?

    # January 23, 2013 at 5:57 am

    You certainly need to remove the inline styling (which is wrong anyway).

    Add: vertical-align: middle;

    to line 3466/7 + in your CSS sheet

    .entry-content td,
    .comment-content td {
    border-top: 1px solid #ddd;
    padding: 6px 10px 6px 0;
    vertical-align: middle;
    }

    I do think, however, that you might want to think about converting that table into a series of divs.

    # January 23, 2013 at 6:02 am

    Ah great thanks, that’s done it. Could you tell me, does that apply to every table in the site? If not, what section of the code ‘directs’ it to this particular table?

    # January 23, 2013 at 6:08 am

    It will apply to all tables **within divs with a class of “entry-content” or “comment-content”**.

    # January 23, 2013 at 6:27 am

    I’m used to dabble in a bit of C++ so I’m thinking along those lines… How do I ‘declare’ this table to have the class of entry-content? Obviously it has been done but by word press for me! Thanks for your help!

    # January 23, 2013 at 6:45 am

    The table doesn’t have that class, the div in which the table is sitting has that class.

    I have little knowledge of WP but my assumption is that every post/entry is given a div in which to sit and that’s what you have pasted you table into.

    # January 23, 2013 at 10:55 am

    That would make sense yes. I’ve just noticed that it has changed the homepage items within the table as well. do you know how I would say, change table in page #x rather than the whole div? At the moment it reads

    .entry-content td,
    .comment-content td {
    border-top: 1px solid #ddd;
    padding: 6px 10px 6px 0;
    vertical-align: middle;
    }

    So I just need to change .entry comment td to maybe the page id td? does that sound right?

    # January 23, 2013 at 11:01 am

    Well…obviously, it’s really ‘old style’ to be using tables at all….

    However, if you want that vertical alignment on a **specific page** only then you will have identify the ID that goes with your page (.page-id-321 I think.)

    As I sad though, you should be moving away from tables and perhaps thinking of using a custom post type or a wrapping div with a special class.

    As always, there are better people than me at WP…in fact, anyone is better than me.

    # January 23, 2013 at 11:07 am

    There’s maybe better people out there at WP but none quite as good at hitting the nail directly on the head! Thanks, that’s done it. I will certainly be looking into wrapping divs for round 2 of website updates but for now I just need this thing up there and looking good! Thanks again!

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".