mirror of
https://github.com/zadam/trilium.git
synced 2025-11-15 09:45:52 +01:00
docs(user): document adjusting borders
This commit is contained in:
Elian Doran
Binary file not shown.
|
Before Width: | Height: | Size: 871 B After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 249 B After Width: | Height: | Size: 871 B |
Binary file not shown.
|
Before Width: | Height: | Size: 219 B After Width: | Height: | Size: 249 B |
BIN
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Text/13_Tables_image.png
generated
vendored
Normal file
BIN
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Text/13_Tables_image.png
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 219 B |
BIN
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Text/14_Tables_image.png
generated
vendored
Normal file
BIN
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Text/14_Tables_image.png
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 473 B |
BIN
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Text/9_Tables_image.png
generated
vendored
BIN
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Text/9_Tables_image.png
generated
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 541 B |
307
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Text/Tables.html
generated
vendored
307
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Text/Tables.html
generated
vendored
@@ -8,147 +8,182 @@
|
||||
the desired amount of columns and rows, as indicated in the adjacent figure.</p>
|
||||
<h2>Formatting toolbar</h2>
|
||||
<p>When a table is selected, a special formatting toolbar will appear:</p>
|
||||
<img
|
||||
src="9_Tables_image.png" width="384"
|
||||
height="100">
|
||||
|
||||
<p>
|
||||
<img src="10_Tables_image.png" width="384"
|
||||
height="100">
|
||||
</p>
|
||||
<h2>Navigating a table</h2>
|
||||
<ul>
|
||||
<li>Using the mouse:
|
||||
<ul>
|
||||
<li>Click on a cell to focus it.</li>
|
||||
<li>Click the
|
||||
<img src="10_Tables_image.png"
|
||||
width="28" height="27">button at the top or the bottom of a table to insert an empty paragraph
|
||||
near it.</li>
|
||||
<li>Click the
|
||||
<img src="5_Tables_image.png"
|
||||
width="24" height="26">button at the top-left of the table to select it entirely (for easy copy-pasting
|
||||
or cutting) or drag and drop it to relocate the table.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Using the keyboard:
|
||||
<ul>
|
||||
<li>Use the arrow keys on the keyboard to easily navigate between cells.</li>
|
||||
<li>It's also possible to use <kbd>Tab</kbd> to go to the next cell and Shift+Tab
|
||||
to go to the previous cell.</li>
|
||||
<li>Unlike arrow keys, pressing <kbd>Tab</kbd> at the end of the table (last
|
||||
row, last column) will create a new row automatically.</li>
|
||||
<li>To select multiple cells, hold <kbd>Shift</kbd> while using the arrow keys.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<ul>
|
||||
<li data-list-item-id="e7f46134b097590227ab8def4844112be">Using the mouse:
|
||||
<ul>
|
||||
<li data-list-item-id="e62455762d7530b06d496e0ddb23d2e0f">Click on a cell to focus it.</li>
|
||||
<li data-list-item-id="e5b8037a928ee05c9137083da09f3c5a4">Click the
|
||||
<img src="11_Tables_image.png"
|
||||
width="28" height="27">button at the top or the bottom of a table to insert an empty paragraph
|
||||
near it.</li>
|
||||
<li data-list-item-id="e1d54454a8e1cbe7d5e29d7e262374052">Click the
|
||||
<img src="5_Tables_image.png"
|
||||
width="24" height="26">button at the top-left of the table to select it entirely (for easy copy-pasting
|
||||
or cutting) or drag and drop it to relocate the table.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-list-item-id="eb3673372bf61d20c70aa4787bbb1db3b">Using the keyboard:
|
||||
<ul>
|
||||
<li data-list-item-id="e4eb9ecdc5852d23b7e1b76be1bffe8cf">Use the arrow keys on the keyboard to easily navigate between cells.</li>
|
||||
<li
|
||||
data-list-item-id="e010d5a3a937c26f80367271d69687ab6">It's also possible to use <kbd>Tab</kbd> to go to the next cell and Shift+Tab
|
||||
to go to the previous cell.</li>
|
||||
<li data-list-item-id="e5c75e2a259cd2d0aa1252f2452c28fd6">Unlike arrow keys, pressing <kbd>Tab</kbd> at the end of the table (last
|
||||
row, last column) will create a new row automatically.</li>
|
||||
<li data-list-item-id="e86d89dfc2818e132bc6d7f7f48295dba">To select multiple cells, hold <kbd>Shift</kbd> while using the arrow keys.</li>
|
||||
</ul>
|
||||
<h2>Resizing cells</h2>
|
||||
<ul>
|
||||
<li>Columns can be resized by hovering the mouse over the border of two adjacent
|
||||
cells and dragging it.</li>
|
||||
<li>By default, the row height is not adjustable using the mouse, but it can
|
||||
be configured from the cell settings (see below).</li>
|
||||
<li>To adjust exactly the width (in pixels or percentages) of a cell, select
|
||||
the
|
||||
<img src="8_Tables_image.png" width="19"
|
||||
height="19">button.</li>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Resizing cells</h2>
|
||||
<ul>
|
||||
<li data-list-item-id="e327223f3de605b4ab196102167f22219">Columns can be resized by hovering the mouse over the border of two adjacent
|
||||
cells and dragging it.</li>
|
||||
<li data-list-item-id="e2a9150da21e9bd9ab3134c44c016b5cf">By default, the row height is not adjustable using the mouse, but it can
|
||||
be configured from the cell settings (see below).</li>
|
||||
<li data-list-item-id="ee8e8edc219006eec516c1e813494ddb1">To adjust exactly the width (in pixels or percentages) of a cell, select
|
||||
the
|
||||
<img src="8_Tables_image.png" width="19"
|
||||
height="19">button.</li>
|
||||
</ul>
|
||||
<h2>Inserting new rows and new columns</h2>
|
||||
<ul>
|
||||
<li data-list-item-id="ebf4db28ad263fbce13bf056e90512914">To insert a new column, click on a desired location, then press the
|
||||
<img
|
||||
src="Tables_image.png" width="18" height="20">button from the formatting toolbar and select <em>Insert column left or right.</em>
|
||||
</li>
|
||||
<li data-list-item-id="eb53e629e394d8a14c48dd39a61397271">To insert a new row, click on a desired location, then press the
|
||||
<img src="7_Tables_image.png"
|
||||
width="20" height="18">button and select <em>Insert row above</em> or <em>below</em>.
|
||||
<ul>
|
||||
<li data-list-item-id="e3ba47144529996c9e4455970508a0a01">A quicker alternative to creating a new row while at the end of the table
|
||||
is to press the <kbd>Tab</kbd> key.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Merging cells</h2>
|
||||
<p>To merge two or more cells together, simply select them via drag &
|
||||
drop and press the
|
||||
<img src="1_Tables_image.png"
|
||||
width="19" height="19">button from the formatting toolbar.</p>
|
||||
<p>More options are available by pressing the arrow next to it:</p>
|
||||
<ul>
|
||||
<li data-list-item-id="e57e54996911ec8dbe17deeb300af481d">Click on a single cell and select Merge cell up/down/right/left to merge
|
||||
with an adjacent cell.</li>
|
||||
<li data-list-item-id="e4510ddae1afe524dab9bb5fa5c9edd88">Select <em>Split cell vertically</em> or <em>horizontally</em>, to split
|
||||
a cell into multiple cells (can also be used to undo a merge).</li>
|
||||
</ul>
|
||||
<h2>Table properties</h2>
|
||||
<figure class="image image-style-align-right">
|
||||
<img style="aspect-ratio:312/311;" src="2_Tables_image.png"
|
||||
width="312" height="311">
|
||||
</figure>
|
||||
<p>The table properties can be accessed via the
|
||||
<img src="13_Tables_image.png"
|
||||
width="19" height="19">button and allows for the following adjustments:</p>
|
||||
<ul>
|
||||
<li data-list-item-id="e421d2c037e3e17684b6c875f1d119515">Border (not the border of the cells, but the outer rim of the table),
|
||||
which includes the style (single, double), color and width.</li>
|
||||
<li data-list-item-id="e2e29338b33b5aa3e5b63a914ae412d7d">The background color, with none set by default.</li>
|
||||
<li data-list-item-id="ee585d003b2f922bbab05dd190070b3e7">The width and height of the table in percentage (must end with <code>%</code>)
|
||||
or pixels (must end with <code>px</code>).</li>
|
||||
<li data-list-item-id="e23ac3152d03898b653db8d3849f0f5cc">The alignment of the table.
|
||||
<ul>
|
||||
<li data-list-item-id="ed90eb8b2432a87fa1fd39fd26e9f2cda">Left or right-aligned, case in which the text will flow next to it.</li>
|
||||
<li
|
||||
data-list-item-id="e887b5ce3dc7e47f5e630fbdf0da29862">Centered, case in which text will avoid the table, regardless of the table
|
||||
width.</li>
|
||||
</ul>
|
||||
<h2>Inserting new rows and new columns</h2>
|
||||
<ul>
|
||||
<li>To insert a new column, click on a desired location, then press the
|
||||
<img
|
||||
src="Tables_image.png" width="18" height="20">button from the formatting toolbar and select <em>Insert column left or right.</em>
|
||||
</li>
|
||||
<li>To insert a new row, click on a desired location, then press the
|
||||
<img src="7_Tables_image.png"
|
||||
width="20" height="18">button and select <em>Insert row above</em> or <em>below</em>.
|
||||
<ul>
|
||||
<li>A quicker alternative to creating a new row while at the end of the table
|
||||
is to press the <kbd>Tab</kbd> key.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Merging cells</h2>
|
||||
<p>To merge two or more cells together, simply select them via drag &
|
||||
drop and press the
|
||||
<img src="1_Tables_image.png"
|
||||
width="19" height="19">button from the formatting toolbar.</p>
|
||||
<p>More options are available by pressing the arrow next to it:</p>
|
||||
<ul>
|
||||
<li>Click on a single cell and select Merge cell up/down/right/left to merge
|
||||
with an adjacent cell.</li>
|
||||
<li>Select <em>Split cell vertically</em> or <em>horizontally</em>, to split
|
||||
a cell into multiple cells (can also be used to undo a merge).</li>
|
||||
</ul>
|
||||
<h2>Table properties</h2>
|
||||
<figure class="image image-style-align-right">
|
||||
<img style="aspect-ratio:312/311;" src="2_Tables_image.png"
|
||||
width="312" height="311">
|
||||
</figure>
|
||||
<p>The table properties can be accessed via the
|
||||
<img src="12_Tables_image.png"
|
||||
width="19" height="19">button and allows for the following adjustments:</p>
|
||||
<ul>
|
||||
<li>Border (not the border of the cells, but the outer rim of the table),
|
||||
which includes the style (single, double), color and width.</li>
|
||||
<li>The background color, with none set by default.</li>
|
||||
<li>The width and height of the table in percentage (must end with <code>%</code>)
|
||||
or pixels (must end with <code>px</code>).</li>
|
||||
<li>The alignment of the table.
|
||||
<ul>
|
||||
<li>Left or right-aligned, case in which the text will flow next to it.</li>
|
||||
<li>Centered, case in which text will avoid the table, regardless of the table
|
||||
width.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>The table will immediately update to reflect the changes, but the <em>Save</em> button
|
||||
must be pressed for the changes to persist.</p>
|
||||
<h2>Cell properties</h2>
|
||||
<figure class="image image-style-align-right">
|
||||
<img style="aspect-ratio:320/386;" src="3_Tables_image.png"
|
||||
width="320" height="386">
|
||||
</figure>
|
||||
<p>Similarly to table properties, the
|
||||
<img src="11_Tables_image.png"
|
||||
width="19" height="19">button opens a popup which adjusts the styling of one or more cells (based
|
||||
on the user's selection).</p>
|
||||
<p>The following options can be adjusted:</p>
|
||||
<ul>
|
||||
<li>The border style, color and width (same as table properties), but applying
|
||||
to the current cell only.</li>
|
||||
<li>The background color, with none set by default.</li>
|
||||
<li>The width and height of the cell in percentage (must end with <code>%</code>)
|
||||
or pixels (must end with <code>px</code>).</li>
|
||||
<li>The padding (the distance of the text compared to the cell's borders).</li>
|
||||
<li>The alignment of the text, both horizontally (left, centered, right, justified)
|
||||
and vertically (top, middle or bottom).</li>
|
||||
</ul>
|
||||
<p>The cell will immediately update to reflect the changes, but the <em>Save</em> button
|
||||
must be pressed for the changes to persist.</p>
|
||||
<h2>Caption</h2>
|
||||
<p>Press the
|
||||
<img src="4_Tables_image.png"
|
||||
width="18" height="17">button to insert a caption or a text description of the table, which is
|
||||
going to be displayed above the table.</p>
|
||||
<h2>Tables with invisible borders</h2>
|
||||
<p>Tables can be set to have invisible borders in order to allow for basic
|
||||
layouts (columns, grids) of text or <a href="#root/_help_mT0HEkOsz6i1">images</a> without
|
||||
the distraction of their border:</p>
|
||||
<ol>
|
||||
<li>First insert a table with the desired number of columns and rows.</li>
|
||||
<li>Select the entire table.</li>
|
||||
<li>In <em>Table properties</em>, set:
|
||||
</li>
|
||||
</ul>
|
||||
<p>The table will immediately update to reflect the changes, but the <em>Save</em> button
|
||||
must be pressed for the changes to persist.</p>
|
||||
<h2>Cell properties</h2>
|
||||
<figure class="image image-style-align-right">
|
||||
<img style="aspect-ratio:320/386;" src="3_Tables_image.png"
|
||||
width="320" height="386">
|
||||
</figure>
|
||||
<p>Similarly to table properties, the
|
||||
<img src="12_Tables_image.png"
|
||||
width="19" height="19">button opens a popup which adjusts the styling of one or more cells (based
|
||||
on the user's selection).</p>
|
||||
<p>The following options can be adjusted:</p>
|
||||
<ul>
|
||||
<li data-list-item-id="e9e0801ebcbbb763dc569814c922cde20">The border style, color and width (same as table properties), but applying
|
||||
to the current cell only.</li>
|
||||
<li data-list-item-id="ec3f1f0bbae91f118bfc86c5bace6edc9">The background color, with none set by default.</li>
|
||||
<li data-list-item-id="e93abf34e4f6f6a4732cd8a63577567f4">The width and height of the cell in percentage (must end with <code>%</code>)
|
||||
or pixels (must end with <code>px</code>).</li>
|
||||
<li data-list-item-id="ed65a0f2554a5130beeb7d478710f7bfe">The padding (the distance of the text compared to the cell's borders).</li>
|
||||
<li
|
||||
data-list-item-id="e76d8603c089d10e807576cb2e535a388">The alignment of the text, both horizontally (left, centered, right, justified)
|
||||
and vertically (top, middle or bottom).</li>
|
||||
</ul>
|
||||
<p>The cell will immediately update to reflect the changes, but the <em>Save</em> button
|
||||
must be pressed for the changes to persist.</p>
|
||||
<h2>Caption</h2>
|
||||
<p>Press the
|
||||
<img src="4_Tables_image.png"
|
||||
width="18" height="17">button to insert a caption or a text description of the table, which is
|
||||
going to be displayed above the table.</p>
|
||||
<h2>Table borders</h2>
|
||||
<p>By default, tables will come with a predefined gray border.</p>
|
||||
<p>To adjust the borders, follow these steps:</p>
|
||||
<ol>
|
||||
<li data-list-item-id="e04c95cbf1d8480c634f7ba6310d5c66e">Select the table.</li>
|
||||
<li data-list-item-id="e61b666fe10bca473400bd66f8fd11f36">In the floating panel, select the <em>Table properties</em> option (
|
||||
<img
|
||||
src="14_Tables_image.png" width="21" height="21">).
|
||||
<ol>
|
||||
<li><em>Style</em> to <em>Single</em>
|
||||
<li data-list-item-id="e2ab1b3f540def81d55ec91fe8a313fb3">Look for the <em>Border</em> section at the top of the newly opened panel.</li>
|
||||
<li
|
||||
data-list-item-id="eef63fe5e16f8103d07a308b4b9147fbf">This will control the outer borders of the table.</li>
|
||||
<li data-list-item-id="eca1a3d01633d7d2d32c854bb39e66a53">Select a style for the border. Generally <em>Single</em> is the desirable
|
||||
option.</li>
|
||||
<li data-list-item-id="e7edbe51137f6a7d16d2ca9d7b3f553a2">Select a color for the border.</li>
|
||||
<li data-list-item-id="e3ad74eae4fddb2fb4c60a1c1efc46950">Select a width for the border, expressed in pixels. </li>
|
||||
</ol>
|
||||
</li>
|
||||
<li data-list-item-id="ed56e2883a25aa417c7f4bfddd7a07df6">Select all the cells of the table and then press the <em>Cell properties </em>option
|
||||
(
|
||||
<img src="9_Tables_image.png" width="21" height="21">).
|
||||
<ol>
|
||||
<li data-list-item-id="e93dc8de15098fd2c0c5674a24205b712">This will control the inner borders of the table, at cell level.</li>
|
||||
<li
|
||||
data-list-item-id="ee4f0deb1a42efa29e3b5147f79e92d3b">Note that it's possible to change the borders individually by selecting
|
||||
one or more cells, case in which it will only change the borders that intersect
|
||||
these cells.</li>
|
||||
<li data-list-item-id="e3af86e5d6096d8afd7413012a9ecb6c6">Repeat the same steps as from step (2).</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
<h3>Tables with invisible borders</h3>
|
||||
<p>Tables can be set to have invisible borders in order to allow for basic
|
||||
layouts (columns, grids) of text or <a href="#root/_help_mT0HEkOsz6i1">images</a> without
|
||||
the distraction of their border:</p>
|
||||
<ol>
|
||||
<li data-list-item-id="e078bac0af18c7fe8f4ac2272a312e49d">First insert a table with the desired number of columns and rows.</li>
|
||||
<li
|
||||
data-list-item-id="ee25683e809fd85e65db655dea9efece5">Select the entire table.</li>
|
||||
<li data-list-item-id="e66342ca801e71a9aba89fc217fcc66a5">In <em>Table properties</em>, set:
|
||||
<ol>
|
||||
<li data-list-item-id="edef2e2e5a6a8ac73e36101f4429863d8"><em>Style</em> to <em>Single</em>
|
||||
</li>
|
||||
<li><em>Color</em> to <code>transparent</code>
|
||||
<li data-list-item-id="e6aaccfd6440d2999079364982c0b33fc"><em>Color</em> to <code>transparent</code>
|
||||
</li>
|
||||
<li>Width to <code>1px</code>.</li>
|
||||
<li data-list-item-id="e13494edb598fd972373a368e79540ea1">Width to <code>1px</code>.</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>In Cell Properties, set the same as on the previous step.</li>
|
||||
</ol>
|
||||
<h2>Markdown import/export</h2>
|
||||
<p>Simple tables are exported in GitHub-flavored Markdown format (e.g. a
|
||||
series of <code>|</code> items). If the table is found to be more complex
|
||||
(it contains HTML elements, has custom sizes or images), the table is converted
|
||||
to a HTML one instead.</p>
|
||||
<p>Generally formatting loss should be minimal when exported to Markdown
|
||||
due to the fallback to HTML formatting.</p>
|
||||
<li data-list-item-id="e15221332e526341aefb8b87e715c0e32">In Cell Properties, set the same as on the previous step.</li>
|
||||
</ol>
|
||||
<h2>Markdown import/export</h2>
|
||||
<p>Simple tables are exported in GitHub-flavored Markdown format (e.g. a
|
||||
series of <code>|</code> items). If the table is found to be more complex
|
||||
(it contains HTML elements, has custom sizes or images), the table is converted
|
||||
to a HTML one instead.</p>
|
||||
<p>Generally formatting loss should be minimal when exported to Markdown
|
||||
due to the fallback to HTML formatting.</p>
|
||||
6
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Script API.html
generated
vendored
6
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Script API.html
generated
vendored
@@ -1,10 +1,10 @@
|
||||
<p>For <a href="#root/_help_CdNpE2pqjmI6">script code notes</a>, Trilium offers
|
||||
<p>tFor <a href="#root/_help_CdNpE2pqjmI6">script code notes</a>, Trilium offers
|
||||
an API that gives them access to various features of the application.</p>
|
||||
<p>There are two APIs:</p>
|
||||
<ul>
|
||||
<li>One for the front-end scripts: <a class="reference-link" href="#root/_help_Q2z6av6JZVWm">Frontend API</a>
|
||||
<li data-list-item-id="e85c7106495c24ab4dd38c430b0af87df">One for the front-end scripts: <a class="reference-link" href="#root/_help_Q2z6av6JZVWm">Frontend API</a>
|
||||
</li>
|
||||
<li>One for the back-end scripts: <a class="reference-link" href="#root/_help_MEtfsqa5VwNi">Backend API</a>
|
||||
<li data-list-item-id="e4f976e19004a21620ed1c6b58f9d1eb3">One for the back-end scripts: <a class="reference-link" href="#root/_help_MEtfsqa5VwNi">Backend API</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p>In both cases, the API resides in a global variable, <code>api</code>,
|
||||
|
||||
Reference in New Issue
Block a user