CKEditor5 Table Fix

CKEditor5 Table Fix

A lightweight plugin that restores full HTML table markup support (like <tfoot>, <th scope>, and nested tags such as the table caption element in CKEditor5 for Drupal 10 and 11. Especially useful after upgrading from CKEditor4.

Features

• Restore capability to handle otherwise stripped table elements and attributes in CKEditor5, such as:
• <tfoot>
• <th scope>
• <caption>
• <div>
• <div> nested <dt>
• <dt> nested <dd>
• <dt> nested <dl>
• <p>
• <td> nested <ol> and <ul> elements
• <ul> or <ol> nested <li> elements
• <section> wrapping table element
• <details> wrapping table element
• See sample markup below for testing and verification purposes
• Provides a faux CKEditor button for easy enablement
• Works with Drupal 10/11 and any text format using CKEditor5
• Designed for upgraded sites coming from CKEditor4 that need legacy table markup preserved

Use cases:

• Government and enterprise sites with legacy or semantic HTML tables
• WCAG-compliant data tables needing accessible markup
• Any site where CKEditor 5 strips valid table structure and formatting

Post-Installation

1. For detailed instructions review the README.md installation and configuration steps.
2. Disable the core CKEditor 5 table plugin on your target text format(s). You can do this under Configuration → Content Authoring → Text formats and editors.
3. Enable the CKEditor5 Table Fix plugin on the same text format. Look for the “Table Fix Dummy” button and add it to the toolbar.
4. Save your text format — the plugin is now active.

No visible button will appear in the CKEditor UI, but the plugin will be loaded silently in the background to preserve your full table markup.

Sample table markup to test

<section>
    <!-- or <details> -->
        <table class="table table-bordered table-responsive">
            <caption class="text-left"><span class="small lead">For example, your year productive capacity is 601 acres of grain</span></caption>
            <thead>
                <tr>
                    <th scope="row">
                        test
                    </th>
                </tr>
                <tr>
                    <td>
                        &nbsp;
                    </td>
                    <th class="text-right" scope="col">
                        Reference year 0
                    </th>
                    <th class="text-right" scope="col">
                        Reference year 1
                    </th>
                    <th class="text-right" scope="col">
                        Reference year 2
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr class="text-right">
                    <th scope="row">
                        Grain (acres)
                    </th>
                    <td>
                        601
                    </td>
                    <td>
                        601
                    </td>
                    <td>
                        601
                    </td>
                </tr>
                <tr class="text-right">
                    <th scope="row">
                        Industry Benchmark
                    </th>
                    <td>
                        $130.12
                    </td>
                    <td>
                        $79.11
                    </td>
                    <td>
                        $124.78
                    </td>
                </tr>
                <tr class="text-right">
                    <th scope="row">
                        Total
                    </th>
                    <td>
                        $78,074
                    </td>
                    <td>
                        $47,460
                    </td>
                    <td>
                        $74,870
                    </td>
                </tr>
            </tbody>
            <tfoot>
            <tr>
                <td colspan="4">
                    <div class="wb-fnote">
                        <dl>
                            <dt>
                                Note 1
                            </dt>
                            <dd id="table1-fn-1">
                                <p>
                                    The sum of values may not add up to totals as a result of rounding.
                                </p>
                                <p class="fn-rtn">
                                    <a href="#table1-fn-1-rf"><span class="wb-inv">Return to note </span>1<span class="wb-inv"> referrer</span></a>
                                </p>
                            </dd>
                        </dl>
                    </div>
                    <p class="p-element-test">
                        test p element
                    </p>
                    Provide the name of the person in your organization
                    <ol class="list-unstyled">
                        <li>
                            Average ($78,074 + $47,460 + $74,874) ÷ 3 = $66,802
                        </li>
                        <li>
                            Multiplied by 0.44% = $298
                        </li>
                        <li>
                            Multiplied by 71% = $211
                        </li>
                        <li>
                            Total: fee amount = $211
                        </li>
                        <li>
                            Add: administrative cost share = $56
                        </li>
                        <li>
                            Total: fee plus administrative cost share = $267
                        </li>
                    </ol>
                </td>
            </tr>
            </tfoot>
    </table>
<!-- or </details> -->
</section>

Additional Requirements

None. This module only requires Drupal core CKEditor 5 support and does not depend on contrib modules.

Related projects

• CKEditor5 Sup Fix
• CKEditor5 Label Fix
• CKEditor5 Definition List Fix

Supporting this Module

This module was created and maintained by Cinder Systems.