> For the complete documentation index, see [llms.txt](https://cardstock-studio.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cardstock-studio.gitbook.io/docs/design/templates-design-your-cards/layers/table.md). # Table

Quickly create customizable **Tables** with the ability to add any content into cells, styled as you'd like, with styling for row/column borders, and the table as a whole. Add a new "Table" layer to get started. *** ## Adding Rows & Columns

In the Table component, add or remove columns and rows. If you remove a row with content, the content will be deleted, but you can undo this operation.

Rows are added at the bottom, columns added on the right. The pivot determines how the table grows. In this example, the pivot is "Top" / "Center". Adding rows will expand the table down, while adding columns expands evenly left and right due to the centered pivot. *** ## Table Layer Details The Table comes with child layers. One layer for each cell (top left is "Cell 1,1"), and one layer for each row and column border, left to right, top to bottom. These layers are used to hold content (cell layers) and to style the layers, such as changing the color of the column or row borders. ### Cell Size The Table component can *Fit Cell to Content*, which will automatically set the width and height of the cells to match the greatest in the row or column. Otherwise, you can set the width and height directly. ### Cell Padding

Padding on all four sides can be adjusted independently. ### Grid Line Size Vertical grid lines, and horizontal grid lines can have their thickness increased on the Table level. However, lines can each have additional styling applied if you choose, by adding components to the Row and Column "Line" layers. You can also choose to have "Dashed" lines, and then set the length of those lines. ### Mask Cells By default, cells are masked, so content within them is contained to the bounds of the cell + padding. You can turn this off.

*** ## Styling Cells By default, a Cell layer has no components, and is fully transparent. If you'd like add color to the cell background, add a Rectangle component, and then you can add a Fill or other fill components.

Any components added will affect the cell. Below, a [3D Lift](/docs/design/templates-design-your-cards/components/3d-lift.md) was added to the "Converters" cell.

*** ## Adding Content to Cells Any layers added as a child to the Cell layer will display within the cell, and act as normal. Simply add a new layer as a child of a Cell layer.

*** ## Styling Grid Around a Single Cell The built-in styling handles entire row/column grid lines. The cell can overlay its own border on top of those grids. Add a Outline onto the cell layer.

Set the Outline *Position* to "Inside", so that it covers the grid line fully. If your grid lines are thicker, you will need to adjust the values and perhaps the *Position* to "Middle". --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://cardstock-studio.gitbook.io/docs/design/templates-design-your-cards/layers/table.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.