How to use different colors to visually separate each connected table inside the same form

To visually separate connected tables inside the same form, assign a different background color to each connected table block — each section gets its own visual identity, making it easier to tell one type of information apart from another.

Why does color segmentation make a difference?

Forms with several connected tables at once — like reimbursements, reviews, and time records for an employee — can look visually confusing if every block looks the same. Different colors help the eye quickly identify where each type of data starts and ends.

This is particularly useful on cards that gather a lot of information about the same person or process, keeping the user from getting lost scrolling through the screen.

How to apply different colors

  1. Open the edit view of the super form that contains the connected tables.
  2. Add each table as a separate block, instead of grouping them all in the same component.
  3. Set a distinct background color for each block.
  4. Rearrange the block order based on the reading priority you want.

Element Function
Connected table block Groups a specific type of data
Block background color Visually differentiates each section

Why choose Jestor

  • Support for multiple connected tables inside a single form or card.
  • Per-block color customization, with no limit on how many tables you display.
  • Direct editing of connected records without leaving the main form.

FAQ

Can I have more than two connected tables with different colors?

Yes, there's no fixed limit — each block can get its own background color.

Do I need to recreate the table to change its color later?

No, just edit the existing block and adjust the color whenever you want.

Does this organization also work on cards, not just forms?

Yes, the same connected table mechanism applies to both cards and forms. See more at jestor.com.

Reference video

Get to know Jestor

With Jestor, you can automate workflows, connect teams, and build internal systems your way — all without code and powered by AI. Discover Jestor at jestor.com and see how to take your company's operations to a new level of efficiency and control.

Read more