How to Create Accessible Tables in the Text Editor

Provide context to relationships between data or information.

Summary

Menu icon in the text editor toolbar used to insert a table.

Tables organize data with a logical relationship in grids. This tutorial covers tables that can be created anywhere the Text Editor is available. 
Note: For full-page table help, see the Data Table content type.

Audience

All users. Learn more about Platform User Roles and Permissions.

How To

  • 1

    Simplify your Message

    • Keep it Simple -  Tables can be simple or complex. Complex tables are more work for you and hard for users to understand. Look for opportunities to simplify complex tables by separating information into smaller, individual tables. Remember your audience and write for your users.
    • Create, Don't Copy - Create the table fresh in Digital Commons. Do not copy it from another website or application and paste it into the text editor. Pasting often brings along additional, unwanted code that can cause issues.
    • Mark Headers for Accessibility - Sighted users can grasp the relationship between columns and rows visually. Assistive technologies look for specific HTML tags to communicate both the data and their relationship context to users with low or no vision.
    • Separate Data into Cells - Make sure that each separate piece of data has its own cell. Putting all data into one column makes it difficult to discern relationships.
    • Alignment - Align text to the left and numeric data to the right.
    • Consider Colors Carefully - Do not rely on color alone to convey information. Always ensure proper contrast.
    • Not for Layout - Do not use tables for controlling layout for content. Use tables to compare and contrast data or information. Example: A table can help users compare satellite imagery taken before and after a hurricane because there is a direct relationship between the content. A table should not be used to layout an image gallery for a collection of photos because there is no relationship to evaluate.

    More table tips from the Web Accessibility Initiative

     

    Red Flag Accessibility Warnings

    The red flag warning that appears when the accessibility finds a critical error.

    EditoriA11y marks these issues with a red flag. You must fix these errors for your table to be accessible.  

    • Table Has no Header Cells
    • Empty Table Header Cells
  • 2

    Create a Simple Table with a Header Row in the Text Editor

    1. Select the Insert Table icon.
    2. Highlight and select the desired number of rows and columns, up to 10 x 10. More can be added later, if needed.
    3. Select the top row of the table.
    4. The table properties menu appears. Select the second icon for Row options.
    5. Toggle the switch for Header Row.
    6. Enter content into every cell of the header row.
    7. Enter content into remaining cells to complete the table. 

    Example

    MondayTuesdayWednesdayThursdayFriday
    Turkey sandwich on whole grain bread with baked potato chipsLasagna with beef and a side of green beansCheese quesadilla with black beansBarbecue pork with coleslawVegetable soup with saltines
  • 3

    Create a Simple Table with a Header Column in the Text Editor

    1. Select the Insert Table icon.
    2. Highlight and select the desired number of rows and columns, up to 10 x 10. More can be added later, if needed.
    3. Select the left column of the table.
    4. The table properties menu appears. Select the first icon for Column options.
    5. Toggle the switch for Header Column.
    6. Enter content into every cell of the header column.
    7. Enter content into remaining cells to complete the table. 

    Example

    MondayTurkey sandwich on whole grain bread with baked potato chips
    TuesdayLasagna with beef and a side of green beans
    WednesdayCheese quesadilla with black beans
    ThursdayBarbecue pork with coleslaw
    FridayVegetable soup with saltines
  • 4

    Create a Complex Table with Two Headers

    1. Select the Insert Table icon.
    2. Highlight and select the desired number of rows and columns, up to 10 x 10. More can be added later, if needed.
    3. Select the top row of the table.
    4. The table properties menu appears. Select the second icon for Row options.
    5. Toggle the switch for Header Row.
    6. Enter content into every cell of the header row.
    7. Select the left column of the table.
    8. The table properties menu appears. Select the first icon for Column options.
    9. Toggle the switch for Header Column.
    10. Enter content into every cell of the header column.
    11. Enter content into remaining cells to complete the table.

    Note: A table that has both a header row and a header column typically does not have content in the first cell. At this time, EditoriA11y flags this as the error Empty Table Header Cells and there is currently no way in the CK Editor to exclude that cell. The work around is to enter meaningful text into the first cell. 

    Example

    Shifts by DayMondayTuesdayWednesdayThursdayFriday
    MorningRonDonnaLeslieJerryTom
    AfternoonAndyAprilBenAnneChris
  • 5

    Create a Complex Table with Irregular Headers

    This table is more complex. It has two header rows and one header column. Cells are merged to create header cells that span multiple columns and rows.

    Note: A table that has both a header row and a header column typically does not have content in the first cell. At this time, EditoriA11y flags this as the error Empty Table Header Cells and there is currently no way in the CK Editor to exclude that cell. The work around is to enter meaningful text into the first cell. 

    Example

    NC Groundwater Standard2008-20092018-2019
    Total SamplesSamples Exceeding StandardTotal SamplesSamples Exceeding Standard
    Arsenic, 10 ppb39357910289223
    Barium, 700 ppb319701028011
    Cadmium, 2 ppb319701028113
    Accordion
    Tab/Accordion Items

    1. Select the Insert Table icon.
    2. Highlight and select the desired number of rows and columns, up to 10 x 10. More can be added later, if needed.
    3. Select the top row of the table.
    4. The table properties menu appears. Select the second icon for Row options.
    5. Toggle the switch for Header Row.
    6. Select the second row of the table.
    7. The table properties menu appears. Select the second icon for Row options.
    8. Toggle the switch for Header Row.
    9. Select the first column of the table.
    10. The table properties menu appears. Select the first icon for Column options.
    11. Enter content into every cell of the header row.
    12. Toggle the switch for Header Column.
    13. Enter content into every cell of the header column.
    14. Enter content into remaining cells to complete the table.

    In the example table above, there are three merged cells: NC Groundwater Standard, 2008-2009, and 2018-2019.

    Merge Horizontally

    1. Select a cell to be merged with its neighbor.
    2. The table properties menu appears. Select the third icon for Merge Cells.
    3. Select either Merge Cell Left or Merge Cell Right.

    Merge Vertically

    1. Select a cell to be merged with its neighbor.
    2. The table properties menu appears. Select the third icon for Merge Cells.
    3. Select either Merge Cell Up or Merge Cell Down.

    Remove Merge

    1. To un-merge, select the desired cell.
    2. The table properties menu appears. Select the third icon for Merge Cells.
    3. Select either Split Cell Vertically or Split Cell Horizontally.

    Second Sidebar
    February 25, 2026

    Complex Tables in the Text Editor

    This video walks through the process of duplicating the complex table with irregular headings and merged cells shown in the example above.