You must log in to edit PetroWiki. Help with editing

Content of PetroWiki is intended for personal use only and to supplement, not replace, engineering judgment. SPE disclaims any and all liability for your use of such content. More information


Help:RichText editor - Table and insert horizonal line: Difference between revisions

PetroWiki
Jump to navigation Jump to search
(Created page with "A table is a perfect format for some types of data, including statistical information. CKEditor not only lets you add and edit this document element in a quick and easy way bu...")
 
No edit summary
Line 3: Line 3:
== <span class="mw-headline" id="Creating_a_Table" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-size: 20px; vertical-align: baseline;">Creating a Table</span> ==
== <span class="mw-headline" id="Creating_a_Table" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-size: 20px; vertical-align: baseline;">Creating a Table</span> ==


To create a table in CKEditor, press the&nbsp;&nbsp;button on the toolbar. The&nbsp;'''Table Properties'''&nbsp;dialog window that will open lets you set configuration options that define table size, its display properties, or other advanced properties.
To create a table, press the&nbsp;[[File:ETB TableandLine 001.PNG|middle|60x30px|ETB TableandLine 001.PNG]]&nbsp;button on the toolbar. The&nbsp;'''Table Properties'''&nbsp;dialog window that will open lets you set configuration options that define table size, its display properties, or other advanced properties.


The&nbsp;'''Table Properties'''&nbsp;dialog window includes two tabs that group table options:
The&nbsp;'''Table Properties'''&nbsp;dialog window includes two tabs that group table options:
<span style="line-height: 1.6;">For general information on using dialog windows please refer to the&nbsp;</span>[[Help:Dialog_windows|Dialog Windows]]<span style="line-height: 1.6;">&nbsp;section of the User's Guide.</span>
<span class="mw-headline" id="Table_Properties" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-size: 16px; vertical-align: baseline;">Table Properties</span>
The&nbsp;'''Table Properties'''&nbsp;tab is the default tab that opens after you press the&nbsp;[[File:ETB Table.png]]&nbsp;button on the toolbar. It allows you to set the table dimensions and configure the way it will appear in the document.
[[File:ETB table properties.png|RTENOTITLE]]
=== '''Advanced''' ===
The&nbsp;'''Advanced tab''' lets you configure additional image options such as assign it an ID, a class, a language direction, or CSS style properties. It is meant for advanced users with knowledge of HTML as well as CSS, and gives nearly endless possibilities as far as the presentation of the table is concerned.
[[File:ETB table advanced.png|RTENOTITLE]]
Below is an overview of all&nbsp;'''Advanced'''&nbsp;tab elements:
<ul style="margin: 0.3em 0px 0px 1.6em; padding-right: 0px; padding-left: 0px; border: 0px; font-family: Arial, Helvetica, sans-serif; font-stretch: inherit; line-height: 21px; font-size: 14px; vertical-align: baseline; list-style-type: inherit; color: rgb(87, 87, 87);">
<li>'''Id'''&nbsp;– a unique identifier for a table element in the document (<code style="margin: 0px; padding: 0px; border: 0px; font-family: Inconsolata, Consolas, 'Deja Vu Sans Mono', 'Droid Sans Mono', Courier, monospace; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-size: 1em; vertical-align: baseline;">id</code>&nbsp;attribute).</li>
<li>'''Language Direction'''&nbsp;– the direction of the text in the table: left to right (LTR) or right to left (RTL) (<code style="margin: 0px; padding: 0px; border: 0px; font-family: Inconsolata, Consolas, 'Deja Vu Sans Mono', 'Droid Sans Mono', Courier, monospace; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-size: 1em; vertical-align: baseline;">dir</code>&nbsp;attribute).</li>
<li>'''Stylesheet Classes'''&nbsp;– the class of the table element (<code style="margin: 0px; padding: 0px; border: 0px; font-family: Inconsolata, Consolas, 'Deja Vu Sans Mono', 'Droid Sans Mono', Courier, monospace; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-size: 1em; vertical-align: baseline;">class</code>&nbsp;attribute). Note that a table element might be assigned more than one class. If this is a case, separate class names with spaces.</li>
<li>'''Style'''&nbsp;– CSS style definitions (<code style="margin: 0px; padding: 0px; border: 0px; font-family: Inconsolata, Consolas, 'Deja Vu Sans Mono', 'Droid Sans Mono', Courier, monospace; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-size: 1em; vertical-align: baseline;">style</code>&nbsp;attribute). Note that each value must end with a semi-colon and individual properties should be separated with spaces.</li>
</ul>
== <span class="mw-headline" id="Working_With_Tables" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-size: 20px; vertical-align: baseline;">Working With Tables</span> ==
Once inserted into the document, the table can be modified. To edit the table, either double-click it, or open the table context menu by clicking it with the right mouse button or using the&nbsp;''Menu/Application''&nbsp;key on your keyboard.
[[File:ETB table contextmenu.png|RTENOTITLE]]
To delete the whole table and its contents, use the&nbsp;'''Delete Table'''&nbsp;option.
When you choose the&nbsp;'''Table Properties'''&nbsp;option, the dialog window of the same name will appear. It allows you to change the configuration options that were set when the table was created, except the number of rows and columns which are grayed out.
Additionally the table context menu lets you modify the rows, columns or particular table cells. This method makes it possible to insert new rows, columns or cells in specified locations as well as merge and split cells.
=== <span class="mw-headline" id="Editing_Table_Rows" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-size: 16px; vertical-align: baseline;">Editing Table Rows</span> ===
The table context menu lets you edit table rows. If you hover your mouse over the&nbsp;'''Row'''&nbsp;menu option, further options become available.
[[File:ETB table row contextmenu.png|RTENOTITLE]]
Below is an overview of all&nbsp;'''Row'''&nbsp;context menu option elements:
<ul style="margin: 0.3em 0px 0px 1.6em; padding-right: 0px; padding-left: 0px; border: 0px; font-family: Arial, Helvetica, sans-serif; font-stretch: inherit; line-height: 21px; font-size: 14px; vertical-align: baseline; list-style-type: inherit; color: rgb(87, 87, 87);">
<li>'''Insert Row Before'''&nbsp;– inserts a new row before the one that contains the cursor.</li>
<li>'''Insert Row After'''&nbsp;– inserts a new row after the one that contains the cursor.</li>
<li>'''Delete Rows'''&nbsp;– deletes a row that contains the cursor.</li>
</ul>
Note that CKEditor makes it possible to select multiple table cells by dragging the mouse over them, so an operation like deletion may be applied to many table rows at once.
=== <span class="mw-headline" id="Editing_Table_Columns" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-size: 16px; vertical-align: baseline;">Editing Table Columns</span> ===
The table context menu lets you edit table columns. If you hover your mouse over the&nbsp;'''Column'''&nbsp;menu option, further options become available.
[[File:ETB table column contextmenu.png|RTENOTITLE]]
Below is an overview of all&nbsp;'''Column'''&nbsp;context menu option elements:
<ul style="margin: 0.3em 0px 0px 1.6em; padding-right: 0px; padding-left: 0px; border: 0px; font-family: Arial, Helvetica, sans-serif; font-stretch: inherit; line-height: 21px; font-size: 14px; vertical-align: baseline; list-style-type: inherit; color: rgb(87, 87, 87);">
<ul style="margin: 0.3em 0px 0px 1.6em; padding-right: 0px; padding-left: 0px; border: 0px; font-family: Arial, Helvetica, sans-serif; font-stretch: inherit; line-height: 21px; font-size: 14px; vertical-align: baseline; list-style-type: inherit; color: rgb(87, 87, 87);">
<li>[http://docs.cksource.com/CKEditor_3.x/Users_Guide/Rich_Text/Tables#Table_Properties Table Properties]</li>
<li>'''Insert Column Before'''&nbsp;– inserts a new column before the one that contains the cursor.</li>
<li>[http://docs.cksource.com/CKEditor_3.x/Users_Guide/Rich_Text/Tables#Advanced Advanced]</li>
<li>'''Insert Column After'''&nbsp;– inserts a new column after the one that contains the cursor.</li>
<li>'''Delete Columns'''&nbsp;– deletes a column that contains the cursor.</li>
</ul>
</ul>


For general information on using dialog windows please refer to the&nbsp;[http://docs.cksource.com/CKEditor_3.x/Users_Guide/Interface/Dialog_Windows Dialog Windows]&nbsp;section of the User's Guide.
Note that CKEditor makes it possible to select multiple table cells by dragging the mouse over them, so an operation like deletion may be applied to many table columns at once.
 
=== <span class="mw-headline" id="Editing_Table_Cells" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-size: 16px; vertical-align: baseline;">Editing Table Cells</span> ===
 
The table context menu lets you edit table cells. If you hover your mouse over the&nbsp;'''Cell'''&nbsp;menu option, further options become available.
 
[[File:ETB table cell contextmenu.png|RTENOTITLE]]
 
Below is an overview of all&nbsp;'''Cell'''&nbsp;context menu option elements:
<ul style="margin: 0.3em 0px 0px 1.6em; padding-right: 0px; padding-left: 0px; border: 0px; font-family: Arial, Helvetica, sans-serif; font-stretch: inherit; line-height: 21px; font-size: 14px; vertical-align: baseline; list-style-type: inherit; color: rgb(87, 87, 87);">
<li>'''Insert Cell Before'''&nbsp;– inserts a new cell before the one that contains the cursor.</li>
<li>'''Insert Cell After'''&nbsp;– inserts a new cell after the one that contains the cursor.</li>
<li>'''Delete Cells'''&nbsp;– deletes a cell that contains the cursor.</li>
</ul>
<ul style="margin: 0.3em 0px 0px 1.6em; padding-right: 0px; padding-left: 0px; border: 0px; font-family: Arial, Helvetica, sans-serif; font-stretch: inherit; line-height: 21px; font-size: 14px; vertical-align: baseline; list-style-type: inherit; color: rgb(87, 87, 87);">
<li>'''Merge Cells'''&nbsp;– merges multiple cells in one. This option is only available if two or more cells are selected.</li>
<li>'''Merge Right'''&nbsp;– merges the selected cell with a cell on its right. The content of both cells becomes joined. This option is only available if no more than one cell is selected.</li>
<li>'''Merge Down'''&nbsp;– merges the selected cell with a cell located on its bottom. The content of both cells becomes joined. This option is only available if no more than one cell is selected.</li>
</ul>
<ul style="margin: 0.3em 0px 0px 1.6em; padding-right: 0px; padding-left: 0px; border: 0px; font-family: Arial, Helvetica, sans-serif; font-stretch: inherit; line-height: 21px; font-size: 14px; vertical-align: baseline; list-style-type: inherit; color: rgb(87, 87, 87);">
<li>'''Split Cell Horizontally'''&nbsp;– splits the selected cell in two, creating a new cell on its right. The content of the cell appears in the original, left cell. This option is only available if no more than one cell is selected.</li>
<li>'''Split Cell Vertically'''&nbsp;– splits the selected cell in two, creating a new cell on its bottom. The content of the cell appears in the original, upper cell. This option is only available if no more than one cell is selected.</li>
<li>'''Cell Properties'''&nbsp;– opens the&nbsp;'''[[Tables#Cell_Properties|Cell Properties]]'''&nbsp;dialog window that lets you configure cell size, type, color, and content alignment.</li>
</ul>
 
Note that CKEditor makes it possible to select multiple table cells by dragging the mouse over them, so an operation like deletion or merging may be applied to many table rows at once.
 
==== <span class="mw-headline" id="Cell_Properties" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-size: 18px; vertical-align: baseline;">Cell Properties</span> ====
 
Table cells in CKEditor can be further customized, creating a unique look and feel. Various configuration options can be set in the&nbsp;'''Cell Properties'''dialog window that is opened from the table cell context menu.
 
[[File:ETB table cell properties.png|RTENOTITLE]]
 
Below is an overview of all&nbsp;'''Cell Properties'''&nbsp;dialog window elements:
<ul style="margin: 0.3em 0px 0px 1.6em; padding-right: 0px; padding-left: 0px; border: 0px; font-family: Arial, Helvetica, sans-serif; font-stretch: inherit; line-height: 21px; font-size: 14px; vertical-align: baseline; list-style-type: inherit; color: rgb(87, 87, 87);">
<li>'''Width'''&nbsp;– the width of the cell in pixels or a percent value. Giving the width as a percent value lets you set the proportion of the row that the cell (and the column it is located in) will occupy.</li>
<li>'''Height'''&nbsp;– the height of the cell in pixels.</li>
</ul>
<ul style="margin: 0.3em 0px 0px 1.6em; padding-right: 0px; padding-left: 0px; border: 0px; font-family: Arial, Helvetica, sans-serif; font-stretch: inherit; line-height: 21px; font-size: 14px; vertical-align: baseline; list-style-type: inherit; color: rgb(87, 87, 87);">
<li>'''Cell Type'''&nbsp;– the type of the table cell — either a normal data cell or a header cell with special formatting.</li>
</ul>
<ul style="margin: 0.3em 0px 0px 1.6em; padding-right: 0px; padding-left: 0px; border: 0px; font-family: Arial, Helvetica, sans-serif; font-stretch: inherit; line-height: 21px; font-size: 14px; vertical-align: baseline; list-style-type: inherit; color: rgb(87, 87, 87);">
<li>'''Word Wrap'''&nbsp;– this setting turns word wrapping of the cell content on and off.</li>
</ul>
<ul style="margin: 0.3em 0px 0px 1.6em; padding-right: 0px; padding-left: 0px; border: 0px; font-family: Arial, Helvetica, sans-serif; font-stretch: inherit; line-height: 21px; font-size: 14px; vertical-align: baseline; list-style-type: inherit; color: rgb(87, 87, 87);">
<li>'''Rows Span'''&nbsp;– this setting stretches the cell downward over several rows. Entering a numeric value sets the&nbsp;<code style="margin: 0px; padding: 0px; border: 0px; font-family: Inconsolata, Consolas, 'Deja Vu Sans Mono', 'Droid Sans Mono', Courier, monospace; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-size: 1em; vertical-align: baseline;">rowspan</code>&nbsp;attribute.</li>
<li>'''Columns Span'''&nbsp;– this setting stretches the cell to the right over several columns. Entering a numeric value sets the&nbsp;<code style="margin: 0px; padding: 0px; border: 0px; font-family: Inconsolata, Consolas, 'Deja Vu Sans Mono', 'Droid Sans Mono', Courier, monospace; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-size: 1em; vertical-align: baseline;">colspan</code>&nbsp;attribute.</li>
</ul>
<ul style="margin: 0.3em 0px 0px 1.6em; padding-right: 0px; padding-left: 0px; border: 0px; font-family: Arial, Helvetica, sans-serif; font-stretch: inherit; line-height: 21px; font-size: 14px; vertical-align: baseline; list-style-type: inherit; color: rgb(87, 87, 87);">
<li>'''Horizontal Alignment'''&nbsp;– the horizontal alignment of table cell contents. The following options are available:&nbsp;'''Left''',&nbsp;'''Center''',&nbsp;'''Right'''.</li>
<li>'''Vertical Alignment'''&nbsp;– the vertical alignment of table cell contents. The following options are available:&nbsp;'''Top''',&nbsp;'''Middle''',&nbsp;'''Bottom'''&nbsp;or&nbsp;'''Baseline'''.</li>
</ul>
<ul style="margin: 0.3em 0px 0px 1.6em; padding-right: 0px; padding-left: 0px; border: 0px; font-family: Arial, Helvetica, sans-serif; font-stretch: inherit; line-height: 21px; font-size: 14px; vertical-align: baseline; list-style-type: inherit; color: rgb(87, 87, 87);">
<li>'''Background Color'''&nbsp;– the color of the cell background. You can use either of the following methods to set the color:<ul style="margin: 0.3em 0px 0px 1.6em; padding-right: 0px; padding-left: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; vertical-align: baseline; list-style-type: inherit;">
<li>Enter the&nbsp;[http://en.wikipedia.org/wiki/RGB_color_model RGB]&nbsp;value in the text box, in the&nbsp;<code style="margin: 0px; padding: 0px; border: 0px; font-family: Inconsolata, Consolas, 'Deja Vu Sans Mono', 'Droid Sans Mono', Courier, monospace; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-size: 1em; vertical-align: baseline;">rgb(''nn'',&nbsp;''nn'',&nbsp;''nn'')</code>&nbsp;format, where&nbsp;<code style="margin: 0px; padding: 0px; border: 0px; font-family: Inconsolata, Consolas, 'Deja Vu Sans Mono', 'Droid Sans Mono', Courier, monospace; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-size: 1em; vertical-align: baseline;">''nn''</code>&nbsp;is a numeric value on a scale from 0 to 255 representing the red, green, and blue channel.</li>
<li>Enter the hexadecimal RGB value in the text box, in the&nbsp;<code style="margin: 0px; padding: 0px; border: 0px; font-family: Inconsolata, Consolas, 'Deja Vu Sans Mono', 'Droid Sans Mono', Courier, monospace; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-size: 1em; vertical-align: baseline;">#''nnnnnn''</code>&nbsp;format, where the&nbsp;<code style="margin: 0px; padding: 0px; border: 0px; font-family: Inconsolata, Consolas, 'Deja Vu Sans Mono', 'Droid Sans Mono', Courier, monospace; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-size: 1em; vertical-align: baseline;">''n''</code>&nbsp;letters stand for the three pairs of hex color values representing the red, green, and blue channel.</li>
<li>Use the&nbsp;'''Choose'''&nbsp;button to open the&nbsp;'''Select color'''&nbsp;dialog window and pick the color with your mouse.</li>
</ul></li>
<li>'''Border Color'''&nbsp;– the color of the cell border. You can use either of the following methods to set the color:<ul style="margin: 0.3em 0px 0px 1.6em; padding-right: 0px; padding-left: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; vertical-align: baseline; list-style-type: inherit;">
<li>Enter the RGB value in the text box, in the&nbsp;<code style="margin: 0px; padding: 0px; border: 0px; font-family: Inconsolata, Consolas, 'Deja Vu Sans Mono', 'Droid Sans Mono', Courier, monospace; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-size: 1em; vertical-align: baseline;">rgb(''nn'',&nbsp;''nn'',&nbsp;''nn'')</code>&nbsp;format, where&nbsp;<code style="margin: 0px; padding: 0px; border: 0px; font-family: Inconsolata, Consolas, 'Deja Vu Sans Mono', 'Droid Sans Mono', Courier, monospace; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-size: 1em; vertical-align: baseline;">''nn''</code>&nbsp;is a numeric value on a scale from 0 to 255 representing the red, green, and blue channel.</li>
<li>Enter the hexadecimal RGB value in the text box, in the&nbsp;<code style="margin: 0px; padding: 0px; border: 0px; font-family: Inconsolata, Consolas, 'Deja Vu Sans Mono', 'Droid Sans Mono', Courier, monospace; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-size: 1em; vertical-align: baseline;">#''nnnnnn''</code>&nbsp;format, where the&nbsp;<code style="margin: 0px; padding: 0px; border: 0px; font-family: Inconsolata, Consolas, 'Deja Vu Sans Mono', 'Droid Sans Mono', Courier, monospace; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-size: 1em; vertical-align: baseline;">''n''</code>&nbsp;letters stand for the three pairs of hex color values representing the red, green, and blue channel.</li>
<li>Use the&nbsp;'''Choose'''&nbsp;button to open the&nbsp;'''Select color'''&nbsp;dialog window and pick the color with your mouse.</li>
</ul></li>
</ul>


=== <span class="mw-headline" id="Table_Properties" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-size: 16px; vertical-align: baseline;">Table Properties</span> ===
&nbsp;[[File:ETB select color.png|RTENOTITLE]]


The&nbsp;'''Table Properties'''&nbsp;tab is the default tab that opens after you press the&nbsp;&nbsp;button on the toolbar. It allows you to set the table dimensions and configure the way it will appear in the document.
== Category ==
[[Category:Help]]

Revision as of 13:58, 13 August 2015

A table is a perfect format for some types of data, including statistical information. CKEditor not only lets you add and edit this document element in a quick and easy way but also offers advanced customization options.

Creating a Table

To create a table, press the ETB TableandLine 001.PNG button on the toolbar. The Table Properties dialog window that will open lets you set configuration options that define table size, its display properties, or other advanced properties.

The Table Properties dialog window includes two tabs that group table options:


For general information on using dialog windows please refer to the Dialog Windows section of the User's Guide.

Table Properties

The Table Properties tab is the default tab that opens after you press the ETB Table.png button on the toolbar. It allows you to set the table dimensions and configure the way it will appear in the document.

RTENOTITLE

Advanced

The Advanced tab lets you configure additional image options such as assign it an ID, a class, a language direction, or CSS style properties. It is meant for advanced users with knowledge of HTML as well as CSS, and gives nearly endless possibilities as far as the presentation of the table is concerned.

RTENOTITLE

Below is an overview of all Advanced tab elements:

  • Id – a unique identifier for a table element in the document (id attribute).
  • Language Direction – the direction of the text in the table: left to right (LTR) or right to left (RTL) (dir attribute).
  • Stylesheet Classes – the class of the table element (class attribute). Note that a table element might be assigned more than one class. If this is a case, separate class names with spaces.
  • Style – CSS style definitions (style attribute). Note that each value must end with a semi-colon and individual properties should be separated with spaces.

Working With Tables

Once inserted into the document, the table can be modified. To edit the table, either double-click it, or open the table context menu by clicking it with the right mouse button or using the Menu/Application key on your keyboard.

RTENOTITLE

To delete the whole table and its contents, use the Delete Table option.

When you choose the Table Properties option, the dialog window of the same name will appear. It allows you to change the configuration options that were set when the table was created, except the number of rows and columns which are grayed out.

Additionally the table context menu lets you modify the rows, columns or particular table cells. This method makes it possible to insert new rows, columns or cells in specified locations as well as merge and split cells.

Editing Table Rows

The table context menu lets you edit table rows. If you hover your mouse over the Row menu option, further options become available.

RTENOTITLE

Below is an overview of all Row context menu option elements:

  • Insert Row Before – inserts a new row before the one that contains the cursor.
  • Insert Row After – inserts a new row after the one that contains the cursor.
  • Delete Rows – deletes a row that contains the cursor.

Note that CKEditor makes it possible to select multiple table cells by dragging the mouse over them, so an operation like deletion may be applied to many table rows at once.

Editing Table Columns

The table context menu lets you edit table columns. If you hover your mouse over the Column menu option, further options become available.


RTENOTITLE


Below is an overview of all Column context menu option elements:

  • Insert Column Before – inserts a new column before the one that contains the cursor.
  • Insert Column After – inserts a new column after the one that contains the cursor.
  • Delete Columns – deletes a column that contains the cursor.

Note that CKEditor makes it possible to select multiple table cells by dragging the mouse over them, so an operation like deletion may be applied to many table columns at once.

Editing Table Cells

The table context menu lets you edit table cells. If you hover your mouse over the Cell menu option, further options become available.

RTENOTITLE

Below is an overview of all Cell context menu option elements:

  • Insert Cell Before – inserts a new cell before the one that contains the cursor.
  • Insert Cell After – inserts a new cell after the one that contains the cursor.
  • Delete Cells – deletes a cell that contains the cursor.
  • Merge Cells – merges multiple cells in one. This option is only available if two or more cells are selected.
  • Merge Right – merges the selected cell with a cell on its right. The content of both cells becomes joined. This option is only available if no more than one cell is selected.
  • Merge Down – merges the selected cell with a cell located on its bottom. The content of both cells becomes joined. This option is only available if no more than one cell is selected.
  • Split Cell Horizontally – splits the selected cell in two, creating a new cell on its right. The content of the cell appears in the original, left cell. This option is only available if no more than one cell is selected.
  • Split Cell Vertically – splits the selected cell in two, creating a new cell on its bottom. The content of the cell appears in the original, upper cell. This option is only available if no more than one cell is selected.
  • Cell Properties – opens the Cell Properties dialog window that lets you configure cell size, type, color, and content alignment.

Note that CKEditor makes it possible to select multiple table cells by dragging the mouse over them, so an operation like deletion or merging may be applied to many table rows at once.

Cell Properties

Table cells in CKEditor can be further customized, creating a unique look and feel. Various configuration options can be set in the Cell Propertiesdialog window that is opened from the table cell context menu.

RTENOTITLE

Below is an overview of all Cell Properties dialog window elements:

  • Width – the width of the cell in pixels or a percent value. Giving the width as a percent value lets you set the proportion of the row that the cell (and the column it is located in) will occupy.
  • Height – the height of the cell in pixels.
  • Cell Type – the type of the table cell — either a normal data cell or a header cell with special formatting.
  • Word Wrap – this setting turns word wrapping of the cell content on and off.
  • Rows Span – this setting stretches the cell downward over several rows. Entering a numeric value sets the rowspan attribute.
  • Columns Span – this setting stretches the cell to the right over several columns. Entering a numeric value sets the colspan attribute.
  • Horizontal Alignment – the horizontal alignment of table cell contents. The following options are available: LeftCenterRight.
  • Vertical Alignment – the vertical alignment of table cell contents. The following options are available: TopMiddleBottom or Baseline.
  • Background Color – the color of the cell background. You can use either of the following methods to set the color:
    • Enter the RGB value in the text box, in the rgb(nnnnnn) format, where nn is a numeric value on a scale from 0 to 255 representing the red, green, and blue channel.
    • Enter the hexadecimal RGB value in the text box, in the #nnnnnn format, where the n letters stand for the three pairs of hex color values representing the red, green, and blue channel.
    • Use the Choose button to open the Select color dialog window and pick the color with your mouse.
  • Border Color – the color of the cell border. You can use either of the following methods to set the color:
    • Enter the RGB value in the text box, in the rgb(nnnnnn) format, where nn is a numeric value on a scale from 0 to 255 representing the red, green, and blue channel.
    • Enter the hexadecimal RGB value in the text box, in the #nnnnnn format, where the n letters stand for the three pairs of hex color values representing the red, green, and blue channel.
    • Use the Choose button to open the Select color dialog window and pick the color with your mouse.

 RTENOTITLE

Category