web-apps/apps/presentationeditor/main/resources/help/en/UsageInstructions/InsertTables.htm

<!DOCTYPE html>
<html>
	<head>
		<title>Insert and format tables</title>
		<meta charset="utf-8" />
		<meta name="description" content="Add a table to your presentation and adjust its properties" />
		<link type="text/css" rel="stylesheet" href="../editor.css" />
        <script type="text/javascript" src="../callback.js"></script>
        <script type="text/javascript" src="../search/js/page-search.js"></script>
	</head>
	<body>
		<div class="mainpart">
        <div class="search-field">
            <input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
        </div>
			<h1>Insert and format tables</h1>
            <h3>Insert a table</h3>
			<p>To insert a table onto a slide,</p>
			<ol>
				<li>select the slide where a table will be added,</li>
                <li>switch to the <b>Insert</b> tab of the top toolbar,</li>
				<li>click the <img alt="Table icon" src="../images/inserttable.png" /> <b>Table</b> icon at the top toolbar,</li>
				<li>select the option to create a table:
					<ul>
						<li><p>either a table with predefined number of cells (10 by 8 cells maximum)</p>
						<p>If you want to quickly add a table, just select the number of rows (8 maximum) and columns (10 maximum).</p></li>
						<li><p>or a custom table</p>
						<p>In case you need more than 10 by 8 cell table, select the <b>Insert Custom Table</b> option that will open the window where you can enter the necessary number of rows and columns respectively, then click the <b>OK</b> button.</p></li>
					</ul>
				</li>
				<li>once the table is added you can change its properties and position.</li>
			</ol>
            <p>You can also add a table into a text placeholder pressing the <img alt="Table icon" src="../images/placeholder_table.png" /> <b>Table</b> icon within it and selecting the necessary number of cells or using the <b>Insert Custom Table</b> option:</p>
            <p><img alt="Add table to placeholder" src="../images/placeholder_object.png" /></p>
            <p>To resize a table, drag the handles <img alt="Square icon" src="../images/resize_square.png" /> situated on its edges until the table reaches the necessary size.</p>
            <p><img alt="Resize table" src="../images/resizetable.png" /></p>
            <p>You can also manually change the width of a certain column or the height of a row. Move the mouse cursor over the right border of the column so that the cursor turns into the bidirectional arrow <img alt="Mouse Cursor when changing column width" src="../images/changecolumnwidth.png" /> and drag the border to the left or right to set the necessary width. To change the height of a single row manually, move the mouse cursor over the bottom border of the row until the cursor turns into the bidirectional arrow <img alt="Mouse Cursor when changing row height" src="../images/changerowheight.png" /> and drag it up or down.</p>
			<p>You can specify the <a href="../UsageInstructions/ManipulateObjects.htm" onclick="onhyperlinkclick(this)">table position</a> on the slide dragging it vertically or horizontally.</p>
            <p class="note">
                <b>Note</b>: to move around in a table you can use <a href="../HelpfulHints/KeyboardShortcuts.htm#workwithtables" onclick="onhyperlinkclick(this)">keyboard shortcuts</a>.
            </p>
            <p>It's also possible to add a table to a slide layout. To learn more, please refer to this <a href="../UsageInstructions/SetSlideParameters.htm#addtolayout" onclick="onhyperlinkclick(this)">article</a>.</p>
			<hr />
            <h3>Adjust table settings</h3>
			<img class="floatleft"alt="Table settings tab" src="../images/tablesettingstab.png" />
			<p>Most of the table properties as well as its structure can be altered using the right sidebar. To activate it click the table and choose the <b>Table settings</b> <img alt="Table settings icon" src="../images/table_settings_icon.png" /> icon on the right.</p>
			<p>The <b>Rows</b> and <b>Columns</b> sections on the top allow you to emphasize certain rows/columns applying a specific formatting to them, or highlight different rows/columns with the different background colors to clearly distinguish them. The following options are available:</p>
			<ul style="margin-left: 280px;">
				<li><b>Header</b> - emphasizes the topmost row in the table with a special formatting.</li>
				<li><b>Total</b> - emphasizes the bottommost row in the table with a special formatting.</li>
				<li><b>Banded</b> - enables the background color alternation for odd and even rows.</li>
				<li><b>First</b> - emphasizes the leftmost column in the table with a special formatting.</li>
				<li><b>Last</b> - emphasizes the rightmost column in the table with a special formatting.</li>
				<li><b>Banded</b> - enables the background color alternation for odd and even columns.</li>
			</ul>
			<p>The <b>Select From Template</b> section allows you to choose one of the predefined tables styles. Each template combines certain formatting parameters, such as a background color, border style, row/column banding etc.
			Depending on the options checked in the <b>Rows</b> and/or <b>Columns</b> sections above, the templates set will be displayed differently. For example, if you've checked the <b>Header</b> option in the <b>Rows</b> section and the <b>Banded</b> option in the <b>Columns</b> section, the displayed templates list will include only templates with the header row and banded columns enabled:</p>
			<p><img alt="Templates list" src="../images/templateslist.png" /></p>
			<p>The <b>Borders Style</b> section allows you to change the applied formatting that corresponds to the selected template. You can select the entire table or a certain cells range you want to change the formatting for and set all the parameters manually.</p>
			<ul>
				<li><b>Border</b> parameters - set the border width using the <img alt="Border Size list" src="../images/bordersize.png" /> list (or choose the <b>No borders</b> option), select its <b>Color</b> in the available palettes and determine the way it will be displayed in the cells clicking on the icons: 
				<p><img alt="Border Type icons" src="../images/bordertype.png" /></p>
				</li>
				<li><b>Background color</b> - select the color for the background within the selected cells.</li>
			</ul>
			<p>The <b>Rows & Columns</b> <img alt="Rows & Columns" src="../images/rowsandcolumns.png" /> section allows you to perform the following operations:</p>
			<ul>
				<li><b>Select</b> a row, column, cell (depending on the cursor position), or the entire table.</li>
				<li><b>Insert</b> a new row above or below the selected one as well as a new column to the left or to the right of the selected one.</li>
				<li><b>Delete</b> a row, column (depending on the cursor position or the selection), or the entire table.</li>
				<li><b>Merge Cells</b> - to merge previously selected cells into a single one.</li>
				<li><b>Split Cell...</b> - to split any previously selected cell into a certain number of rows and columns. This option opens the following window:
				<p><img alt="Split Cells window" src="../images/split_cells.png" /></p>
				<p>Enter the <b>Number of Columns</b> and <b>Number of Rows</b> that the selected cell should be split into and press <b>OK</b>.</p>
				</li>
			</ul>
			<p class="note"><b>Note</b>: the options of the <b>Rows & Columns</b> section are also accessible from the <b>right-click menu</b>.</p>
            <p>The <b>Cell Size</b> section is used to adjust the width and height of the currently selected cell. In this section, you can also <b>Distribute rows</b> so that all the selected cells have equal height or <b>Distribute columns</b> so that all the selected cells have equal width. The <b>Distribute rows/columns</b> options are also accessible from the <b>right-click menu</b>.</p>
			<hr />
            <h3>Adjust table advanced settings</h3>
			<p>To change the advanced table settings, click the table with the right mouse button and select the <b>Table Advanced Settings</b> option from the right-click menu or click the <b>Show advanced settings</b> link at the right sidebar. The table properties window will be opened:</p>
			<p><img alt="Table Properties" src="../images/table_properties.png" /></p>
			<p>The <b>Margins</b> tab allows to set the space between the text within the cells and the cell border:</p>
			<ul>
				<li>enter necessary <b>Cell Margins</b> values manually, or</li>
				<li>check the <b>Use default margins</b> box to apply the predefined values (if necessary, they can also be adjusted).</li>
			</ul>
            <p><img alt="Table Properties" src="../images/table_properties1.png" /></p>
            <p>The <b>Alternative Text</b> tab allows to specify a <b>Title</b> and <b>Description</b> which will be read to the people with vision or cognitive impairments to help them better understand what information there is in the table.</p>
			<hr />
			<p>To <b>format the entered text</b> within the table cells, you can use <a href="../UsageInstructions/InsertText.htm#formatfont" onclick="onhyperlinkclick(this)">icons at the <b>Home</b> tab of the top toolbar</a>. The <b>right-click menu</b> that appears when you click the table with the right mouse button includes two additional options: </p>
			<ul>
			    <li><b>Cell vertical alignment</b> - it allows you to set the preferred type of the text vertical alignment within the selected cells: <b>Align Top</b>, <b>Align Center</b>, or <b>Align Bottom</b>.</li>
			    <li><b>Hyperlink</b> - it allows you to insert a hyperlink into the selected cell.</li>
			</ul>									
		</div>
	</body>
</html>
-												webapps added

											
										
										
											2016-03-11 00:48:53 +00:00
+								<!DOCTYPE html>
 								<html>
 									<head>
 										<title>Insert and format tables</title>
 										<meta charset="utf-8" />
 										<meta name="description" content="Add a table to your presentation and adjust its properties" />
 										<link type="text/css" rel="stylesheet" href="../editor.css" />
 								        <script type="text/javascript" src="../callback.js"></script>
-												Added search to the documentation for all editors

											
										
										
											2018-01-12 14:52:45 +00:00
+								        <script type="text/javascript" src="../search/js/page-search.js"></script>
-												webapps added

											
										
										
											2016-03-11 00:48:53 +00:00
+									</head>
 									<body>
 										<div class="mainpart">
-												Added search to the documentation for all editors

											
										
										
											2018-01-12 14:52:45 +00:00
+								        <div class="search-field">
-												[DE][PE][SSE] replaced type="search" with type="text" for all the pages of documentation (Chrome search field cross bug)

											
										
										
											2018-03-07 08:47:00 +00:00
+								            <input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
-												Added search to the documentation for all editors

											
										
										
											2018-01-12 14:52:45 +00:00
+								        </div>
-												webapps added

											
										
										
											2016-03-11 00:48:53 +00:00
+											<h1>Insert and format tables</h1>
-												[PE] Change helps.

											
										
										
											2017-02-08 09:27:46 +00:00
+								            <h3>Insert a table</h3>
-												webapps added

											
										
										
											2016-03-11 00:48:53 +00:00
+											<p>To insert a table onto a slide,</p>
 											<ol>
 												<li>select the slide where a table will be added,</li>
-												Update helps.

											
										
										
											2017-09-20 08:31:59 +00:00
+								                <li>switch to the <b>Insert</b> tab of the top toolbar,</li>
 												<li>click the <img alt="Table icon" src="../images/inserttable.png" /> <b>Table</b> icon at the top toolbar,</li>
-												webapps added

											
										
										
											2016-03-11 00:48:53 +00:00
+												<li>select the option to create a table:
 													<ul>
 														<li><p>either a table with predefined number of cells (10 by 8 cells maximum)</p>
 														<p>If you want to quickly add a table, just select the number of rows (8 maximum) and columns (10 maximum).</p></li>
 														<li><p>or a custom table</p>
 														<p>In case you need more than 10 by 8 cell table, select the <b>Insert Custom Table</b> option that will open the window where you can enter the necessary number of rows and columns respectively, then click the <b>OK</b> button.</p></li>
 													</ul>
 												</li>
 												<li>once the table is added you can change its properties and position.</li>
 											</ol>
-												Feature/update help (#329)


											
										
										
											2020-02-05 13:47:18 +00:00
+								            <p>You can also add a table into a text placeholder pressing the <img alt="Table icon" src="../images/placeholder_table.png" /> <b>Table</b> icon within it and selecting the necessary number of cells or using the <b>Insert Custom Table</b> option:</p>
 								            <p><img alt="Add table to placeholder" src="../images/placeholder_object.png" /></p>
-												[PE] Documentation update (English)

											
										
										
											2018-03-30 11:36:20 +00:00
+								            <p>To resize a table, drag the handles <img alt="Square icon" src="../images/resize_square.png" /> situated on its edges until the table reaches the necessary size.</p>
 								            <p><img alt="Resize table" src="../images/resizetable.png" /></p>
 								            <p>You can also manually change the width of a certain column or the height of a row. Move the mouse cursor over the right border of the column so that the cursor turns into the bidirectional arrow <img alt="Mouse Cursor when changing column width" src="../images/changecolumnwidth.png" /> and drag the border to the left or right to set the necessary width. To change the height of a single row manually, move the mouse cursor over the bottom border of the row until the cursor turns into the bidirectional arrow <img alt="Mouse Cursor when changing row height" src="../images/changerowheight.png" /> and drag it up or down.</p>
-												webapps added

											
										
										
											2016-03-11 00:48:53 +00:00
+											<p>You can specify the <a href="../UsageInstructions/ManipulateObjects.htm" onclick="onhyperlinkclick(this)">table position</a> on the slide dragging it vertically or horizontally.</p>
-												[DE][PE][SSE] Updates to the documentation (en)

											
										
										
											2018-06-07 15:31:00 +00:00
+								            <p class="note">
 								                <b>Note</b>: to move around in a table you can use <a href="../HelpfulHints/KeyboardShortcuts.htm#workwithtables" onclick="onhyperlinkclick(this)">keyboard shortcuts</a>.
 								            </p>
-												Feature/update help (#329)


											
										
										
											2020-02-05 13:47:18 +00:00
+								            <p>It's also possible to add a table to a slide layout. To learn more, please refer to this <a href="../UsageInstructions/SetSlideParameters.htm#addtolayout" onclick="onhyperlinkclick(this)">article</a>.</p>
-												webapps added

											
										
										
											2016-03-11 00:48:53 +00:00
+											<hr />
-												[PE] Change helps.

											
										
										
											2017-02-08 09:27:46 +00:00
+								            <h3>Adjust table settings</h3>
-												webapps added

											
										
										
											2016-03-11 00:48:53 +00:00
+											<img class="floatleft"alt="Table settings tab" src="../images/tablesettingstab.png" />
-												Update helps.

											
										
										
											2017-09-20 08:31:59 +00:00
+											<p>Most of the table properties as well as its structure can be altered using the right sidebar. To activate it click the table and choose the <b>Table settings</b> <img alt="Table settings icon" src="../images/table_settings_icon.png" /> icon on the right.</p>
-												webapps added

											
										
										
											2016-03-11 00:48:53 +00:00
+											<p>The <b>Rows</b> and <b>Columns</b> sections on the top allow you to emphasize certain rows/columns applying a specific formatting to them, or highlight different rows/columns with the different background colors to clearly distinguish them. The following options are available:</p>
 											<ul style="margin-left: 280px;">
 												<li><b>Header</b> - emphasizes the topmost row in the table with a special formatting.</li>
 												<li><b>Total</b> - emphasizes the bottommost row in the table with a special formatting.</li>
 												<li><b>Banded</b> - enables the background color alternation for odd and even rows.</li>
 												<li><b>First</b> - emphasizes the leftmost column in the table with a special formatting.</li>
 												<li><b>Last</b> - emphasizes the rightmost column in the table with a special formatting.</li>
 												<li><b>Banded</b> - enables the background color alternation for odd and even columns.</li>
 											</ul>
 											<p>The <b>Select From Template</b> section allows you to choose one of the predefined tables styles. Each template combines certain formatting parameters, such as a background color, border style, row/column banding etc.
 											Depending on the options checked in the <b>Rows</b> and/or <b>Columns</b> sections above, the templates set will be displayed differently. For example, if you've checked the <b>Header</b> option in the <b>Rows</b> section and the <b>Banded</b> option in the <b>Columns</b> section, the displayed templates list will include only templates with the header row and banded columns enabled:</p>
 											<p><img alt="Templates list" src="../images/templateslist.png" /></p>
 											<p>The <b>Borders Style</b> section allows you to change the applied formatting that corresponds to the selected template. You can select the entire table or a certain cells range you want to change the formatting for and set all the parameters manually.</p>
-												Обновлены хэлпы.

											
										
										
											2016-06-20 06:48:10 +00:00
+											<ul>
-												webapps added

											
										
										
											2016-03-11 00:48:53 +00:00
+												<li><b>Border</b> parameters - set the border width using the <img alt="Border Size list" src="../images/bordersize.png" /> list (or choose the <b>No borders</b> option), select its <b>Color</b> in the available palettes and determine the way it will be displayed in the cells clicking on the icons:
 												<p><img alt="Border Type icons" src="../images/bordertype.png" /></p>
 												</li>
 												<li><b>Background color</b> - select the color for the background within the selected cells.</li>
 											</ul>
 											<p>The <b>Rows & Columns</b> <img alt="Rows & Columns" src="../images/rowsandcolumns.png" /> section allows you to perform the following operations:</p>
 											<ul>
 												<li><b>Select</b> a row, column, cell (depending on the cursor position), or the entire table.</li>
 												<li><b>Insert</b> a new row above or below the selected one as well as a new column to the left or to the right of the selected one.</li>
 												<li><b>Delete</b> a row, column (depending on the cursor position or the selection), or the entire table.</li>
 												<li><b>Merge Cells</b> - to merge previously selected cells into a single one.</li>
 												<li><b>Split Cell...</b> - to split any previously selected cell into a certain number of rows and columns. This option opens the following window:
 												<p><img alt="Split Cells window" src="../images/split_cells.png" /></p>
 												<p>Enter the <b>Number of Columns</b> and <b>Number of Rows</b> that the selected cell should be split into and press <b>OK</b>.</p>
 												</li>
 											</ul>
 											<p class="note"><b>Note</b>: the options of the <b>Rows & Columns</b> section are also accessible from the <b>right-click menu</b>.</p>
-												[PE] Documentation update (English)

											
										
										
											2018-03-30 11:36:20 +00:00
+								            <p>The <b>Cell Size</b> section is used to adjust the width and height of the currently selected cell. In this section, you can also <b>Distribute rows</b> so that all the selected cells have equal height or <b>Distribute columns</b> so that all the selected cells have equal width. The <b>Distribute rows/columns</b> options are also accessible from the <b>right-click menu</b>.</p>
-												webapps added

											
										
										
											2016-03-11 00:48:53 +00:00
+											<hr />
-												Feature/update help (#329)


											
										
										
											2020-02-05 13:47:18 +00:00
+								            <h3>Adjust table advanced settings</h3>
-												webapps added

											
										
										
											2016-03-11 00:48:53 +00:00
+											<p>To change the advanced table settings, click the table with the right mouse button and select the <b>Table Advanced Settings</b> option from the right-click menu or click the <b>Show advanced settings</b> link at the right sidebar. The table properties window will be opened:</p>
 											<p><img alt="Table Properties" src="../images/table_properties.png" /></p>
-												Update helps.

											
										
										
											2017-05-12 12:44:56 +00:00
+											<p>The <b>Margins</b> tab allows to set the space between the text within the cells and the cell border:</p>
-												webapps added

											
										
										
											2016-03-11 00:48:53 +00:00
+											<ul>
 												<li>enter necessary <b>Cell Margins</b> values manually, or</li>
 												<li>check the <b>Use default margins</b> box to apply the predefined values (if necessary, they can also be adjusted).</li>
 											</ul>
-												Update helps.

											
										
										
											2017-05-12 12:44:56 +00:00
+								            <p><img alt="Table Properties" src="../images/table_properties1.png" /></p>
 								            <p>The <b>Alternative Text</b> tab allows to specify a <b>Title</b> and <b>Description</b> which will be read to the people with vision or cognitive impairments to help them better understand what information there is in the table.</p>
-												webapps added

											
										
										
											2016-03-11 00:48:53 +00:00
+											<hr />
-												Update helps.

											
										
										
											2017-09-20 08:31:59 +00:00
+											<p>To <b>format the entered text</b> within the table cells, you can use <a href="../UsageInstructions/InsertText.htm#formatfont" onclick="onhyperlinkclick(this)">icons at the <b>Home</b> tab of the top toolbar</a>. The <b>right-click menu</b> that appears when you click the table with the right mouse button includes two additional options: </p>
-												webapps added

											
										
										
											2016-03-11 00:48:53 +00:00
+											<ul>
 											    <li><b>Cell vertical alignment</b> - it allows you to set the preferred type of the text vertical alignment within the selected cells: <b>Align Top</b>, <b>Align Center</b>, or <b>Align Bottom</b>.</li>
 											    <li><b>Hyperlink</b> - it allows you to insert a hyperlink into the selected cell.</li>
 											</ul>
 										</div>
 									</body>
 								</html>