Help with table

  • Unknown's avatar
    drewlymadlydeeply · Member ·

    Hello!

    Can someone please help me – been working on this for days, entire site launch delayed because of this.

    Our staff cannot figure out how to get our names in table column 1 to not be two lines. if we make the table fixed width it sends our bios far to the right. if we do the other table view settings it rudely forces our names into a second line. why won’t the table act decent?

    Here is a pic of both views.

    Close to okay… but the names in left column take up two lines!
    column

    Now the names are good but the bio is wasting space in the middle by not coming over.

    table-help

    my theme is hermes

    The blog I need help with is: (visible only to logged in users)

  • kokkieh · Staff ·

    Hi there,

    Tables are meant to represent data, and should never be used to control layout on a website – using tables to control layout causes issues with both accessibility and mobile responsiveness, and as you’re seeing, can be very tricky to get things looking exactly the way you want.

    With the block editor there are several ways to get the type of layout you want without having to use tables.

    Use a heading block for the name, a media & text block for the photo and bio, and a columns block for the footer bar.

    You can set a background color on both the Heading and Columns blocks to distinguish them as you currently have, and you can set the exact width you want the photo and corresponding column underneath it to be, so those are always aligned no matter the screen size.

    Here’s an example of how it would look I quickly created on a test site (using a different theme – it’s just a proof of concept :) )

    https://d.pr/i/dJjiEi

    You can also create a block pattern, so you only need to create this layout once, and then you can insert the pattern to replicate it multiple times on the page.

    If needed, you can then use custom CSS to tweak the appearance, e.g. reduce spacing if you feel the elements are too far from each other, etc.

    Can you give this a try instead? It will work better, and be easier to maintain long term than a table. Let us know if you run into any trouble with it.

    Also note that your plan gives you access to both live chat and direct email support. You can reach those at any time by clicking the Help icon that appears bottom-right on all the My Sites pages, or else via the direct link at https://wordpress.com/help/contact

  • The topic ‘Help with table’ is closed to new replies.