Tables – Don't do it

  • Author
    Posts
  • #780728

    (if this is the wrong forum – please let me know)

    I was warned by experienced people that tables are not the best thing to play with in our posts. Now I know why and I’m sharing this to save you some time. Hopefully you will listen better than I did :-).

    Tables are unpredictable when you change themes. What looks awesome in one theme can turn into smushed unreadable mush in another. I found this out by accident – after my readers had been subjected to a poor reading experience for a few days.

    The blog I need help with is swrightboucher.wordpress.com.

    #780819

    timethief
    Member

    What’s happening is that some themes are HTML5 and CSS3 and the old HTML tables codes have been deprecated. You need inline CSS instead, that is, properties and values in the style attribute. Example here > https://en.forums.wordpress.com/topic/how-to-change-table-width?replies=4

    #780823

    That sounds right. And I think you were one of the experienced users who tried to warn me before I did it. <grins sheepishly>

    #780830

    timethief
    Member

    Hi again,
    If you go to panaghiotisadam’s blog and leave a comment asking for assistance he will help you with the code.

    #780831

    That’s so nice of you to suggest, timethief. But since I’m a serial theme-changer, I think I should stick with formats that are simple enough for me to understand. :)

    #780838

    timethief
    Member

    As Staff are continually updating themes to reflect the changes to HTML5 and CSS3 even if you do select a theme that displays the deprecated HTML table codes now be aware that will not prevail forever.

    #780956

    @swrightboucher: Apart from the reason timethief mentioned, the other reason is that some of the newer themes have strange defaults for tables, and these defaults distort the intended result. In Twenty Eleven, for example, cells will have right but no left padding, they will have a top border only, the table will have a bottom border only, it will stretch to cover the whole width of the post no matter what the contents of the table, images will be bottom aligned… So you need to add lots of additional styling to change or override what the theme imposes (after you examine the CSS of the theme to find that out).

    #781002

    Thank you both, timethief and panaghiotisadam

    #781007

    timethief
    Member

    You’re welcome from me. :)

    #781013

    dickiebo
    Member

    Gosh. Looks like I’m in for it somewhere along the way!!!!! lol.

    #781015

    dickiebo — I hope you don’t have trouble.

    Love your site — Especially this post. Hilarious!

    #781070

    jwce21
    Member

    Are there any themes that are especially good for displaying a table? I’m looking to create a static page with a simple 3×5 table of data. Thanks in advance!

    #781071

    Depends on your definition of “good”. Most themes display no borders or anything unless you tell them to, but some themes display borders and/or bg color unless you tell them not to. The latter are listed here:
    http://wpbtips.wordpress.com/2010/06/15/overriding-table-borders/
    http://wpbtips.wordpress.com/2011/02/13/overriding-default-table-colors/

    #781086

    legalroar
    Member

    I am looking for a way to display a table also. I work on the free version of Vigilance and won’t be changing themes, so that is not an issue for me. I am familiar with html and was a webmaster for several years, so not frightened by coding. I only need a table for my Recommended Reading page, where I would like to display the image of the book on the left side and the authors and info on the right, without of course the text wrapping to below the image. I can get it to look ok in Visual mode (no tables just using the image insertion feature) but as soon as I add a new image or book below the existing one, it gets all wonky again. Do I have any other options? When I try to do them in HTML mode, it gets messed up when I switch back to Visual. Frustrating! Thanks!!

    #781087

    raincoaster
    Member

    Add the content below the table prior to switching back to Visual. If you’re updating on a regular basis, you may want to copy/paste the code and keep it in a text file for easy copy/pasting purposes.

    #781088

    jongleason
    Member

    I’ve used simple tables a few times by creating my table in Excel or Word, then using the Paste from Word feature. Am I borrowing trouble for myself if I ever change themes, or is this going to be ok?

    A recent example: http://mindrenewers.com/2011/12/27/a-proverb-for-today-proverbs-2528-part-one/

    Should I not do this, or can I trust the paste from Word to protect me from problems?

    #781089

    1tess
    Moderator Emeritus

    That method is giving you deprecated HTML tables code. You need inline styling instead: properties and values in the style attribute.
    Sounds complicated but for your simple tables, you can save this simple code to paste into the html editor when you need it.

    <table style="border:1px solid #000000;">
    <tbody>
    <tr>
    <td style="width:106px;height:20px;">TEXTHERE</td>
    <td style="width:308px;height:20px;text-align:center;">TEXTHERE</td>
    </tr>
    <tr>
    <td style="width:106px;height:20px;">TEXTHERE</td>
    <td style="width:308px;height:20px;text-align:center;">TEXTHERE</td>
    </tr>
    </tbody>
    </table>

    Copy and paste this part as many times as you want:

    <tr>
    <td style="width:106px;height:20px;">TEXTHERE</td>
    <td style="width:308px;height:20px;text-align:center;">TEXTHERE</td>
    </tr>

    #781090

    jongleason
    Member

    Thank you. That’s very helpful. Sounds like I need to educate myself a little bit on html or recruit one of my kids :).

    #781091

    1tess
    Moderator Emeritus

    You are welcome.
    If you have questions, feel free to ask here. The styling of the table can be changed.

    #781107

    jongleason
    Member

    Some questions. If there is documentation somewhere that explains all this, I hope I’m intelligent enough to follow it, if someone just wants to point me in the right direction, rather than having to explain it all to a rookie. :)

    1. When I use this, the size of the text in the table appears to be larger than normal text. When I changed to visual editing and changed the colour of the text to blue, it appeared to change to the normal size. Do I have control of the text size?
    2. It appears that when I mess up and don’t get the same height for every column in the same row, it uses the largest height of the two. Also, it doesn’t appear to let height go smaller than would leave plenty of room for the text (if I set it to 10, it still looks like it did when the height was 20). Is that correct?
    3. Is there a way to add a vertical border between the columns?
    4. I’m assuming the colour of the borders is driven by the initial “<table style…” line. How? Is there documentation anywhere that shows what options are available?
    5. This creates a table that goes the entire width of the screen, even if I reduce the width of the two columns. Is there a way to make a small table, centered or left-justified, and put text beside it?

    Thank you again for your help.

The topic ‘Tables – Don't do it’ is closed to new replies.