Need help? Check out our Support site, then


Tables - Don't do it

  1. (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.

  2. 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 > http://en.forums.wordpress.com/topic/how-to-change-table-width?replies=4

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

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

  5. 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. :)

  6. 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.

  7. @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).

  8. Thank you both, timethief and panaghiotisadam

  9. You're welcome from me. :)

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

  11. dickiebo -- I hope you don't have trouble.

    Love your site -- Especially this post. Hilarious!

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

  13. 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/

  14. 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!!

  15. 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.

  16. 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?

  17. 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>
  18. Thank you. That's very helpful. Sounds like I need to educate myself a little bit on html or recruit one of my kids :).

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

  20. 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.

  21. Ah, I found some sites. Sorry if I've wasted anyone's time.

  22. a) As I mentioned in my first reply in this thread, you need to examine the stylesheet of the theme to understand what the theme imposes (which means what you may need to change or override). The defaults in Twenty Ten are:
    table: 100% width, 1px light grey border around
    each cell: top and bottom padding 6px, left and right padding 24px, 1px light grey border above only.

    b) Re your questions:

    1. Font size shouldn't change unless you specify a different size. Please link to a post or page with the issue in question.

    2. The default padding sets a limit to how small the height can be. Better not use height in the opening td tags and adjust the padding instead. Same goes for width.

    3. You need to add this in the style attribute of each opening td tag:
    border:1px solid #000000;

    4. The color is determined by the hex number with the # before it. The number 000000 in Tess's example is pure black. For colors and hex numbers see here:
    http://www.december.com/html/spec/color.html

    5. Don't use width in the style attribute of the opening td tags: add it in the style attribute of the opening table tag instead. To create a "small table, left-justified, and put text beside it", you need this in the opening table tag:
    style="width:NNNpx;float:left;border:1px solid #HEX;"

    c) Could you link to some of the sites you found? If you mean table tutorials, first they cannot take into account the quirks of your theme, second most of them still give the deprecated coding you're using at he moment, much of which doesn't work.

  23. Re 5: I forgot to provide for some space to the right of the table. Should be:
    style="width:NNNpx;float:left;border:1px solid #HEX;margin-right:12px;"

  24. Sites I was looking at that I wasn't sure of:
    http://www.w3schools.com/html/html_tables.asp
    http://www.w3.org/TR/html4/struct/tables.html
    http://www.htmlgoodies.com/tutorials/tables

    timethief's site which I thought was probably reliable: :)
    http://onecoolsitebloggingtips.com/2008/03/31/how-to-make-html-tables-for-your-wordpress-blog/

    Sites timethief linked to that I suspected would be good:
    http://pubs.logicalexpressions.com/pub0009/LPMArticle.asp?ID=36
    http://www.2createawebsite.com/build/table_tutorial.html
    http://wpbtips.wordpress.com/2010/06/15/overriding-table-borders/ (this one I felt pretty confident about :))

    Just for my own education, you gave the defaults for TwentyTen in your opening paragraph, but where do I find that kind of detail?

    As to the specifics:
    1) It was only my eyes playing games with me. What I described definitely happens in the Visual WP editor (the text in the table gets smaller if you change the colour) but it has no impact when you publish. I thought it did, but checked more carefully today and it doesn't. Sorry for wasting your time.
    2-5) thank you for your help.

    Financial formulas? Check. Visual C++? Check. Biblical Greek and Hebrew? Check. But HTML turns me into a blathering idiot.... :)

    Thanks again.

  25. You're welcome.
    As I expected, all the tutorial pages you've found are outdated. (My own post isn't, but it's not a table tutorial, it's just one piece of coding to modify one table default.) I'll write a table tutorial eventually, but you'll have to wait long: I'll do an article on HTML first, then one on inline CSS then tables.

    To find the defaults of the theme, you go to Appearance > Custom Design > CSS and click View Original Stylesheet. If your HTML and CSS aren't as good as your Greek and Hebrew, you won't like what you'll see!

Topic Closed

This topic has been closed to new replies.

About this Topic