Keyboard shortcuts

Press or to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Tables

V1 supports general data tables inside a frame. A table is different from the <grid> layout primitive and from relational database entities.

Pipe syntax

Use a GFM-like header, separator, and data rows:

<table id="services" title="Services">
  | Service | Role     | Port |
  |:--------|:---------|-----:|
  | API     | Backend  | 8080 |
  | DB      | Database | 5432 |
</table>

Separator colons select left, center, or right alignment. Every row must have the same number of cells. Cell text is plain text; escape a literal pipe as \|.

Colors and fonts

Style a pipe table from the <table> tag. Header-specific attributes begin with header-:

<table id="services" title="Service Inventory"
       color="#172033" background-color="#ffffff" border-color="#94a3b8"
       font-family="nunito" font-size="16"
       header-color="#ffffff" header-background-color="#2563eb"
       header-font-family="cascadia" header-font-size="18">
  | Service | Role    | Port |
  |:--------|:--------|-----:|
  | API     | Backend | 8080 |
</table>

color, background-color, and border-color accept #RRGGBB or transparent. font-family accepts virgil, helvetica, cascadia, assistant, excalifont, nunito, lilita-one, comic-shanns, or liberation-sans. font-size is a positive layout-pixel value.

Styles inherit in the order table, then header or row, then cell, with the most specific value winning. Tagged rows and cells can therefore override the table defaults:

<row background-color="#f8fafc">
  <cell color="#dc2626" font-family="helvetica">Warning</cell>
  <cell>Retry required</cell>
</row>

Tagged syntax

Use tags when rows or cells need stable IDs or individual attributes:

<table id="services" title="Services">
  <header>
    <cell>Service</cell>
    <cell>Role</cell>
    <cell align="right">Port</cell>
  </header>
  <row id="worker">
    <cell>Worker</cell>
    <cell>Background jobs</cell>
    <cell align="right">9000</cell>
  </row>
</table>

align accepts left, center, right, or a normal vertical-horizontal alignment such as middle-right. A table may combine one pipe header and its rows with additional tagged rows. It may not define a second tagged header.

Both forms are normalized to the same V1 table rows and cells before layout. Malformed separators, inconsistent column counts, duplicate headers, unknown children, and empty rows are positioned validation errors.

File imports

CSV, TSV, JSON, and YAML files can be loaded relative to the .xal input file. Declare reusable data under the canonical <data> tag and reference it from one or more frames:

<data>
  <table-data id="services" src="services.csv" />
</data>
<frames>
  <frame id="inventory">
    <table data="services" title="Service Inventory" />
  </frame>
</frames>

The format is inferred from the extension or selected with format="csv", tsv, json, yaml, or yml. CSV and TSV require a header row. JSON and YAML require a top-level array of objects; their union of keys is sorted to produce deterministic columns. A one-off import may use <table src="services.csv" /> directly.

Import paths must be relative and remain inside the caller-supplied import filesystem. Inline rows cannot be combined with data or src. Both xaligo validate and xaligo render resolve CLI imports relative to the input .xal file.

See the table example and import example for complete documents.