Adding Tables in the WYSIWYG Editor

Overview

The default toolbar of the WYSIWYG Editor includes the standard tools for editing tables such as the ability to insert, delete, and define rows and columns, as well as merge or split table cells.

Classic Editor

Table Edit Icons

JustEdit

 Tables in JustEdit

Various table elements and attributes can be added and defined both when adding a new table or after. These attributes include the number of columns and rows, table width and height, and a table border, for example. In Classic Editor, both a General tab and an Advanced tab are available for defining the table elements. If a Level 10 administrator has configured access settings to allow for source access, the Edit HTML Source icon can be used to view and edit the HTML source code for the table elements.

Additionally, the class selector can be used to assign a class to a table to define the styling for the table as has been defined within a CSS style sheet.

The Insert/Edit Table modal may vary slightly depending upon the schema in use for the WYSIWYG, which is an option that can be set by an administrator. For example, when HTML5 schema is selected for a site, certain invalid HTML attributes are removed. Additionally, the markup for HTML5 schema differs from previous HTML markup iterations as many elements and attributes have become changed, obsolete, or invalid. If HTML5 schema has not been enabled, the XHTML/HTML schema that is used by the WYSIWYG Editor does not delete the HTML5 elements, such as section and article, but there is not an easy way for users to add these elements to the page without going into the source code or using a snippet or asset. The XHTML schema also allows for attributes that have been identified as invalid in HTML5 but not in XHTML. When the HTML5 schema is enabled, invalid attributes are removed.

This page contains the following sections:

Inserting a Table in the Classic Editor

  1. Select the Insert/Edit Table icon and fill out the fields in the Insert/Edit Table modal.
    Insert Table Modal
  2. Once the form is on the page, begin typing in the fields.
  3. You can also edit the form by either right-clicking in the table and selecting an option from the menu that appears, or by left-clicking in the table and selecting an option from the WYSIWYG menu. 
    Editing a TableThe table formatting tools are available after a table is inserted and when the cursor is within the table.
Icon Description

Table Row Properties Icon

Table Row Properties: Defines the row properties such as alignment, height, and background color. The drop-down can then be used to apply the updates to the current row, all odd rows, all even rows, or all rows.


Table Cell Properties Icon

Table Cell Properties: Defines the cell properties such as alignment, width, height, and background color. The drop-down can then be used to apply the updates to the current row, all odd rows, all even rows, or all rows.

 Insert Row Before Icon
Insert Row After Icon

Insert Row Before and Insert Row After: Use the first icon to insert a row above the clicked row, and use the second icon to insert a row below the clicked row.

 
Delete Row Icon

Delete Row: Deletes the clicked row.

 Insert Column Before

Insert Column After

Insert Column Before and Insert Column After: Use the first icon to insert a column to the left of the clicked column, and use the second icon to insert a column to the right of the clicked column.

 
Delete Column Icon

Delete Column: Deletes the clicked column.

 Split Merge Table Cells Icon

Split Merged Table Cells: To split cells that have previously been merged, select the cell, then click the Split Merged Table Cells icon.

If within a merged cell (contains a colspan and/or rowspan), this will remove the colspan and/or rowspan attributes to result in individual cells matching the table’s non-merged configuration.

 Merge Table Cells Icon

Merge Table Cells: To merge cells, highlight the cells to be merged, then click the Merge Table Cells button.

Merges the selected table cells into one cell by adding the necessary colspan and/or rowspan attributes. It is also possibly to place the cursor in the upper, left most cell, and then click the Merge Table Cells icon. A prompt will appear in which the desired number of columns and/or rows to be merged needs to be entered.

When merging cells, all of the content currently within the cells remains.

General Properties (Classic Editor)

Insert Table Modal

Field XHTML/HTML 4.01 HTML5 Schema
Columns: Defines the number of columns for the table Adds the corresponding number of <td></td> elements. Adds the corresponding number of <td></td> elements.
Rows: Defines the number of rows for the table Adds the corresponding number of <tr></tr> elements. Adds the corresponding number of <tr></tr> elements.
Cell Padding: Defines padding within the cell between the border and the text cellpadding="8" Obsolete attribute on table. CSS should be used instead. For example: td { padding:5px; }
Cell Spacing: Defines spacing between cells cellspacing="5" Obsolete attribute on table. CSS should be used instead. For example: border-spacing.

Border: Defines the thickness of cell border

 

border="5"

Can be written as an attribute only with a value of 0 or 1. When defined with other border attributes written with inline CSS; e.g., <table style="border: 12px solid #f15b0d;" border="12">

WHATWG suggest border-width can be used instead.

Width: Defines the width of table, defaults to pixels, but percent can also be used style="width: 220px; background-color: #ee4510;"  <table style="width: 220px;">
Height: Defines the height of the table, defaults to pixels, but percent can also be used style="height: 500px; background-color: #ee4510;"  <table style="height: 220px;">
Class: Defines a class to be applied to the table; a class that has been added to the styles menu can be selected from the drop-down, or value can be selected and a class can be entered manually, and if the class has been defined in the CSS that is being called the styling will be applied. <table class="green">  <table class="green">
Table Caption: Adds the caption element above the table

<table><caption>TABLE CAPTION</caption>
<tbody>
<tr>
<td>cell data</td>
<td>cell data</td>
</tr>
<tr>
<td>cell data</td>
<td>cell data</td>
</tr>
</tbody>
</table>

<table><caption>TABLE CAPTION</caption>
<tbody>
<tr>
<td>cell data</td>
<td>cell data</td>
</tr>
<tr>
<td>cell data</td>
<td>cell data</td>
</tr>
</tbody>
</table>

Advanced Tab (Classic Editor)

The Advanced tab includes the Advanced Properties, which includes fields based on the schema employed.

Insert/Edit Table Advanced Tab

As shown below, Advanced Properties for HTML5 do not include:

  • Summary
  • Frame
  • Rules

Insert/Edit Table > Advanced Properties Window

Field XHTML/HTML 4.01 HTML5 Schema
ID: Adds the id attribute to the <table> start tag with the value defined in the field <table id="t-id-21"> "The id global attribute is now allowed to have any value, as long as it is unique, is not the empty string, and does not contain space characters." For example, <table id="t-id-21">
Summary: Adds the summary attribute to the <table> start tag with the value defined in the field summary="added value" Obsolete attribute on table.
Style Displays inline CSS written with the style attribute as defined by other fields. Displays inline CSS written with the style attribute as defined by other fields. For example, when border, border color, and background color are defined: border-color: #5ca366; border-width: 1px; background-color: #828e71;
Language Code

<table lang="sl">

This attribute specifies the base language of an element’s attribute values and text content. RFC1766 defines and explains the language codes that must be used in HTML documents.

Specifies the primary language for the element's contents and for any of the element's attributes that contain text. Its value must be a valid BCP 47 language tag, or the empty string.

The lang attribute in the XML namespace is defined in XML.

Background Image background-image: url('/images/purple.png'); background-image: url('/images/purple.png');
Frame

Could be used to identify which parts of a  border around a table are shown. For example, selecting lhs in the Frame drop-down identifies that the left-hand side of the table border is visible:

frame="lhs"
Obsolete attribute on table. CSS can be used instead; for example: border-color:black and border-style.
Rules

Could previously be used to identify the borders of a table cell to be shown, similarly to frame. For example,

rules="rows";

provides cell border style with the appearance of horizontal rules.

Obsolete attribute on table. CSS can be used: border-color:black and border-style on the table's appropriate elements
Language Direction

For purposes of internationalization, language direction can be specified as right-to-left or left-to-right with the dir attribute:

dir="rtl"

 
<table id="id" style="border-width: 10px; border-color: #f0f40a; background-color: #6e918c;" summary="summary" border="10" cellspacing="5" cellpadding="125">
<caption>&nbsp;</caption>
Border Color: Launches the color picker to define the table border Defined by a style attribute; e.g., border-color: #f0f40a). Written as inline CSS: style="border-color: #6e918c;"
Background Color: Launches the color picker to define the table background, In this schema, background color is not added as bgcolor, but rather as defined by a style attribute: e.g., style="background-color: #6e918c;"  Obsolete as an attribute (bgcolor). Written as inline CSS: style="background-color: #6e918c;"

Inserting a Table in JustEdit

    1. When editing a page, select the Insert/EditTable icon from the toolbar. 
    2. Select "Insert Table" from the drop-down and drag your cursor over the grid to choose the size of your table. Select the grid to insert your table.
      Insert Table
    3. Once your table is on the page, you can edit it either from the Insert/Edit Table icon on the toolbar, or from the menu that appears when you right-click the table. 
      Edit Table Menu
    4. The Cell, Row, and Column menus contain various options:
      • Cell: Cell Properties, Merge Cells, and Split Cells
      • Row: Insert Row Before, Insert Row After, Delete Row, Row Properties, Cut Row, Copy Row, Paste Row Before, and Paste Row After
      • Column: Insert Column Before, Insert Column After, Delete Column

The properties options for cells, rows, and columns contain similar options to the table properties below. 

Table Properties

The Table Properties available in JustEdit are similar to those in Classic, just more streamlined. 

General Properties

General Properties

Field Purpose
Width Used to scale the width of the table, defined in percentage (e.g. use 50% to reduce the width of the table by half)
Height Used to scale the height of the table, defined in percentage (e.g. use 50% to reduce the height of the table by half)
Cell Spacing Defines spacing between cells
Cell Padding Defines padding within the cell between the border and the text
Border Defines the thickness of cell border
Caption Adds a caption field above the table
Alignment Aligns the page on the table; options are Left, Center, and Right
Class Applies CSS from the Styles drop-down to the table

Advanced Properties

Advanced Tab in JustEdit

Field Purpose
Style

Is populated by what you enter in the Border Color and Background Color Fields, and styles the table accordingly.

Be aware that if you have existing CSS styling your tables, it may overwrite what you define in this tab. 

Border Color Enter a hex code (e.g. #000EEE) to color the borders of your table
Background Color Enter a hex code (e.g. #000EEE) to color the background of your table

Applying a Class to a Table

Any number of tables can be defined in CSS as a class. When inserting a table in the WYSIWYG, the class can be selected or entered from the Class drop-down. The class needs to be added to the Styles drop-down file in order for it to be listed on the Class drop-down on the Insert/Edit Table dialog. A class that has been defined in CSS, but not added to the Styles drop-down, can be entered manually by clicking value and typing the name of the class. If a user has source code access, the class and its value can be added in a source view.

Applying a Class to a Table

  1. Define the class in the CSS file. The location for the file is dependent upon the implementation; for example, _resources/css/main.css. Download the ZIP file below for an example of CSS that creates a table centered on the page with centered text that has a gradient background and a box shadow:

    Download Centered Table CSS (ZIP)
  2. Add the class in the styles.txt file. Typically,  _resources/ou/editor/styles.txt. For the class defined above, add: .centered     TableNiceThe space between the two words must be created by using the Tab key.

    For more information, visit the Customizing the Styles Drop-Down page.
  3. Click the Insert/Edit Table icon on the WYSIWYG Toolbar.
  4. From the Class drop-down, select TableNice (the friendly name that was added to label the class).

Alternatively, if the class was defined, but not added to the Styles drop-down, from the Class drop-down, click (value) and enter the name of the class (without the period).