Need help? Check out our Support site, then


WordPress.com Forums » Support

HTML Table Format

  1. testcricketleague
    Member

    My site contains a number of data tables. In the past, I have imported them from Excel by saving the relevant spreadsheet as an HTML file, opening the file in Notepad, then pasting this into the HTML editor in WordPress.

    Recently, however, the visual editor has started to represent the HTML tables using a rather basic, visually unappealling format - quite different to the format used previously (for example, I've lost both the alignment of text within columns and fill colour of cells). The tables already uploaded to the site are fine, but if I make any edits to these pages then the tables will take on the new format.

    Has there been a recent update to the editor that has caused this? And is there a way I can switch back to the previous formatting system?

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

  2. timethief
    Member

    See this answer from WordPress staff:

    Hi all,
    A change that we made last week is causing the Visual Editor to strip out attributes on table tags.

    To work around this for now, you will need to use the Text editor on any posts where you have tables. If you switch back to the Visual Editor before saving changes on those posts, the attributes will be deleted, so please make sure you save your changes if you switch back to using the Visual Editor.

    The developers do know about this, and we'll keep you all up to date once we know anything further. http://en.forums.wordpress.com/topic/html-tags-changed-from-visual-to-text?replies=7#post-1040004

  3. languageomnivore
    Member

    I've tried to create a simple html table several ways this morning, including keying the code directly into the Text editor and saving that version without switching back to the Visual editor as you suggested. The outcomes is always the same unfortunately. WordPress reduces my table and its cells to a simple stack of rows the same length as the main paragraph. This doesn't work.

    When you say that you'll keep us all up to date once you know something further, how does that work? I'm fairly new to WordPress myself. I didn't know about the changes you were making, so I'm not sure how I would know about the solution. Thanks.

  4. 1tess
    Moderator

    What is the code you were trying to use? To post code here place it between backticks like so
    backtick — code — backtick
    (the backtick is ` and is usually on the same key as the tilde ~ next to the 1 and ! key)

    Or highlight the code with the code tag above the comment box.

  5. 1tess
    Moderator

    As for staying up to date, you could try subscribing to this topic so whenever there is a new post you will be notified.

    Or check on this tag to see if there are new developments:
    http://en.forums.wordpress.com/tags/html-table-tags

    Please note that this is a community forum and so for the most part we are volunteers answering your questions. We don't know what staff is up to behind the scenes.

  6. languageomnivore
    Member

    Oh, wow. Really sorry. I didn't realize this is manned by volunteers. Thank you so much for your time.

    The thing is this, I need to build a table with a bit of control over the cell sizes. This is a small example of what I'd like to do, but WordPress seems to ignore things like borders and column widths.

    <table border="2">
    <tbody>
    <tr>
    <td> Mandarin, Simp.</td>
    <td>  电话 </td>
    <td> diànhuà</td>
    </tr>
    </tbody>

    Thanks for any insight you have.

  7. testcricketleague
    Member

    Does anybody know if the original problem is any closer to being fixed? Tables in the Visual Editor are now being displayed with gridlines, but still not with correct fill colours, text alignment or column widths.

  8. languageomnivore
    Member

    No change in the ability to create tables in WordPress.com as far as I can tell. I updated my account to a customizable level thinking that that would allow me a little more flexibility. It doesn't.

  9. superbasketball
    Member

    I do manage to put colours and formatting in my tables (check my blog at superbasketball.wordpress.com, but I need to paste the code into the text editor and avoid carefully any switch to the visual before saving and publishing. I use the preview often to see the result, that's it. It works but I do not like it at all, as crating posts with images, tables and links in the text editor is really confusing. This is why WP has a Visual editor after all!!! WP should fix this issue for good!

  10. kathrynwp
    Staff

    You can currently add deprecated (obsolete) HTML attributes like border and bgcolor to table and tr tags, but not td tags. This should be reverted back to the way it was in a future update and you'll once again be able to add deprecated attributes to td tags without having them stripped out.

    As a better alternative to using obsolete tags, you can always add inline CSS to td tags - such as:

    <td style="background-color: #000">data</td>

    If you have the Custom CSS upgrade, an even better method is to define a class in your stylesheet, and then apply it to your td, such as:

    .special {
background-color: #000
}

    <td class="special">data</td>

    Keeping your styles separate from your HTML code is best practice.

  11. superbasketball
    Member

    I will study this, but as I am using the default html generator within Excel to create the tables, I would need to process the code between creation and pasting into the post. I know I could probably even do it with a script, but that is annoying, especially because the procedure worked fine for quite a few years until the first week of October...
    Thanks kathrywp for taking time to explain me the possibilities with CSS!

  12. kathrynwp
    Staff

    I understand the frustration - unfortunately, Excel produces really poor HTML code. :-(

  13. superbasketball
    Member

    I see your point, but I spend so much time in generating the CONTENT of my blog that i hoped I could spend as little time as possible in caring about the format...I will really be very happy to go back to a situation where I can select the table from the html page in the browser (CTRL+A, CTRL+C), open the Visual Editor and paste it in the new post with CTRL+V like I could do in the past. So simple!!!
    Sigh.

  14. kathrynwp
    Staff

    Could anyone who's posted here please let me know if your table code is once again working as it did before? I just did a test, and with the software update that happened overnight it looks like HTML attributes on td table cells are now being preserved.

    Thanks!

  15. superbasketball
    Member

    YES!
    I will check more thoroughly, but I'd dare to say that the problem seems to be solved!!!
    Thank you kathrynwp! You are a real Happiness Engineer! ;-)

  16. kathrynwp
    Staff

    Excellent - very glad to hear it!

  17. testcricketleague
    Member

    Thanks for looking into this, kathrynwp. There has been an improvement in the format of the tables since the latest update, but they are still not displaying as they were before the problem.

    Fill colours, gridlines and cell alignment have now returned, but the spacing is still awry, with several of the columns in my tables squeezed together. Before the problem, there was some space either side of the text in these cells, which made for a far more attractive and readable layout.

  18. kathrynwp
    Staff

    testcricketleague - could you please provide a link to a post which isn't displaying as you like, so I can take a peek? And a link to a post from before, which has the formatting you want? Thanks!

  19. testcricketleague
    Member

    Hi kathrynwp. Here are the links as requested:

    New format: http://testcricketleague.wordpress.com/2001-year-overview-new-format/

    Old format: testcricketleague.wordpress.com/2001-year-overview-old-format/

    Do let me know if you need any further info. Many thanks.

  20. languageomnivore
    Member

    Thanks for looking into this, Kathryn. My problem is similar to testcricketleague's. I've got very little control over the width of my table row cells. Any light you can shed on the issue, coding tips, or work-arounds will be very much appreciated. I purchased the custom CSS upgrade, but did not discover in there any tools that allowed me to specify cell width.

  21. kathrynwp
    Staff

    languageomnivore - to control the width of table cells, the best method is to separate the CSS from the table code. For example, let's say you want some of your table cells to be 100 pixels wide.

    In your CSS you can add something like this:

    .mycell1 {<br /> width: 100px;<br /> }

    Then your table might look like this:

    <table><br /> <tr><td class="mycell1">data</td><td class="mycell1">data</td><br /> </tr><br /> </table>

    Here are some CSS basics you might find helpful:

    http://en.support.wordpress.com/custom-design/css-basics/

    If you need further help with your tables, please start a new thread so we can assist you there.

  22. languageomnivore
    Member

    Very helpful, Kathryn! Thanks for your answer.

  23. kathrynwp
    Staff

    testcricketleague - to get your new tables looking like the old ones, you'll just need to add some padding to your cells as needed.

    I added padding:2px; to the cells in your first table so you can see how this looks.

    A much more efficient way to style your tables would be by separating your styles from your table code, as you can see in the example I gave just above. If you have any questions, just let me know.

  24. testcricketleague
    Member

    Thanks, kathrynwp. When you added the padding to the cells, did you have to manually insert 'padding:2px;' into each line of text or is there a quicker way of doing this? (I don't have the CSS upgrade.) As you may have seen, I use a lot of tables on my site and having to manually insert all those padding commands would be laborious in the extreme.

    Also, does the padding create extra space on the top and bottom of each cell as well as the left and right? The table that you amended is noticeably taller than previously.

    Is there any chance that a future WordPress update might deal with this problem and return my tables to the format under which they were originally displayed?

  25. kathrynwp
    Staff

    When you added the padding to the cells, did you have to manually insert 'padding:2px;'

    Yes.

    is there a quicker way of doing this?

    I tested a number of methods on your post but couldn't find a quicker method.

    Also, does the padding create extra space on the top and bottom of each cell as well as the left and right?

    Yes. If you want padding only on the left and right you can modify the code to this: padding: 0 2px;

    Is there any chance that a future WordPress update might deal with this problem and return my tables to the format under which they were originally displayed?

    Unless I can find the root of the problem, unfortunately not. I examined the code in both your posts but wasn't able to see a difference. Perhaps you could create two smaller test posts (you can leave them as drafts) so there is a bit less code to look through. Again, one with a post that doesn't have the correct padding, and one that does - but perhaps with only a single table this time. I'd be glad to give it another try.

  26. testcricketleague
    Member

    I've just been checking my site and I'm glad to say that the issue with the spacing seems to have been resolved. Everything seems to be back to the way it was before the problem with the tables arose.

    Many thanks for all your help with this, kathrynwp. It's very much appreciated.

  27. kathrynwp
    Staff

    Very glad to hear this!

    If you have any issues in the future feel free to start a new thread.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags