docs(user): document adjusting borders

This commit is contained in:
Elian Doran 2025-10-31 11:21:17 +02:00
parent 82ff5f6660
commit 76dd9baea8
No known key found for this signature in database
17 changed files with 218 additions and 149 deletions

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 219 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 473 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 541 B

View File

@ -8,58 +8,59 @@
the desired amount of columns and rows, as indicated in the adjacent figure.</p> the desired amount of columns and rows, as indicated in the adjacent figure.</p>
<h2>Formatting toolbar</h2> <h2>Formatting toolbar</h2>
<p>When a table is selected, a special formatting toolbar will appear:</p> <p>When a table is selected, a special formatting toolbar will appear:</p>
<img <p>
src="9_Tables_image.png" width="384" <img src="10_Tables_image.png" width="384"
height="100"> height="100">
</p>
<h2>Navigating a table</h2> <h2>Navigating a table</h2>
<ul> <ul>
<li>Using the mouse: <li data-list-item-id="e7f46134b097590227ab8def4844112be">Using the mouse:
<ul> <ul>
<li>Click on a cell to focus it.</li> <li data-list-item-id="e62455762d7530b06d496e0ddb23d2e0f">Click on a cell to focus it.</li>
<li>Click the <li data-list-item-id="e5b8037a928ee05c9137083da09f3c5a4">Click the
<img src="10_Tables_image.png" <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 width="28" height="27">button at the top or the bottom of a table to insert an empty paragraph
near it.</li> near it.</li>
<li>Click the <li data-list-item-id="e1d54454a8e1cbe7d5e29d7e262374052">Click the
<img src="5_Tables_image.png" <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 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> or cutting) or drag and drop it to relocate the table.</li>
</ul> </ul>
</li> </li>
<li>Using the keyboard: <li data-list-item-id="eb3673372bf61d20c70aa4787bbb1db3b">Using the keyboard:
<ul> <ul>
<li>Use the arrow keys on the keyboard to easily navigate between cells.</li> <li data-list-item-id="e4eb9ecdc5852d23b7e1b76be1bffe8cf">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 <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> to go to the previous cell.</li>
<li>Unlike arrow keys, pressing <kbd>Tab</kbd> at the end of the table (last <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> 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> <li data-list-item-id="e86d89dfc2818e132bc6d7f7f48295dba">To select multiple cells, hold <kbd>Shift</kbd> while using the arrow keys.</li>
</ul> </ul>
</li> </li>
</ul> </ul>
<h2>Resizing cells</h2> <h2>Resizing cells</h2>
<ul> <ul>
<li>Columns can be resized by hovering the mouse over the border of two adjacent <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> cells and dragging it.</li>
<li>By default, the row height is not adjustable using the mouse, but it can <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> be configured from the cell settings (see below).</li>
<li>To adjust exactly the width (in pixels or percentages) of a cell, select <li data-list-item-id="ee8e8edc219006eec516c1e813494ddb1">To adjust exactly the width (in pixels or percentages) of a cell, select
the the
<img src="8_Tables_image.png" width="19" <img src="8_Tables_image.png" width="19"
height="19">button.</li> height="19">button.</li>
</ul> </ul>
<h2>Inserting new rows and new columns</h2> <h2>Inserting new rows and new columns</h2>
<ul> <ul>
<li>To insert a new column, click on a desired location, then press the <li data-list-item-id="ebf4db28ad263fbce13bf056e90512914">To insert a new column, click on a desired location, then press the
<img <img
src="Tables_image.png" width="18" height="20">button from the formatting toolbar and select <em>Insert column left or right.</em> src="Tables_image.png" width="18" height="20">button from the formatting toolbar and select <em>Insert column left or right.</em>
</li> </li>
<li>To insert a new row, click on a desired location, then press the <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" <img src="7_Tables_image.png"
width="20" height="18">button and select <em>Insert row above</em> or <em>below</em>. width="20" height="18">button and select <em>Insert row above</em> or <em>below</em>.
<ul> <ul>
<li>A quicker alternative to creating a new row while at the end of the table <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> is to press the <kbd>Tab</kbd> key.</li>
</ul> </ul>
</li> </li>
@ -71,9 +72,9 @@ height="100">
width="19" height="19">button from the formatting toolbar.</p> width="19" height="19">button from the formatting toolbar.</p>
<p>More options are available by pressing the arrow next to it:</p> <p>More options are available by pressing the arrow next to it:</p>
<ul> <ul>
<li>Click on a single cell and select Merge cell up/down/right/left to merge <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> with an adjacent cell.</li>
<li>Select <em>Split cell vertically</em> or <em>horizontally</em>, to split <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> a cell into multiple cells (can also be used to undo a merge).</li>
</ul> </ul>
<h2>Table properties</h2> <h2>Table properties</h2>
@ -82,18 +83,19 @@ height="100">
width="312" height="311"> width="312" height="311">
</figure> </figure>
<p>The table properties can be accessed via the <p>The table properties can be accessed via the
<img src="12_Tables_image.png" <img src="13_Tables_image.png"
width="19" height="19">button and allows for the following adjustments:</p> width="19" height="19">button and allows for the following adjustments:</p>
<ul> <ul>
<li>Border (not the border of the cells, but the outer rim of the table), <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> which includes the style (single, double), color and width.</li>
<li>The background color, with none set by default.</li> <li data-list-item-id="e2e29338b33b5aa3e5b63a914ae412d7d">The background color, with none set by default.</li>
<li>The width and height of the table in percentage (must end with <code>%</code>) <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> or pixels (must end with <code>px</code>).</li>
<li>The alignment of the table. <li data-list-item-id="e23ac3152d03898b653db8d3849f0f5cc">The alignment of the table.
<ul> <ul>
<li>Left or right-aligned, case in which the text will flow next to it.</li> <li data-list-item-id="ed90eb8b2432a87fa1fd39fd26e9f2cda">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 <li
data-list-item-id="e887b5ce3dc7e47f5e630fbdf0da29862">Centered, case in which text will avoid the table, regardless of the table
width.</li> width.</li>
</ul> </ul>
</li> </li>
@ -106,18 +108,19 @@ height="100">
width="320" height="386"> width="320" height="386">
</figure> </figure>
<p>Similarly to table properties, the <p>Similarly to table properties, the
<img src="11_Tables_image.png" <img src="12_Tables_image.png"
width="19" height="19">button opens a popup which adjusts the styling of one or more cells (based width="19" height="19">button opens a popup which adjusts the styling of one or more cells (based
on the user's selection).</p> on the user's selection).</p>
<p>The following options can be adjusted:</p> <p>The following options can be adjusted:</p>
<ul> <ul>
<li>The border style, color and width (same as table properties), but applying <li data-list-item-id="e9e0801ebcbbb763dc569814c922cde20">The border style, color and width (same as table properties), but applying
to the current cell only.</li> to the current cell only.</li>
<li>The background color, with none set by default.</li> <li data-list-item-id="ec3f1f0bbae91f118bfc86c5bace6edc9">The background color, with none set by default.</li>
<li>The width and height of the cell in percentage (must end with <code>%</code>) <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> 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 data-list-item-id="ed65a0f2554a5130beeb7d478710f7bfe">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) <li
data-list-item-id="e76d8603c089d10e807576cb2e535a388">The alignment of the text, both horizontally (left, centered, right, justified)
and vertically (top, middle or bottom).</li> and vertically (top, middle or bottom).</li>
</ul> </ul>
<p>The cell will immediately update to reflect the changes, but the <em>Save</em> button <p>The cell will immediately update to reflect the changes, but the <em>Save</em> button
@ -127,23 +130,55 @@ height="100">
<img src="4_Tables_image.png" <img src="4_Tables_image.png"
width="18" height="17">button to insert a caption or a text description of the table, which is 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> going to be displayed above the table.</p>
<h2>Tables with invisible borders</h2> <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 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.&nbsp;</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 <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 layouts (columns, grids) of text or <a href="#root/_help_mT0HEkOsz6i1">images</a> without
the distraction of their border:</p> the distraction of their border:</p>
<ol> <ol>
<li>First insert a table with the desired number of columns and rows.</li> <li data-list-item-id="e078bac0af18c7fe8f4ac2272a312e49d">First insert a table with the desired number of columns and rows.</li>
<li>Select the entire table.</li> <li
<li>In <em>Table properties</em>, set: data-list-item-id="ee25683e809fd85e65db655dea9efece5">Select the entire table.</li>
<li data-list-item-id="e66342ca801e71a9aba89fc217fcc66a5">In <em>Table properties</em>, set:
<ol> <ol>
<li><em>Style</em> to <em>Single</em> <li data-list-item-id="edef2e2e5a6a8ac73e36101f4429863d8"><em>Style</em> to <em>Single</em>
</li> </li>
<li><em>Color</em> to <code>transparent</code> <li data-list-item-id="e6aaccfd6440d2999079364982c0b33fc"><em>Color</em> to <code>transparent</code>
</li> </li>
<li>Width to <code>1px</code>.</li> <li data-list-item-id="e13494edb598fd972373a368e79540ea1">Width to <code>1px</code>.</li>
</ol> </ol>
</li> </li>
<li>In Cell Properties, set the same as on the previous step.</li> <li data-list-item-id="e15221332e526341aefb8b87e715c0e32">In Cell Properties, set the same as on the previous step.</li>
</ol> </ol>
<h2>Markdown import/export</h2> <h2>Markdown import/export</h2>
<p>Simple tables are exported in GitHub-flavored Markdown format (e.g. a <p>Simple tables are exported in GitHub-flavored Markdown format (e.g. a

View File

@ -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> an API that gives them access to various features of the application.</p>
<p>There are two APIs:</p> <p>There are two APIs:</p>
<ul> <ul>
<li>One for the front-end scripts:&nbsp;<a class="reference-link" href="#root/_help_Q2z6av6JZVWm">Frontend API</a> <li data-list-item-id="e85c7106495c24ab4dd38c430b0af87df">One for the front-end scripts:&nbsp;<a class="reference-link" href="#root/_help_Q2z6av6JZVWm">Frontend API</a>
</li> </li>
<li>One for the back-end scripts:&nbsp;<a class="reference-link" href="#root/_help_MEtfsqa5VwNi">Backend API</a> <li data-list-item-id="e4f976e19004a21620ed1c6b58f9d1eb3">One for the back-end scripts:&nbsp;<a class="reference-link" href="#root/_help_MEtfsqa5VwNi">Backend API</a>
</li> </li>
</ul> </ul>
<p>In both cases, the API resides in a global variable, <code>api</code>, <p>In both cases, the API resides in a global variable, <code>api</code>,

View File

@ -8281,7 +8281,7 @@
"dataFileName": "8_Tables_image.png" "dataFileName": "8_Tables_image.png"
}, },
{ {
"attachmentId": "UdhsypjV4pzZ", "attachmentId": "rrLM5BQCZ5ci",
"title": "image.png", "title": "image.png",
"role": "image", "role": "image",
"mime": "image/png", "mime": "image/png",
@ -8289,7 +8289,7 @@
"dataFileName": "9_Tables_image.png" "dataFileName": "9_Tables_image.png"
}, },
{ {
"attachmentId": "VerzwlO9y6Na", "attachmentId": "UdhsypjV4pzZ",
"title": "image.png", "title": "image.png",
"role": "image", "role": "image",
"mime": "image/png", "mime": "image/png",
@ -8297,7 +8297,7 @@
"dataFileName": "10_Tables_image.png" "dataFileName": "10_Tables_image.png"
}, },
{ {
"attachmentId": "wYkQvargZlNF", "attachmentId": "VerzwlO9y6Na",
"title": "image.png", "title": "image.png",
"role": "image", "role": "image",
"mime": "image/png", "mime": "image/png",
@ -8305,12 +8305,28 @@
"dataFileName": "11_Tables_image.png" "dataFileName": "11_Tables_image.png"
}, },
{ {
"attachmentId": "YFGeAN41kvZY", "attachmentId": "wYkQvargZlNF",
"title": "image.png", "title": "image.png",
"role": "image", "role": "image",
"mime": "image/png", "mime": "image/png",
"position": 10, "position": 10,
"dataFileName": "12_Tables_image.png" "dataFileName": "12_Tables_image.png"
},
{
"attachmentId": "YFGeAN41kvZY",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "13_Tables_image.png"
},
{
"attachmentId": "zRLxHrKJiK8N",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "14_Tables_image.png"
} }
] ]
} }

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 219 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 473 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 541 B

View File

@ -9,13 +9,13 @@ To create a table, simply press the table button and select with the mouse the d
When a table is selected, a special formatting toolbar will appear: When a table is selected, a special formatting toolbar will appear:
<img src="9_Tables_image.png" width="384" height="100"> <img src="10_Tables_image.png" width="384" height="100">
## Navigating a table ## Navigating a table
* Using the mouse: * Using the mouse:
* Click on a cell to focus it. * Click on a cell to focus it.
* 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. * 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.
* 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. * 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.
* Using the keyboard: * Using the keyboard:
* Use the arrow keys on the keyboard to easily navigate between cells. * Use the arrow keys on the keyboard to easily navigate between cells.
@ -48,7 +48,7 @@ More options are available by pressing the arrow next to it:
<figure class="image image-style-align-right"><img style="aspect-ratio:312/311;" src="2_Tables_image.png" width="312" height="311"></figure> <figure class="image image-style-align-right"><img style="aspect-ratio:312/311;" src="2_Tables_image.png" width="312" height="311"></figure>
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: 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:
* Border (not the border of the cells, but the outer rim of the table), which includes the style (single, double), color and width. * Border (not the border of the cells, but the outer rim of the table), which includes the style (single, double), color and width.
* The background color, with none set by default. * The background color, with none set by default.
@ -63,7 +63,7 @@ The table will immediately update to reflect the changes, but the _Save_ button
<figure class="image image-style-align-right"><img style="aspect-ratio:320/386;" src="3_Tables_image.png" width="320" height="386"></figure> <figure class="image image-style-align-right"><img style="aspect-ratio:320/386;" src="3_Tables_image.png" width="320" height="386"></figure>
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). 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).
The following options can be adjusted: The following options can be adjusted:
@ -79,7 +79,25 @@ The cell will immediately update to reflect the changes, but the _Save_ button m
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. 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.
## Tables with invisible borders ## Table borders
By default, tables will come with a predefined gray border.
To adjust the borders, follow these steps:
1. Select the table.
2. In the floating panel, select the _Table properties_ option (<img src="14_Tables_image.png" width="21" height="21">).
1. Look for the _Border_ section at the top of the newly opened panel.
2. This will control the outer borders of the table.
3. Select a style for the border. Generally _Single_ is the desirable option.
4. Select a color for the border.
5. Select a width for the border, expressed in pixels.
3. Select all the cells of the table and then press the _Cell properties_ option (<img src="9_Tables_image.png" width="21" height="21">).
1. This will control the inner borders of the table, at cell level.
2. 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.
3. Repeat the same steps as from step (2).
### Tables with invisible borders
Tables can be set to have invisible borders in order to allow for basic layouts (columns, grids) of text or [images](Images.md) without the distraction of their border: Tables can be set to have invisible borders in order to allow for basic layouts (columns, grids) of text or [images](Images.md) without the distraction of their border:

View File

@ -1,5 +1,5 @@
# Script API # Script API
For [script code notes](../Scripting.md), Trilium offers an API that gives them access to various features of the application. tFor [script code notes](../Scripting.md), Trilium offers an API that gives them access to various features of the application.
There are two APIs: There are two APIs: