Back to Community
Home / Community / Plugin → Advanced editor tools

Troubleshooting Table Alignment Issues in Advanced Editor Tools

19 threads Sep 16, 2025 Plugin → Advanced editor tools

Content

Many users of the Advanced Editor Tools plugin (formerly TinyMCE Advanced) encounter a common frustration: tables that won't align correctly. This issue can manifest in several ways, such as tables refusing to center, rows floating left, or vertical alignment not behaving as expected. This guide will explain why these problems occur and provide the most effective solutions based on community experience.

Why Do Table Alignment Issues Happen?

Table alignment problems are rarely caused by a single factor. The Advanced Editor Tools plugin interfaces with the TinyMCE editor and your WordPress theme, meaning alignment is a joint effort between the plugin's output and your theme's CSS styling. A common point of confusion is that the plugin often adds alignment via CSS classes (like aligncenter) rather than inline styles. If your theme's stylesheet does not have robust rules for these classes, the alignment will not render correctly on the front end of your site.

Common Solutions for Table Alignment

1. Inspect and Modify Your Theme's CSS

The most frequent solution to alignment problems is addressing the theme's CSS. The plugin generates the HTML structure, but your theme controls its final appearance.

  • How to do it: Use your browser's developer tools (F12) to inspect the misaligned table. Identify which CSS rules from your theme are affecting it.
  • Apply a fix: Navigate to Appearance > Customize > Additional CSS in your WordPress dashboard. Add custom CSS rules to override the theme's default styles. For example, to ensure a centered table works, you might need to add:
    table.aligncenter { margin: auto !important; }

2. Check Table Width Properties

A table set to width: 100%; cannot be centered, as it is already spanning the full width of its container. Centering only applies to elements with a defined width that is less than 100%.

  • How to do it: In the table properties, change the width to a percentage less than 100% (e.g., 80%) or a fixed pixel width before attempting to center it.

3. Address Vertical Alignment in Cells

Vertical alignment (top, middle, bottom) is a function of the TinyMCE editor's table plugin. While these options have been missing and reintroduced in past updates, their functionality can sometimes be inconsistent.

  • How to do it: If the visual editor buttons are missing or not working, you can manually add the inline style in the Text (HTML) editor. Locate the <td> tag for the cell you want to adjust and add the style attribute:
    <td style="vertical-align: top;">Your content here</td>

4. Browser-Specific Rendering Issues

As noted in the community threads, browsers like Chrome and Firefox can interpret table cell height and width attributes differently, leading to inconsistent displays.

  • How to do it: For more consistent results, avoid manually dragging to resize cells in the visual editor. Instead, use the Table Properties dialog or remove conflicting HTML attributes like height="###" directly from the <td> tags in the Text editor.

Important Considerations

  • RSS Feeds and Email: Be aware that CSS styling applied to your theme will not carry over into RSS feeds or emails (e.g., Mailchimp campaigns). These systems parse the HTML but typically ignore external stylesheets, which can cause alignment to default to browser or email client settings.
  • Pasting from Microsoft Word: Pasting content from Word can introduce a large amount of extraneous inline styling and HTML that conflicts with your theme's CSS. Always use the "Paste as Text" button in the editor toolbar to avoid these conflicts.

By understanding that table alignment is a collaboration between the editor and your theme, you can effectively diagnose and solve these common layout challenges.

Related Support Threads Support