Please see the new Sitecore Changes and Sitecore Login Process as of Saturday, June 6, 2020. Sitecore 9.3 Changes, Login Process, and FAQs

Insert and Edit a Table

Tables are used to present tabular data in a visual and meaningful way. The Table Wizard helps you create a table easily and with accessibility in mind when you follow these steps.

WARNING: Adding tables to your page can severely limit accessibility compliance and mobile viewing if not created and managed correctly. It is highly recommended that tables be used ONLY for tabular data and not for layout purposes.

    Insert a Table

    NOTE: If the page you are editing is Checked in and Unlocked, select the “Lock and Edit” link to check it out and edit the page.
    Lock and Edit Warning Message

    1. Select the pencil Rich Text Editor icon icon to launch the Rich Text Editor.
    2. Place your cursor in the area on the page you wish to insert a table.
    3. Select the tableTable iconicon drop-down and choose the “Table Wizard” option. The Table Wizard box will appear.
      Rich Text Editor - Table dropdown

    4. The Table Design tab will open by default. Here you can set how many columns and rows your table will have, the width and height of the table, and also cell spacing and padding among other things.
      Table Wizard - Design tab
      • Columns and Rows: Controls the number of table columns and rows when selecting the plus (+) or minus (-) icons. As you add or delete a column or cell, the table in the Preview window will change.
      • Height and Width: Sets the height and width of the table.
        • Select the percentage (%) sizing to allow the table to scale with the browser window as it resizes.
        • Set the width to 100 to span the full size of the screen area.
      • Cell Spacing and Padding: Sets each individual table cell's spacing an padding. The larger the number, the more spacing or padding will be added.
        • Cell Spacing: Sets spacing between the cell borders
        • Cell Padding: Sets spacing between the content and the border of the cell
        • Alignment: Positions the table either aligned left, centered, or right
        • Background Color: Adds a background color to the table (see accessibility guidelines to ensure compliance)
        • CSS Class: N/A - NOT RECOMMENDED
        • Back Image: Adds a background image to your table. NOT RECOMMENDED.
    5. Customize Table Properties tab. This is essentially the same as the table design tab, so can be skipped.
      Table Wizard - Properties tab

    6. Customize Cell Properties tab. This tab shows the Rich Text Editor's styling options.
      • Select the drop-down to view the options and see the styling on the table example in the preview window.
      • NOTE: It is not recommended selecting these options. Applying a style to tables may cause accessibility issues and will add extraneous code to your table, resulting in a longer download time.

        Table Wizard - Cell Properties tab

    7. Customize Accessibility tab. It is required to make tables accessible to screen readers. This tab provides an easy method to do that without the knowledge of HTML.
      Table Wizard - Accessibility tab

      • Headings: Add header columns and rows to associate related data to that item.  
        • Headers are displayed on the table as an identifier to the content in the associated cells. They are displayed in bold to show a differentiation to the associated data.
        • The table example below shows Row = 1 and Column = 1 as headers. It is suggested to have Row=1 and Column=0 to keep it simple (see image in step #9).

          Example of a table

      • Table Caption: Captions are visually shown above the table and are generally considered the title of the table. They align center by default, but can be changed to align left or right as well.
      • Table Summary: When creating a complex table, add a summary of what the table depicts for screen readers. This summary is not visually seen on the table by the user, but is read by screen readers and search engines from the HTML code.
      • Associate cells with headers: Connects the content in each cell with the appropriate header. Make sure this is checked.
    8. After you customize your table settings, the table will appear in the editor page and look something like this:

      Example of a table created

    9. As you enter in your header titles, you will see the header rows are bolded and center-aligned by default. This can be changed by highlighting the header and using the styling controls in the rich content editor.
    10. Enter in your content into the remainder data cells.
      • If you need to modify the table properties, right-click anywhere in the table anywhere to view options.
    11. Select the Accept button at the bottom right of the Rich Text Editor box.
    12. Save Save icon your changes.
    13. Select the Unlock Unlock icon icon to check in your page if you are done editing.

     

    Paste a Table from Excel or Word

    You can paste a complete table or a grouping of cells from Microsoft Word or Excel. Once pasted, Sitecore will convert these cells into the format of a table. Keep in mind it may need some modifications, like adding accessibility steps (see #7 above).

    1. Select and copy the table created in the Excel or Word application.
    2. Navigate and open the page you want to add the table to.
    3. Paste the table (Ctrl+V to paste and Cmd+V on a Mac).
    4. Clean up the table where needed.
      • The table and contents display the same as from the Word or Excel document, however, it may not be accessible and have extraneous styling code brought over to maintain the same visual look. (These styles now appear in the CSS drop down menu in the Rich Text Editor.) It will require some code cleanup to ensure the table is accessible and scalable for small screens.
      • To modify the table properties, right-click anywhere in the table anywhere to view options.
    5. Follow step #7 from the 'Create a Table' section for accessibility edits.
    6. Select the Accept button at the bottom right of the Rich Text Editor box.
    7. Save Save icon your changes.
    8. Select the Unlock Unlock icon icon to check in your page if you are done editing.

     

    Modify a Table

    You can insert and delete rows and columns and merge or split cells through a couple different ways:

    • Right-click in a table cell and the context menu with table editing options will appear. You can also access the Table Properties again from here.
      Table Wizard Properties Menu from Right-Click
    • Select the tableTable iconicon drop-down and select an option from the icons provided.
      Table Wizard Properties Menu

    TIP: Selecting the Tab key after the last table cell will automatically add another row.

    To align the cell contents a different way, select the cell and click on the alignment icons in the Rich Text Editor menu.

     

    Delete a Table

    1. Right-click the outside border or the table caption title to display the context menu.
    2. Select the Delete Table option.
      Delete Table