Tables & Stat Blocks

Beginner · 5 min read

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 or the +/- buttons. Add rows for more data entries.
• Columns: Set the number of columns similarly. Each column can have an independent width.
• Column widths: Drag the column dividers in the table element to adjust relative widths, or enter precise pixel values in the properties panel.
• Row heights: Rows auto-size to fit their content by default, but you can set a fixed height if you prefer uniform rows.

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 defaults to bold, but you can change this in the font settings.

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. To enable this:

1. Select the table element.
2. In the properties panel, enable the Alternating Colors toggle.
3. Set the even row color and odd row color. A subtle contrast between the two is usually enough, for example, white and a very light gray.

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 the same typography controls as text elements:

• Font family: Choose from 1,000+ Google Fonts or your uploaded custom fonts.
• Font size: Set the base font size for all cells. The header row can optionally use a different size.
• Text alignment: Align cell text left, center, or right. You can set alignment per-column for a polished look (labels left-aligned, numbers right-aligned).
• Text color: Set the default text color for data cells.

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. Set to 0 to remove borders entirely for a cleaner look.
• Outer border: Toggle the border around the entire table independently from the inner cell dividers.