MCE Table Buttons

Adds table editing controls to a third row in the WordPress classic editor.

A very light weight plug-in based on a slightly modified version of the table editor plug-in included with the full version of TinyMCE. Only includes English localization; please let us know if you would like additional localizations added. The table editing toolbar will hide and display with the “kitchen sink” (activated with the button that looks like 3 rows of squares on the first toolbar row in the editor).

Note that this should not be used with other plug-ins that significantly alter the editor’s default behavior. It is intended to be a simple, light weight solution for editors who only want to add table management to WordPress’ included editor.

  • Updated 2022-01-27
  1. Don’t work with WP 3.2.1. Tried to fix it. but no luck… I see only button “insert table” and no other buttons. Hope you’ll fix it!

    • Works great in my tests! Maybe a conflicting plug-in?

      • I agree with Jet, but I have 3.3.1.
        I installed it, activated it, and went to “new post”. the toolbar looks nothing like your picture above. Interestingly enough though, when it’s still loading the page, it does show a 2nd line, but then goes back to default (like the plugin tried to work but crashed or didn’t load). If it worked on yours, then great! How do I get it to work on mine?

        • Do you know how to open the “kitchen sink” toolbar? It’s the button in the first row which looks like a line of small squares followed by a double line.

          • I’m getting the same thing only I do not see any insert table and I don’t see any button as what you describe a kitchen sink…. HELP

  2. Jake…nice work.
    1 issue- how on earth do you remove the table borders? set colours to white, tried 0 for border- everything but still shows grey border outline…HELP!!!

    • Use your theme stylesheet.

      • Hello Jake
        Can you please explain what exactly to change in order to get rid of the grey borders?
        many thanks

      • samer here. Cant for the life of me get rid of the boarders, the Table Properties doesn’t do it.

  3. We’re experiencing the same issue in 3.2.1 – doesn’t show up after activation.

    We’ve got numerous other plugins installed. Disabling all of them doesn’t help.

    Any known conflicts?
    (If you’re interested email me for a full list)

  4. Hello! First, great plugin, second, I want to add my own FR language file to your plugin. I’m trying to create a fr_dlg.js file, but it doesn’t seems to work. I can replace the en_dlg.js file but i don’t want to do it again if the plugin is updated… any solution? thanks!

  5. Hi, Jake!

    Very good work! Where this plugin get a table classes? How I can make classes of my own?

    Thanks

    • I would like to know this too. I would also like to add custom classes.

      • Me too – looking at the javascript it seems to query the classes from the dom of the browser – so I think the classes available will be those loaded by WP when in the Admin panel. I’m using a theme which allows custom classes to be defined, but I don’t think these are loaded when viewing the Admin panel so aren’t available when you look at the cell properties. It’s a pity that the classes are fixed using the pull-down – if it allowed class names to be typed in manually it would be more flexible.

        • Fair enough, but remember, the plug-in is just designed to add the existing MCE Tables plug-in back into WordPress’s implementation of TinyMCE. So for now, the features of the table editor will be those included in the stock MCE table plug-in.

          • have you considered updating the bundled table plugin to the newest version?

          • Adding the ability to add classes to tables would allow our communities to make beautiful coloured tables with easy such as ‘blue’ or ‘green’.

          • Fortunately there is a very simple solution:
            https://wordpress.stackexchange.com/questions/319400/how-to-add-table-class-for-tables-of-tinymce-advanced-wordpress-plugin
            It works for MCE Table buttons when adding to one’s theme functions.php

          • Josh – thanks for sharing that tweak to the MCE Table Buttons plugin, that should help others coming here to learn more!

            Jeff.

  6. Hi, I do a french translation for your plugin, please contact me by email for sending ;)
    Bye

  7. Simply feature request: please add the TinyMCE delete table button :)

    Thanks for the great plugin!

  8. Hey, Jake…

    Great plugin! Is there a way to REMOVE formatting from a table? When I paste a table from Word, it includes all the widths, heights, alignment, etc. Is there an easy way to strip all of that, so I can style everything with css?

    Thanks!
    Jonathan

    • Did you try the “paste from Word” feature?

      • Yes…the “paste from Word” puts the table in, but includes all the cellpadding, cellspacing, widths and “valign” (which isn’t proper coding for xhtml).

        I’ve tried using your plugin to set everything to ‘0’, but then it leaves in “style=”width: 0px;” It also would be nice if it could strip the styles, padding, alignment out as well as put it in.

  9. Very useful plugin! loved it. I often find myself creating tables in my pages and posts – this makes it SO much easier!
    Will make a small donation.

  10. Love the plugin. Unfortunately seems to conflict with Tiny MCE Advanced when used with WP 3.4 I can have one or the other active, but not both. Any ideas? Thanks for a great plugin.

    • The plug-in is not designed to be compatible with alternative visual editors (MCE setups). I believe Tiny MCE Advanced has it’s own table editing buttons, however.

  11. How do I justify the text in one of my columns so that it is not centered? The left alignment button in the wordpress editor appears to work in the editing window, but does not seem to have an effect after the post is published. For an example please see: http://www.lippubs.com/books-test/

    • Sounds like an issue with your front end stylesheet.

  12. Hello. Is there away to create cells that span multiple columns using your plugin? I have a client who is using tables to create restaurant menus, and every other row has a different number of cells (alternating 1 cell, 3 cells). Currently, when they try to add a column, it adds it for every row.

  13. Love the plugin, really clean, but I have one question.

    When you go to insert table and you see the Class option — Not set — , is there a way to add classes in here? This would be really valuable allowing the user to insert different kinds of tables.

  14. I found that the “MCE Table Buttons” plug-in doesn’t display if the “TinyMCE Advanced” plug-in is also installed and activated.

    • Correct. This plug-in is meant to extend to the default editor. To my knowledge, TinyMCE Advanced already includes some table editing choices.

  15. hi whats the Code for the Insert Row and insert column buttons? i’d like to add a button on the page where it adds colums and rows…

  16. Jake,

    I’m about to beat my head against a “BRICK” wall! When I setup a table with 1 row, 2 columns and put a graphic in the right column with corresponding text in the left side, I cannot get both columns to valign top. The text in the left column keeps getting pushed down below the graphic in the right column…HELP!!!!!

    Jeff

    • Hey Jeff – this sounds like it’s probably a CSS issue within the theme. I’ll take a look, but keep in mind that I don’t write all the JS for the actual table editor – that comes directly from the TinyMCE open source project that WordPress uses for its editor (but omits the table code).

    • Im pretty ;ate on this, but recently had exact same issue. The reason was vertical-align: baseline causing problem for tr, td, table tags.

      You’ll probably find that in the reset stylsheet, if you have any or in the main stylesheet.

  17. Love your plugin but is there a way to stop it removing tags from the table?

    • that was meant to say br or p tags..

  18. Nice plug-in but wordpress ignore padding and space commands. I made a nice tabel in the editor with colors, padding and space, but the result on the web is only colors. When I switch over to compatibility mode, de padding and space are there! It is independent of the theme that I use. Any suggestions?

  19. It´s possible to grant permission to editors use the plugin, and not only admins?

    • All users with access to the visual editor should see the buttons.

      • Ok. I just realised the visual editor is not showing the third row…

  20. Overal we are very happy with this plugin. Only flaw is that on an iPad it is impossible to edit text in an existing cell. I can delete text, but not add new text. For my client this is a major problem, because she cannot work in html editor. Is there à way to solve this?

    • iPad optimization isn’t high on the priority list, but it’s now on the list. :-)

Leave a Comment

Finely crafted websites & tools that make the web better.