20% Off All Froala Plans
Days
Hours
Minutes
Seconds
x

New Froala Editor v4.3.1 is here – Learn More

Pricing
Get Started
Skip to content

    Best WYSIWYG Editor for Styling Tables

    I. Introduction/Overview

    If you are using a WYSIWYG editor, then there is a good chance that you will be needing tables. Tables are a great feature to represent data in an organized way, and it is important to choose a WYSIWYG editor that makes creating and editing tables effortless. This will save your time and let you enjoy the working process.

     

    Before choosing a WYSIWYG editor, you should check if it supports inserting tables, because some editors like Quill, Trix, and ProseMirror don’t support it by default. Choosing editors like these will lead you to implement your own table using custom code or to migrate to another WYSIWYG editor that supports table features.

    In this article, we will compare how different WYSIWYG editors handle tables. Our WYSIWYG editors list will include:
    1. Froala
    2. TinyMCE
    3. CKEditor
    4. Summernote
    5. Editor.js
    6. ContentTools

    ContentTools

    To insert tables into the ContentTools editor:
    1. Click the “Edit” button to start editing the editable area of the page.
    2. Click the location where you want to insert a new table.
    3. Click on the “Table” icon from the editor toolbox to display the “Insert Table” dialog.
          1. Choose if you want to have a table header or not.
          2. Enter the number of columns you want to have on your table.
          3. Choose if you want to have a table footer or not.
      4 .Click on the “Apply” button.
    1. Click on a table cell to select the table.
    2. Click on the “Table” icon from the editor toolbox to display the “Edit Table” dialog.
    On the columns option, enter the number of columns you need.
    The ContentTools editor doesn’t allow you to specify which column you want to delete, but you can use the “Columns” option from the “Edit Table” dialog to enter the number of columns you need to delete, which will be less than the current number of columns. Then, the editor will automatically delete the columns according to the number you specified.
    When you insert a new table, only one row is created by default, along with a header if the “Table head” option is turned on. To fill your table, click on a cell and type inside it. To move to the next cell, press “Tab” or “Enter” on your keyboard. If the cell you are on is the last cell on the table and you press “Tab” or “Enter”, a new row will be inserted.
    1. Click on a cell of the row you want to delete.
    2. Click on the “Delete” icon from the editor toolbox.

     

    The ContentTools editor allows you to add a table header. The table header style is like the table row style but with a border at the bottom of the header row:
    1. Click on a table cell to select the table.
    2. Click on the “Table” icon from the editor toolbox to display the “Edit Table” dialog.
    3. Turn on the table header option.
    The ContentTools editor allows you to add a table footer. The table footer style is like the table row style, nothing special. To add a table footer:
    1. Click on a table cell to select the table.
    2. Click on the “Table” icon from the editor toolbox to display the “Edit Table” dialog.
    3. Turn on the table footer option.
     
    The ContentTools editor allows you to:
    • Align text within a cell
    • Italicize text within a cell
    • Add a link to a text within a cell
     
    ContentTools doesn’t allow you to insert images inside a table cell.
    Tables can’t be moved from their initial position.
    1. Select all table cells.
    2. Click on the “Delete” icon from the editor toolbox.

    Editor.js

    To insert tables into the Editorjs editor:
    1. Click the location where you want to insert a new table.
    2. Click on the “Table” icon from the editor toolbar. This will insert a (2×2) table into the selected location.
    1. Hover over the border of the column which you want to precede the new one. The new column will be inserted after it.
    2. A plus sign (“+”) icon will appear above it.
    3. Click on the plus sign icon and a new column will be inserted.

    Unfortunately, you can’t delete a table column, so be sure you need that column before adding it.

    1. Hover over the bottom border of the row which you want to precede a new one. The new row will be inserted under it.
    2. A plus sign (“+”) icon will appear at the left side.
    3. Click on the plus sign icon and a new row will be inserted.

    Unfortunately, you can’t delete a table row, so be sure you need that row before adding it.

    There is no option for adding headers or footers.

    You can’t edit text format on a table cell

    1. Click on the table.
    2. Click on the 3 dots at the right side of the table.
    3. Move the table up by clicking on the “Up” arrow icon or move the table down by clicking on the “Down” arrow icon.
    1. Click on the table.
    2. Click on the 3 dots at the right side of the table.
    3. Click on the “Remove” button.
     

    Summernote

    To insert a new table into the Summernote editor:
    1. Click the location where you want to insert a new table.
    2. Click on the table icon from the editor toolbar.
    3. Choose the number of columns and rows.

    You can copy a table from an outer source and paste it on the editor.

    By clicking on a table cell, a pop-up menu will appear with the following options:
    1. Add row below.
    2. Add row above.
    3. Add column left.
    4. Add column right.
    5. Delete row.
    6. Delete column.
    7. Delete table.
    There is no option for adding a table header or footer.
    Images can be inserted inside a table cell.
    Tables can be dragged to a new position.

    Cell width is automatically adjusted according to the content of the cell.

    The Summernote editor enables selecting chosen cells and copying their contents.

    <table class=“table table-bordered”>

            <tbody>           

              <tr><td>1<br></td><td>2<br></td></tr>

                    <tr><td>3<br></td><td>4<br></td></tr>

            </tbody>

        </table>

        <br>

    CKEditor

    To insert a new table into CKEditor:
    1. Click the location where you want to insert a new table.
    2. Click on the “Table” icon from the editor toolbar.
    3. Choose the number of columns and rows.

    You can copy a table from an outer source and paste it on the editor.

    By clicking on a table cell, a pop up menu will appear with the following options:
    1. Column options:
      1. Set column as a header.
      2. Insert column left.
      3. Insert column right.
      4. Delete column.
      5. Select column.
    2. Row options:
      1. Set row as a header.
      2. Insert row above.
      3. Insert row below.
      4. Delete row.
      5. Select row.
    3. Merge cells:
      1. Merge cell up.
      2. Merge cell right.
      3. Merge cell down.
      4. Merge cell left.
      5. Split the cell vertically.
      6. Split the cell horizontally.
    Images can be inserted inside a table cell.
    By hovering over a table, a drag handler will appear at the top left corner. Clicking on it will allow you to drag the table to a new position.
    To make it easy to separate tables from their surrounding content, hover over the top or bottom of a table to reveal a break button. Click this button to add a line break.

    Cell width is automatically adjusted according to the content of the cell.

    CKEditor enables selecting cells and copying their contents.
    1. Select all table cells.
    2. Click on the “Delete” or “Backspace” key from the keyboard.

    TinyMCE

    To insert a new table into CKEditor:
    1. Click the location where you want to insert a new table.
    2. Use one of these methods:
      1. From the quick insert buttons toolbar
        1. Click on the “Table” icon, and this will automatically insert a (2×2) table.
      2. From toolbar:
        1. Click on the “Table” menu item
        2. Click on the “Table” submenu item
        3. Choose the number of columns and rows.

    You can copy a table from an outer source and paste it on the editor.

    By clicking on a table, a pop-up menu will appear with the following options:
    1. Column options:
      1. Insert column before.
      2. Insert column after.
      3. Delete column.
    2. Row options:
      1. Insert row before.
      2. Insert row after.
      3. Delete row.
    3. Table options:
      1. Table properties.
      2. Delete table.
  • 1. General
    • From the “General” tab, you can set or edit these properties:
        • Width
        • Height
        • Cell spacing
        • Cell padding
        • Border width
        • Alignment
        • None
        • Left
        • Center
        • Right
  • 2. Advanced
    • From the “Advanced” tab, you can set or edit these properties:
    • Border style
      • Default
      • Solid
      • Dotted
      • Dashed
      • Double
      • Groove
      • Ridge
      • Inset
      • Outset
      • None
      • Hidden
        • Border style
        • Background color

    TinyMCE has many features for handling tables. They can be accessed through the “Table” menu on the toolbar or by right-clicking(or Ctrl-clicking for Mac OS) on the selected table.
    Here is the full list of items, with the items that aren’t accessible outside this menu being highlighted in yellow

    • Table

    Insert a new table


    TinyMCE allows inserting tables inside another table.

      • Cell
        • Cell properties
      ■ General

    From the “General” tab, you can set or edit these properties:

    • Width
    • Height
    • Cell Type
      • Cell
      • Header cell
    • Scope
      • None
      • Row
      • Column
      • Row group
      • Column group
    • Horizontal align
      • None
      • Left
      • Center
      • Right
    • Vertical align
      • None
      • Top
      • Middle
      • Bottom
      ■ Advanced

    From the “Advanced” tab, you can set or edit these properties:

    • Border width
    • Border style
      • Default
      • Solid
      • Dotted
      • Dashed
      • Double
      • Groove
      • Ridge
      • Inset
      • Outset
      • None
      • Hidden
    • Border color
    • Background color
    • Merge cells

    Merge two or more selected cells.

    • Split cell

    Split merged cells.

    • Row
      • Insert row before.
      • Insert row after.
      • Delete row.
      ■ General


    From the “General” tab, you can set or edit these properties:

    • Row type
      • Header
      • Body
      • Footer
    • Alignment
      • None
      • Left
      • Center
      • Right
    • Height
      ■ Advanced

    From the “Advanced” tab, you can set or edit these properties:

    • Border style
      • Default
      • Solid
      • Dotted
      • Dashed
      • Double
      • Groove
      • Ridge
      • Inset
      • Outset
      • None
      • Hidden
    • Border color
    • Background color
    • Cut row
    • Copy row
    • Paste row before
    • Paste row after
    • Column
      • Insert column before.
      • Insert column after.
      • Delete column.
      • Cut column.
      • Copy column.
      • Paste column before.
      • Paste column after.
    • Sort
          • Sort table by column (ascending)

          • Sort table by column (descending)

        • Advanced Sort

    The ‘Advanced Sort’ feature allows you to do complex types of sorting using these fields:

    • Sort by
      • Column
      • Row
    • Sort
      • Column
      • Selection
      • Table
    • Column
      • Depends on the number of the columns on the selected table.
    • Order
      • Ascending
      • Descending
    • Table properties
    • Delete table

     

    You can select table cells using by one of these methods:
    • Hold the left key of the mouse and move it over the cells you want to select.
    • When you click on the table, the HTML structure of the table is displayed at the editor footer. You can then click on the HTML element you want to select.
    Images can be inserted inside a table cell.
    Tables can’t be dragged, but you can cut and paste them in a new position.
    1. Select all cells.
    2. Click on the “Table” menu item.
    3. Click on the ‘column’ or ‘row’ submenu item.
    4. Choose ‘cut column’ or ‘cut row’ from the opened menu.
    5. Paste the table in the new location.
    When a table is inserted into the editor, it takes its full width, and column width is equally distributed according to the number of columns in the table. Table size can be adjusted using one of these methods:
    • Hold the table from one of its corner edges and drag it until it reaches the size you want.
    • Enter table width and height in the “Table Properties” dialog box.
    Column width can be adjusted using one of these methods:
    • Hold the column border and drag it until it reaches the width you want.
    • Enter cell width in the “Cell Properties” dialog box.
    Row height can be adjusted using one of these methods:
    • Hold the row border and drag it until it reaches the height you want.
    • Enter the cell height in the “Cell Properties” dialog box.
    • Enter the row height in the “Row Properties” dialog box.

    <table style=”border-collapse: collapse; width: 100%;” border=”1″>

            <tbody>

            <tr>

            <td style=”width: 48.0992%;”>1</td>

            <td style=”width: 48.0992%;”>2</td>

            </tr>

            <tr>

            <td style=”width: 48.0992%;”>3</td>

            <td style=”width: 48.0992%;”>4</td>

            </tr>

            </tbody>

        </table>

    Froala

    To insert a new table into Froala:
    1. Click the location where you want to insert a new table.
    2. Use one of these methods:
      1. From the quick insert buttons toolbar:
        1. Click on the table icon, automatically inserting a (2×2) table.
      2. From toolbar:
        1. Click on the “Table” icon under the “More Rich” menu.
        2. Choose the number of columns and rows.

    You can copy a table from an outer source and paste it on the editor.

    By clicking on a table, a pop-up menu will appear with the following options.
    • Table header
    Add/Remove top row to/from the table as a table header:
    • Remove table
    • Row options
      • Insert row above
      • Insert row below
      • Delete row
    • Column options
      • Insert column before
      • Insert column after
      • Delete column
    • Table style
    A predefined set of classes which can be applied to a table once a user selects any of them from a dropdown. By default, Froala comes with these styles:
    • Dashed borders
    • Alternate rows
    • Cell options
      • Merge cells
      • Vertical split
      • Horizontal split
    • Cell background color
    Select a color from the color palette or enter a custom Hex value.
    • Vertical align
      • Top
      • Middle
      • Bottom
    • Horizontal align
      • Left
      • Center
      • Right
      • Justify
    • Cell style
    A predefined set of classes which can be applied to a table cell once a user selects any of them from this dropdown. By default, Froala comes with these styles:
    • Highlighted
    • Thick
    Hover over the top border of the column which you want to precede the new column to reveal a quick insert column button. Click this button to add a new column. Similarly, hover over the left border of the row which you want to precede the new row to reveal a quick insert row button. Click this button to add a new row.

    Hold the left key of the mouse and move it over the cells you want to select.

    Images can be inserted inside a table cell.
    Tables can’t be dragged to a new position.
    When a table is inserted on the editor, it takes the editor’s full width, and column width is equally distributed according to the number of the columns of the table. Column width could be adjusted by holding the column border and dragging it until it reaches the width you want. Cell height is automatically adjusted according to the content of the cell, and the table row height is equal to the tallest cell in the row.
    To make it easy to separate tables their surrounding content, hover over the top or bottom of a table to reveal a break button. Click this button to add a line break. This option is only available when there is not already a line above or below the table.

        <table style=”width: 100%;”>

            <tbody>

                <tr>

                    <td style=”width: 50.0000%;”>1

                        <br>

                    </td>

                    <td style=”width: 50.0000%;”>2

                        <br>

                    </td>

                </tr>

                <tr>

                    <td style=”width: 50.0000%;”>3

                        <br>

                    </td>

                    <td style=”width: 50.0000%;”>4

                        <br>

                    </td>

                </tr>

            </tbody>

        </table>

    Summary:

    From the above we can conclude that Froala, TinyMCE, and CKEditor are the most advanced editors to handle tables. To make it easy to compare between them we list their features in a table below:

    Froala
    TinyMCE
    CKEditor
    Paste copied table from the web
    Change row height by holding and dragging
    Change row Width and height fields
    Change column width by holding and dragging
    Change Column Width and height fields
    Table header Set row as header
    Table header Insert a new row as a header
    Table header Set Column as header
    Table header Set Cell as a header
    Table footer
    Sort table
    Cell border options
    Ability to use custom CSS class on a table
    Ability to use custom CSS class on a table cell
    Drag table to a new position
    Insert paragraphs before and after table option
    Set cell background color
    Delete table using a button
    Table has a delete table button

    Froala or TinyMCE

    The above table shows that Froala and TinyMCE have a close competition on the best editor for handling tables.

    Froala is much better when it comes to user experience. It has a simple, clean, and elegant interface, putting all features in one place. This makes it easy for users to find the features they need.

     

    On the other hand, TinyMCE has a classic, old-fashioned design. It is full of features, but this could leave users, especially inexperienced ones, confused about what to change. On the other hand, Froala focuses on the most important features and enables using CSS classes to change table or cell styles. Using classes gives you full control of styling table and cells, makes the user interface better, and is better for SEO if you are Using Froala to create a webpage.

    Conclusion:

    If you are looking for the best editor for handling tables, Froala has all the options necessary to give you full control of your tables. They are all displayed in a modern pop-up with icons that best represent each feature, making it much easier to edit a table. If you are using another editor, it is easy to migrate to Froala. Our migration guide will help you migrate from any of the above editors in a few simple steps.