Table of Contents

After creating your table app, it will need styles applied to make it more readable and to match with marketing requirements.

Click the Styles tab.

Apps are not automatically styled when they are created as there are a number of options for how styles can be applied.

If you have created a styling Theme for your Kurtosys App client, this is applied during the embed process by referencing the name of the theme key in the div section of the body.

Style Keys

Depending on the styles required for your document or website, you will most likely have a small number of different table styles to create.

It is best practice to therefore create Style Keys so the styles can be set up once, and then used for as many tables as needed.

There are a multitude of ways to style a table, the examples below include the most common requests.

Table Title and Subtitle

1. With the Styles tab selected, click + at the top of the left pane to create a new style key.
2. Name – give the style key a name.
3. Style to Clone – select default from the dropdown list. (If the style key is going to be based on an existing style key, select the appropriate item from the dropdown list.
4. Click Save.

5. Click Theme.
6. Click Add Element+.

7. Select Base.
8. Click Save.
9. Click Base.

10. Click Add Element+.
11. Scroll down or search to select Card.
12. Click Save.

13. Click Card.
14. Click Add Element+.

15. Select Children.
16. Click Save.
17. Click Children.

18. Click Add Element+.
19. Select Title (and Subtitle if you have one).
20. Click Save.

21. Click Title.
22. Click Add Element+.

23. Scroll down or search to select Font.
24. Click Save.
25. Click Font.

26. Click Add Element+.
27. Select Family and Size.
28. Click Save.

29. Type in a Family, e.g. Arial.
30. Type in a font Size.

The preview update immediately.

31. Click Save.

Repeat steps 21 to 31 for Subtitle

32. Type in a comment, then click Confirm.

Table Layout and Column Width

1. Browse to Styles | Theme | Base.
2. Click Add Element+.
3. Scroll down to select Table.
4. Click Save.

5. Click Table.
6. Click Add Element+.

7. Select Children.
8. Click Save.
9. Click Children.

10. Click Add Element+.
11. Scroll down or type in the search bar, select Wrapper.
12. Click Save.

13. Click Wrapper.
14. Click Add Element+.

15. Scroll down or type in the search bar, select Overrides. Overrides allow you to target an html element using the html name for that element in the Style config.
16. Click Save.
17. Click Overrides.

18. Click Add Row+.
19. Click 1. No Label.

20. Selector – type in table – this refers to the name of the html element that the overrides will be applied to which in this case will be the whole table.
21. Component Style* – click + Create Component Style*.
22. Click Add Element+.

23. Scroll down or type in the search bar, then select Table Layout and Width.
24. Click Save.

25. Table Layout – select fixed from the dropdown list to set each column to an equal width.
26. Width – type in 100% for the table to stretch across the whole page.
27. Click Save.
28. Type in a comment, then click Confirm.

Your table display will update immediately.

Text Alignment

In the screenshot above, you will note that the header-row text is center-aligned and the table-body text is left-aligned.

1. In the left navigation pane, browse down to Children.
2. Click Add Element+.
3. Select Cell, then click Save.

4. Click Cell.
5. Click Add Element+.

6. Scroll down or use the search bar, then select Text.
7. Click Save.
8. Click Text.

9. Click Add Element+.
10. Select Align, then click Save.

11. Use the dropdown arrow to select center for the alignment. Your table display will update immediately.
12. Click Save.
13. Type in a comment, then click Confirm.

Fonts

Global Font

If your table is using the same style font style and size for table header rows as well as table body rows, you can set the style for the whole table.

1. In the left navigation pane, browse to Table.
2. Click Add Element+.
3. Scroll down or use the search bar to select Font.
4. Click Save.

5. Click Font.
6. Click Add Element+.

7. Select Family. (Also select Size if header rows and body rows will be the same font size.
8. Click Save.
9. Type in a font Family to use, e.g. Arial. The table will update immediately.
10. Click Save.
11. Type in a comment, then click Confirm.

Different Header Row and Body Row Fonts

If your table header rows use different fonts to your table body rows, you will need to set this up differently.

1. Browse to Children.
2. Click Add Element+.
3. Select Head Cell.
4. Click Save.

5. Click Head Cell.
6. Click Add Element+.

7. Scroll or use the search bar to select Color and Font.
8. Click Save.

9. Type in a color name or hex code. The table will update immediately.
10. Click Font.
11. Click Add Element+.

12. Select Family and Size.
13. Click Save.
14. Type in the name of a font family, e.g. Arial.
15. Type in a font size.

16. Click Cell in the left navigation pane.
17. Click Add Element+.
18. Scroll down or use the search bar to select Color.

19. Scroll down or use the search bar to select Font.
20. Click Save.
21. Type in a color name or a hex code.
22. Click Font.

23. Click Add Element+.
24. Select Family and Size.
25. Click Save.

26. Type in a font family name, e.g. courier.
27. Type in a font size.
28. Click Save.
29. Type in a comment, then click Confirm.

Alternating Row Shading

A common request is to have alternating row shading, to do this follow these steps. This generally does not include Header rows, only body rows.

1. Browse to Children, then click Add Element+.
2. Scroll down or use the search bar to select Row.
3. Click Save.

4. Click Row.
5. Click Add Element+.

6. Scroll down or use the search bar to select Selectors. Selectors are used for more complicated styling where the same style is not applied to every element of the same type.
7. Click Save.
8. Click Selectors.

9. Click Add Element+.
10. Select any Component Style. You will need to update this using the JSON config. (Or type the name of the selector into the search field if you know it.)
11. Click Save.

12. Click the <> JSON icon.
13. The CSS code placeholder specified here will need to reference every odd row which translates to “nth child” in CSS, with a parameter to define nth as “odd”.

14. Change the red text placeholder, e.g. “:-moz-placeholder”:{} to “:nth-child”: {}.
15. Press Enter with your cursor in the middle of the {} (curly brackets) to create a new line.

16. Press Shift+Spacebar for a code suggestion list, then select _parameters.
17. This opens square brackets for an array, type in “odd” (including the quotation marks), this will reference every odd-numbered row in the table.

18. Type a , (comma) after the closing square bracket, then press Enter.
19. Press Shift+Spacebar then select background from the code suggestion list.

Complete the task using the UI

1. Click the notepad icon to return to the UI.
2. Click ParameteredSelector.
3. Click Background to re-access the background element.

4. Click Add Element+.
5. Select Color, then click Save.

6. Type in a color name or hex code, or if the color needs to have opacity applied which is very likely for a shaded row , use a rgba code the opacity as a decimal at the end, e.g. rgba(32,178,170,0.5).
7. Click Save.
8. Type in a comment, then click Confirm.

Complete the task using JSON

1. Press Enter with your cursor in the middle of the {} (curly brackets).
2. Press Shift+Spacebar then select color from the code suggestion list.

3. Type in a color name or a hex code, or if the color needs to have opacity applied which is very likely for a row background color, use a rgba code with the opacity as the last number in decimal format, e.g. rgba(32,178,170,0.5) where 0.5 translates to 50% opacity..
4. Click Save.
5. Type in a comment then click Confirm.

Table Row Borders

1. Browse to Children | Cell then click Add Element+.
2. Scroll down or use the search bar to select Border.
3. Click Save.

4. Click Border.
5. Click Add Element+.

6. Scroll down or use the search bar to select Color, Style and Width.
7. Click Save.
8. Enter a Color, e.g. black.
9. Use the dropdown arrow to select a Style, e.g. solid.
10. Enter a Width, e.g. 1px.
11. Click Save.

12. Type in a comment, then click Confirm.