Tables & Stat Blocks

Beginner · 5 min read · By Chitmunk Team · Updated May 11, 2026

Overview

Tables are a natural fit for card games. Stat blocks showing attack, defense, and health values. Score reference charts. Ingredient lists. Equipment grids. Chitmunk's table element lets you add structured data grids directly to your card designs, no need to fake it with carefully aligned text boxes and rectangles.

Tables resize, recolor, and bind to CSV data just like other Chitmunk elements, so each card in your deck can display different stats from your spreadsheet.

Adding a Table

To add a table to your card:

1. Click the Table button in the tool strip (left edge of the canvas).
2. A default table element appears on the canvas with sample rows and columns.
3. Select the table and use the properties panel on the right to configure its structure and appearance.

The table is added as a single element that you can move, resize, and rotate like any other element. Resizing the table automatically adjusts column widths and row heights proportionally.

Configuring Rows and Columns

In the properties panel, you can control the table's structure:

• Rows: Set the number of rows using the row count field. All rows share equal height across the table.
• Columns: Set the number of columns similarly. Columns are evenly spaced across the table's total width; there's no per-column width control yet.

To edit a cell's content, double-click the cell directly on the canvas, or select the table and edit cell values in the properties panel's data grid.

Header Row Styling

Most stat blocks and data tables benefit from a visually distinct header row. Chitmunk makes this easy:

• Toggle header row: In the properties panel, enable the Header Row toggle. The first row is then styled differently from the data rows.
• Header background color: Set a distinct background color for the header row, a darker shade of your card's color scheme works well.
• Header text color: Set the text color for header cells independently from data cells. White text on a dark header is a common choice.
• Header font weight: The header row always renders in bold; this isn't currently adjustable.

Cell Data and CSV Binding

Table cells support the same {{Column Name}} template syntax as text elements. This means you can bind individual cell values to your CSV data, and each card in your deck will display different stats.

For example, a stat block table might have:

• Header row: ATK | DEF | HP
• Data row: {{Attack}} | {{Defense}} | {{Health}}

When you import a CSV with Attack, Defense, and Health columns, each card automatically shows that row's values in the table. Use the card navigator to preview different rows and verify the data is correct.

You can also mix static text and template variables in the same cell, for example, {{Attack}} dmg would display "5 dmg" if the Attack column contains 5.

Alternating Row Colors

Alternating row colors (sometimes called "zebra striping") make tables easier to read, especially on small cards where rows are close together. Chitmunk applies this automatically — there's no on/off toggle:

1. Select the table element.
2. In the properties panel's Table Colors section, set Cell BG and Alt Rows. These two colors alternate automatically down the data rows.
3. A subtle contrast between the two is usually enough, for example, white and a very light gray. Set them to the same color to remove the striped look.

The header row (if enabled) uses its own color and is not affected by the alternating pattern. Alternation starts with the first data row after the header.

Font and Border Customization

Tables share some typography controls with text elements, though options are more limited:

• Font size: Set one base font size shared by header and data cells.
• Text color: Set the default text color for data cells; the header uses its own Header Color field.

Cell text always renders left-aligned in the current build — there's no per-column alignment control, and font family is fixed at table creation rather than user-selectable.

For borders, the properties panel offers:

• Border color: The color of the lines between cells and around the table edge.
• Border width: The thickness of cell borders in pixels, applied uniformly to every cell. Set to 0 to remove all borders for a cleaner look.