Lists & tables

Two elements cover the structured content that fills most documents: lists and tables. Both paginate cleanly, so a long list or a tall table simply continues on the next page.

Lists

<list> holds <item> children. The marker attribute chooses the bullet style; gap sets the space between items.

<list marker="bullet" gap="6px" size="13">
  <item>Bulleted by default.</item>
  <item>Each item can wrap onto several lines and the marker stays put in its
    gutter, hanging to the left of the text.</item>
  <item>Short and sweet.</item>
</list>

marker understands bullet (•, also spelled disc), dash (–), circle (○), square (▪), decimal (1. 2. 3.), lower-alpha (a. b. c.), upper-alpha, none, or any literal string you supply. Numbered lists can start anywhere with start:

<list marker="decimal" start="3" gap="6px" size="13">
  <item>This item is numbered 3…</item>
  <item>…because start said so.</item>
  <item>Four.</item>
</list>

An <item> can hold any content, not just text — nest a <vertical>, a <box>, even another <list> for sub-points. Tune the marker gutter with indent and its colour with marker-color; the full attribute list is on <list>.

Tables

<table> is a real grid: fixed and fractional columns, a header that repeats on every page, spanning cells, zebra striping, and configurable borders. You define the columns once, then fill in <row>s of <cell>s.

Columns

The columns attribute is a list of widths, separated by spaces or commas. Each is a fixed length (70px), a fractional weight (1*, 2*, or bare * for 1*) that shares the leftover width — the table's answer to flex — or auto, which sizes the column to its own content, shrinking only if the row would overflow.

<table columns="70px 1* 60px" cell-padding="6px"
       border="0.6px #b9c2d0" stripe="#f3f6fb">
  <header>
    <row background="#1b1a17" color="#ffffff">
      <cell bold="true">Region</cell>
      <cell bold="true">Note</cell>
      <cell bold="true" align="right">Units</cell>
    </row>
  </header>
  <row>
    <cell>North</cell>
    <cell>Coastal depots</cell>
    <cell align="right">128</cell>
  </row>
  <row>
    <cell>South</cell>
    <cell>Single warehouse</cell>
    <cell align="right">54</cell>
  </row>
  <row>
    <cell>East</cell>
    <cell>Two regional hubs feeding the metro area</cell>
    <cell align="right">203</cell>
  </row>
</table>

The middle column is 1*, so it absorbs the width the two fixed columns leave. Notice align="right" on the number cells and the <header> block — header rows repeat automatically if the table breaks across pages.

Borders and stripes

border is a small language: a width and colour, optionally followed by keywords that say where lines go — grid (all, the default), rows, cols, outer, none. So border="0.6px #b9c2d0 rows outer" draws horizontal rules and an outer frame but no vertical lines. stripe shades every second body row.

Spanning cells

colspan and rowspan merge cells, just like HTML. valign aligns a cell's content vertically — useful when a tall row sits beside a spanning cell.

<table columns="80px 1* 60px" cell-padding="6px" border="0.6px #ccc6b5">
  <row>
    <cell rowspan="2" valign="middle" background="#faf6ed" bold="true">North</cell>
    <cell>Coastal depots</cell>
    <cell align="right">128</cell>
  </row>
  <row>
    <cell colspan="2" background="#f3f6fb">Inland hubs — this cell spans the last two
      columns of its row.</cell>
  </row>
</table>

Cells take the text attributes you already know (bold, italic, align, color, font, size), plus background for a one-off cell fill — and the full style: box model if you need borders or padding on a single cell. The complete grid reference, including how tall rows split across pages, is on <table>.

Next, the visual elements: shapes and images.