> For the complete documentation index, see [llms.txt](https://ampersandtarski.gitbook.io/documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ampersandtarski.gitbook.io/documentation/the-language-ampersand/services/layout-of-user-interfaces.md).

# Layout of user interfaces

Ampersand is meant for back-end design. It offers no features for front-end design. For that purpose we advise you use contemporary front-end tools for web-based applications. Your Ampersand application is [designed to be adaptable](/documentation/architecture-of-an-ampersand-application.md), especially for this purpose.

However, Ampersand offers a few layout features that let you place items. It has three built-in layout options, [colums](/documentation/the-language-ampersand/services/layout-of-user-interfaces.md#column-layout), [rows](/documentation/the-language-ampersand/services/layout-of-user-interfaces.md#row-layout) and [tabs](/documentation/the-language-ampersand/services/layout-of-user-interfaces.md#tabular-layout), which you can mix freely.

## Table layout

The column layout uses `BOX <TABLE>` to instruct the front-end application to use a tabular layout in user interfaces. Here is an example of a service, which uses the table layout.

```
INTERFACE Overview : "_SESSION"                  cRud
BOX <TABS>
     [ Students : V[SESSION*Student]             cRuD
       BOX <TABLE>
                [ "Student" : I[Student]         cRud
                , "Enrolled for" : isEnrolledFor cRUD
                , "Course" : takes CRUD
                ]
     , Course : V[SESSION*Course]                cRuD
       BOX <TABLE>
                [ "Course" : I                   cRud
                , "Modules" : isPartOf~          CRUD
                ]
     , Modules : V[SESSION*Module]               cRud
       BOX <TABLE>
                [ "Modules" : I                  cRuD
                , "Course" : isPartOf            cRUd
                , "Students" : isEnrolledFor~    CRUD
                ]
     ]
```

This service shows three columns in the user interface, **Students**, **Course** and **Modules**. The first column is not readable, because the [CRUD annotation](/documentation/the-language-ampersand/services/crud.md) blocks this column for reading. It would have shown students in each row, because the target of `V[SESSION*Student]`is `Student`. The second column shows courses in two columns, **Course** and **Modules**. The third column shows modules in three columns. This is what the user will see on the screen.

![Column-oriented layout of a user interface with columns in each row](https://3502282321-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9s__kkYiQvvyW5CKOk%2F-LKg2Ld-ppc_kxXCDZ7J%2F-LKg5cmNAo5GWNz8zkd_%2FCOLS%20layout%20example.png?alt=media\&token=eaa22cc7-3df4-47ea-8632-adcc83127afb)

## ROW layout

The row layout uses  `BOX <FORM>` to instruct the front-end application to layout the user interface row by row. Here is an example of a service, which uses the row layout on the top level.

```
INTERFACE Overview : "_SESSION"                  cRud
BOX <FORM>
     [ Students : V[SESSION*Student]             cRuD
        BOX <FORM>
                [ "Student" : I[Student]         CRUD
                , "Enrolled for" : isEnrolledFor cRUD
                , "Course" : takes               CRUD
                ]
     , Course : V[SESSION*Course]                CRUD
        BOX <FORM>
                [ "Course" : I                   cRud
                , "Modules" : isPartOf~          CRUD
                ]
     ]
```

This service shows three rows in the user interface, **Students**, **Course** and **Modules**. The first column shows students in each of its rows. Each student is shown in the column layout. The second row shows courses in two columns, **Course** and **Modules**. Please read about [templates](https://github.com/AmpersandTarski/prototype/tree/master/templates) if you are curious which other ways of displaying information there are besides `BOX <FORM>`.  Please read the [explanation of CRUD annotations](/documentation/the-language-ampersand/services/crud.md) if you are curious about the CRUD annotations. This is what the user will see on the screen.

![Row-oriented layout of a user interface with columns in each row](https://3502282321-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9s__kkYiQvvyW5CKOk%2F-LKg2Ld-ppc_kxXCDZ7J%2F-LKg5oPTfmHEVZp2QhOn%2FROWS%20layout%20example.png?alt=media\&token=f8fdf4de-ea18-45a3-a89e-7c0a539342a5)

## Tabs layout

The column layout uses `BOX <TABS>` to instruct the front-end application to tabs in the user interface. Here is an example of a service, which uses the column layout.

```
INTERFACE Overview : "_SESSION"                  cRud
BOX <TABS>
     [ Students : V[SESSION*Student]             cRuD
        BOX <TABLE>
                [ "Student" : I[Student]         CRUD
                , "Enrolled for" : isEnrolledFor cRUD
                , "Course" : takes CRUD
                ]
     , Course : V[SESSION*Course]                CRUD
        BOX <TABLE>
                [ "Course" : I                   cRud
                , "Modules" : isPartOf~          CRUD
                ]
     , Modules : V[SESSION*Module]               cRud
        BOX <TABLE>
                [ "Modules" : I                  cRuD
                , "Course" : isPartOf            cRud
                , "Students" : isEnrolledFor~    CRUD
                ]
     ]
```

This service shows three tabs in the user interface, **Students**, **Course** and **Modules**. Only one tab is shown at a time, to avoid cluttered data. This is what the user will see on the screen.

![Tab-oriented layout with column layout in tab "Modules"](https://3502282321-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9s__kkYiQvvyW5CKOk%2F-LKfo_seub_7cB6mYdOi%2F-LKg-imWJZR35HVyf4Gw%2FUntitled.png?alt=media\&token=64d7e035-37ee-442b-b6f8-104262831a31)

We have discussed the `COLS`, `ROWS`, and `TABS` layout options. Please note that these options do not change the semantics; whatever your options, Ampersand displays the same data in the same fields.

If these options are not enough, you can [enhance your application with your own layouts](/documentation/the-language-ampersand/services/layout-of-user-interfaces/your-own-widgets-html-and-css.md).