CKEditor 3.x/Users Guide/Rich Text/Tables - Revision history

Anna: /* Cell Properties */ Screenshot updated to v3.6.1, rewording around percent values

2011-06-27T13:07:34Z

‎Cell Properties: Screenshot updated to v3.6.1, rewording around percent values

Anna: /* Table Properties */ Pixels/ percent text for width changed

2011-06-27T11:56:20Z

‎Table Properties: Pixels/ percent text for width changed

Anna: Final proof-reading

2010-12-13T12:53:22Z

Final proof-reading

Anna: Dialog windows template added

2010-12-10T11:25:48Z

Dialog windows template added

Anna: Custom title, links corrected, dialog window section removed

2010-12-02T17:57:36Z

Custom title, links corrected, dialog window section removed

Anna: moved CKEditor 3.x/Users Guide/Common Tasks/Tables to CKEditor 3.x/Users Guide/Rich Text/Tables: User's Guide structure change

2010-12-02T07:44:10Z

moved CKEditor 3.x/Users Guide/Common Tasks/Tables to CKEditor 3.x/Users Guide/Rich Text/Tables: User's Guide structure change

Anna: /* Creating a Table */

2010-11-04T12:32:32Z

‎Creating a Table

Anna: /* Creating a Table */ Minor rewriting

2010-11-04T12:31:47Z

‎Creating a Table: Minor rewriting

Anna: /* Cell Properties */ Article section rewritten

2010-11-04T12:05:54Z

‎Cell Properties: Article section rewritten

Anna: /* Table Properties */ Alignment description corrected

2010-11-04T11:42:23Z

‎Table Properties: Alignment description corrected

@@ Line 109: / Line 109: @@
 Table cells in CKEditor can be further customized, creating a unique look and feel. Various configuration options can be set in the '''Cell Properties''' dialog window that is opened from the table cell context menu.
-[[Image:CKEditor_cell_properties.png|frame|center|The Cell Properties dialog window in CKEditor]]
+[[Image:CKEditor_table_cell_properties.png|frame|center|The Cell Properties dialog window in CKEditor]]
 Below is an overview of all '''Cell Properties''' dialog window elements:
-* '''Width''' &ndash; the width of the cell in pixels or percent. Changing the unit to percent lets you set the proportion of the row that the cell (and the column it is located in) will occupy.
+* '''Width''' &ndash; 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''' &ndash; the height of the cell in pixels.

@@ Line 22: / Line 22: @@
 * '''Columns''' &ndash; the number of columns in the table (obligatory).
-* '''Width''' &ndash;  the width of the table in pixels or percent. Changing the unit to percent lets you set the proportion of the [[CKEditor_3.x/Users Guide/Interface/Editing Area|editing area]] that the table will occupy.
+* '''Width''' &ndash;  the width of the table in pixels or a percent value. Giving the width as a percent value lets you set the proportion of the [[CKEditor_3.x/Users Guide/Interface/Editing Area|editing area]] that the table will occupy.
 * '''Height''' &ndash; the height of the table in pixels.

@@ Line 15: / Line 15: @@
 The '''Table Properties''' tab is the default tab that opens after you press the [[Image:CKEditor_table.png‎|Table]] button on the toolbar. It allows you to set the table dimensions and configure the way it will appear in the document.
-[[Image:CKEditor_table_properties.png|frame|center|alt=Table Properties dialog window with the default tab open| Table Properties dialog window with the default tab open]]
+[[Image:CKEditor_table_properties.png|frame|center|Table Properties dialog window with the default tab open]]
@@ Line 29: / Line 29: @@
 * '''Alignment''' &ndash; the alignment of the table on the page. The following options are available: '''Left''', '''Center''', '''Right'''.
-* '''Cell spacing''' &ndash; the space between individual cells as well as cells and table border, in pixels.
+* '''Cell spacing''' &ndash; the space between individual cells as well as cells and table borders, in pixels.
 * '''Cell padding''' &ndash; the space between the cell border and its contents, in pixels.
@@ Line 36: / Line 36: @@
 === 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 and CSS and gives nearly endless possibilities as far as the presentation of the table is concerned.
+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.
-[[Image:CKEditor_table_advanced.png|frame|center|alt=Advanced tab of the Table Properties window|Advanced tab of the Table Properties window]]
+[[Image:CKEditor_table_advanced.png|frame|center|Advanced tab of the Table Properties window]]
@@ Line 44: / Line 44: @@
 * '''Id''' &ndash; a unique identifier for a table element in the document (<code>id</code> attribute).
 * '''Language Direction''' &ndash; the direction of the text in the table: left to right (LTR)  or right to left (RTL) (<code>dir</code> attribute).
-* '''Stylesheet Classes''' &ndash; a class of the table element (<code>class</code> attribute). Note that a table element might be assigned more than one class. If this is a case, separate class names with spaces.
+* '''Stylesheet Classes''' &ndash; the class of the table element (<code>class</code> attribute). Note that a table element might be assigned more than one class. If this is a case, separate class names with spaces.
 * '''Style''' &ndash; CSS style definitions (<code>style</code> 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 use the right mouse button to open the table context menu.
+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.
-[[Image:CKEditor_table_contextmenu.png|frame|center|alt=The context menu for a table element| The context menu for a table element]]
+[[Image:CKEditor_table_contextmenu.png|frame|center|The context menu for a table element]]
@@ Line 62: / Line 62: @@
 The table context menu lets you edit table rows. If you hover your mouse over the '''Row''' menu option, further options become available.
-[[Image:CKEditor_table_row_contextmenu.png|frame|center|alt=The context menu for a table row element|The context menu for a table row element]]
+[[Image:CKEditor_table_row_contextmenu.png|frame|center|The context menu for a table row element]]
@@ Line 75: / Line 75: @@
 The table context menu lets you edit table columns. If you hover your mouse over the '''Column''' menu option, further options become available.
-[[Image:CKEditor_table_column_contextmenu.png|frame|center|alt=The context menu for a table column element|The context menu for a table column element]]
+[[Image:CKEditor_table_column_contextmenu.png|frame|center|The context menu for a table column element]]
@@ Line 88: / Line 88: @@
 The table context menu lets you edit table cells. If you hover your mouse over the '''Cell''' menu option, further options become available.
-[[Image:CKEditor_table_cell_contextmenu.png|frame|center|alt=The context menu for a table cell element|The context menu for a table cell element]]
+[[Image:CKEditor_table_cell_contextmenu.png|frame|center|The context menu for a table cell element]]
@@ Line 102: / Line 102: @@
 * '''Split Cell Horizontally''' &ndash; 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''' &ndash; 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''' &ndash; opens the '''[[CKEditor_3.x/Users_Guide/Rich Text/Tables#Cell_Properties|Cell Properties]]'''  dialog window that lets you configure cell size, type, color and content alignment.
+* '''Cell Properties''' &ndash; opens the '''[[CKEditor_3.x/Users_Guide/Rich Text/Tables#Cell_Properties|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 Properties''' dialog window that can be opened from the table cell context menu.
+Table cells in CKEditor can be further customized, creating a unique look and feel. Various configuration options can be set in the '''Cell Properties''' dialog window that is opened from the table cell context menu.
-[[Image:CKEditor_cell_properties.png|frame|center|alt=The Cell Properties dialog window in CKEditor|The Cell Properties dialog window in CKEditor]]
+[[Image:CKEditor_cell_properties.png|frame|center|The Cell Properties dialog window in CKEditor]]
@@ Line 127: / Line 127: @@
 * '''Background Color''' &ndash; 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 <code>rgb(''nn'', ''nn'', ''nn'')</code> format, where <code>''nn''</code> is a numeric value on a scale from 0 to 255 representing the red, green and blue channel.
+** Enter the [http://en.wikipedia.org/wiki/RGB_color_model RGB] value in the text box, in the <code>rgb(''nn'', ''nn'', ''nn'')</code> format, where <code>''nn''</code> 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 <code>#''nnnnnn''</code> format, where the <code>''n''</code> letters stand for the three pairs of hex color values representing the red, green and blue channel.
+** Enter the hexadecimal RGB value in the text box, in the <code>#''nnnnnn''</code> format, where the <code>''n''</code> 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''' &ndash; 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 <code>rgb(''nn'', ''nn'', ''nn'')</code> format, where <code>''nn''</code> is a numeric value on a scale from 0 to 255 representing the red, green and blue channel.
+** Enter the RGB value in the text box, in the <code>rgb(''nn'', ''nn'', ''nn'')</code> format, where <code>''nn''</code> 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 <code>#''nnnnnn''</code> format, where the <code>''n''</code> letters stand for the three pairs of hex color values representing the red, green and blue channel.
+** Enter the hexadecimal RGB value in the text box, in the <code>#''nnnnnn''</code> format, where the <code>''n''</code> 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.
-[[Image:CKEditor_select_color.png|frame|center|alt=The Select Color dialog window in CKEditor used for setting the cell background and border color|The Select Color dialog window in CKEditor used for setting the cell background and border color]]
+[[Image:CKEditor_select_color.png|frame|center|The Select Color dialog window in CKEditor used for setting the cell background and border color]]

@@ Line 10: / Line 10: @@
 * [[CKEditor 3.x/Users Guide/Rich Text/Tables#Advanced|Advanced]]
-For general information on using dialog windows please refer to the [[CKEditor 3.x/Users Guide/Interface/Dialog Windows|Dialog Windows]] section of the User's Guide.
+{{CKEditor Dialog Windows}}
 === Table Properties ===

@@ Line 1: / Line 1: @@
 __TOC__
 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.
 To create a table in CKEditor, press the [[Image:CKEditor_table.png|Table‎]] 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:
-* [[CKEditor_3.x/Users_Guide/Common_Tasks/Tables#Table_Properties|Table Properties]]
+* [[CKEditor 3.x/Users Guide/Rich Text/Tables#Table_Properties|Table Properties]]
-* [[CKEditor_3.x/Users_Guide/Common_Tasks/Tables#Advanced|Advanced]]
+* [[CKEditor 3.x/Users Guide/Rich Text/Tables#Advanced|Advanced]]
 === Table Properties ===
@@ Line 111: / Line 102: @@
 * '''Split Cell Horizontally''' &ndash; 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''' &ndash; 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''' &ndash; opens the '''[[CKEditor_3.x/Users_Guide/Common_Tasks/Tables#Cell_Properties|Cell Properties]]'''  dialog window that lets you configure cell size, type, color and content alignment.
+* '''Cell Properties''' &ndash; opens the '''[[CKEditor_3.x/Users_Guide/Rich Text/Tables#Cell_Properties|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.

← Older revision	Revision as of 07:44, 2 December 2010
(No difference)

@@ Line 1: / Line 1: @@
 __TOC__
 == Creating a Table ==
-A table is a perfect format for some types of data, including statistical information. CKEditor not only lets you add and edit this common text placeholder in a quick and easy way but also offers advanced customization options.
+A table is a perfect format for some types of data, including statistical information. CKEditor not only lets you add and edit this common document element in a quick and easy way but also offers advanced customization options.
 To create a table in CKEditor, press the [[Image:CKEditor_table.png|Table‎]] 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.

← Older revision		Revision as of 12:05, 4 November 2010
Line 116:		Line 116:

	==== Cell Properties ====		==== 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 Properties''' dialog window that can be opened from the table cell context menu.
		+
		+	[[Image:CKEditor_cell_properties.png\|frame\|center\|alt=The Cell Properties dialog window in CKEditor\|The Cell Properties dialog window in CKEditor]]
		+
		+
		+	Below is an overview of all '''Cell Properties''' dialog window elements:
		+	* '''Width''' – the width of the cell in pixels or percent. Changing the unit to percent 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 <code>rowspan</code> attribute.
		+	* '''Columns Span''' – this setting stretches the cell to the right over several columns. Entering a numeric value sets the <code>colspan</code> attribute.
		+
		+	* '''Horizontal Alignment''' – the horizontal alignment of table cell contents. The following options are available: '''Left''', '''Center''', '''Right'''.
		+	* '''Vertical Alignment''' – the vertical alignment of table cell contents. The following options are available: '''Top''', '''Middle''', '''Bottom''' 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 <code>rgb(''nn'', ''nn'', ''nn'')</code> format, where <code>''nn''</code> 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 <code>#''nnnnnn''</code> format, where the <code>''n''</code> 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 <code>rgb(''nn'', ''nn'', ''nn'')</code> format, where <code>''nn''</code> 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 <code>#''nnnnnn''</code> format, where the <code>''n''</code> 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.
		+
		+	[[Image:CKEditor_select_color.png\|frame\|center\|alt=The Select Color dialog window in CKEditor used for setting the cell background and border color\|The Select Color dialog window in CKEditor used for setting the cell background and border color]]