BASICS

ADMINISTRATION

DEVELOPMENT

SUPER ADMIN

  LAST UPDATED
4/8/2014

Adding Tables in the WYSIWYG Editor

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.

Table Edit Icons

Various table elements and attributes can be added and defined via the WYSIWYG both when adding a new table or after. This is accomplished with fields available by clicking the Insert/Edit Table icon.

Insert/Edit Table Icon

These include the number of columns and rows, table width and height, and a table border, for example. 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 dialog contains a few differences 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.

Inserting a Table

  • To insert a table, select the desired location, then click on the Insert/Edit Table icon.

A simple table can be created by just specifying the number of rows and columns for the table. For more information about the additional general and advanced properties, see:

Table: General Properties

Table: Advanced Properties

Table Formatting Tools

The table formatting tools are available after a table is inserted and when the cursor is within the table.

 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 & Insert Row After Icons

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

 Delete Row Icon

Delete Row: Deletes the row the cursor is in.

 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 column the cursor is in, and use the second icon to insert a column to the right of the column the cursor is in.

 Delete Column Icon

Delete Column: Deletes the column the cursor is in.

 Split Merge Table Cells Icon

Split Merged Table Cells: To split cells that have previously been merged, select the cell then click on 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 on 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 simply 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.

 

Next Page

 

Table: General Properties

The Insert/Edit Table dialog is displayed with several available fields on the General tab and Advanced tab that can be used for defining the table.

Example of General Properties (Available for both XHTML and HTML5 schema)


Insert/Edit Table General Tab

 

Comparison of General Properties with XHTML and HTML5 Schema

General Properties Window
Field XHTML/HTML 4.01 HTML5 Schema (HTML5 specification is still considered a work in progress)
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>

 

Previous PageNext Page

Table: Advanced Properties

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

Example of Advanced Properties for XHTML

Insert/Edit Table Advanced Tab

 

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

  • Summary
  • Frame
  • Rules

Example of Advanced Properties for HTML5

Insert/Edit Table > Advanced Properties Window

 

Advanced Properties Window
   XHTML/HTML 4.01 HTML5 (HTML5 specification is still considered a work in progress)
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;"

 

Example of Frame Attributes for XHTML/HTML Schema

Table > Advanced Properites > Rules

 

Example of Rules Attributes for XHTML/HTML Schema

Table > Advanced Properties > Frame 

 

Previous PageNext Page


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. Here is an example of CSS that creates a table centered on the page with centered text that has a gradient background and a box shadow.

/* Table Design */
.centered {
overflow:hidden;
border:1px solid #d3d3d3;
background:#DEDEDE;
width:100%;
margin:5% auto 0;
-moz-border-radius:5px; /* FF1+ */
-webkit-border-radius:5px; /* Saf3-4 */
border-radius:5px;
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
color:#000000;
}
.centered thead{
background: -moz-linear-gradient(100% 20% 90deg, #e8eaeb, #ededed);
background: -webkit-gradient(linear, 0% 0%, 0% 20%, from(#ededed), to(#e8eaeb));
padding:18px 28px 18px; text-align:center;
padding-top:22px; background:#e8eaeb;
}
.centered tr th {padding:20px; text-align:center; }
.centered tbody td{
background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);
background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe));
padding:18px 28px 18px; text-align:center;
}
.centered tbody tr:nth-child(even) td{
background: #DEDEDE; /* Old browsers */
background: -moz-linear-gradient(top,  #fefefe 0%, #dedede 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefefe), color-stop(100%,#dedede)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #fefefe 0%,#dedede 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #fefefe 0%,#dedede 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #fefefe 0%,#dedede 100%); /* IE10+ */
background: linear-gradient(top,  #fefefe 0%,#dedede 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#dedede',GradientType=0 ); /* IE6-9 */
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 -2px 0 rgba(0, 0, 0, 0.1) inset, 0 0 10px rgba(255, 255, 255, 0.5) inset, 0 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.2);
}
.centered tbody tr:nth-child(odd) td{
background: #f9fcf7; /* Old browsers */
background: -moz-linear-gradient(top,  #f9fcf7 0%, #f5f9f0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9fcf7), color-stop(100%,#f5f9f0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f9fcf7 0%,#f5f9f0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f9fcf7 0%,#f5f9f0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f9fcf7 0%,#f5f9f0 100%); /* IE10+ */
background: linear-gradient(top,  #f9fcf7 0%,#f5f9f0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9fcf7', endColorstr='#f5f9f0',GradientType=0 ); /* IE6-9 */
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 -2px 0 rgba(0, 0, 0, 0.1) inset, 0 0 10px rgba(255, 255, 255, 0.5) inset, 0 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.2);
}

2. Add the class in the styles.txt file. Typically,  _resources/ou/editor/styles.txt. For the class defined above, add:

.centered     TableNice

The space between the two words must be created by using the Tab key.

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, ff 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).

 

 

Previous Page

 


Was this page helpful?

Additional Comments:


(Include your email address if you would like a reply)

Procede to http://support.omniupdate.com/