Table
Create simple text tables for displaying content in a nice, orderly and responsive fashion.
- Add headers, rows and cells to your table with ease.
- Create normal or compact tables to save space.
- Easily edit and rearrange rows and cells.
- Style header, rows and even cells independently.
- Assign a row's cell to be a header cell.
- Please Note: Features on this page marked with the purple moon icon are compatible with Foundry's Dark Mode.
Example
| Alias | First Name | Last Name |
|---|---|---|
| Spider-Man | Peter | Parker |
| Iron Man | Tony | Stark |
| Captain America | Steve | Rogers |
| Ms. Marvel | Carol | Danvers |
| She-Hulk | Jennifer | Walters |
| Winter Soldier | Bucky | Barnes |
Using Table
General
Remove Base Margin
Allows you to disable the preset standard spacing that is applied to the bottom of the Table stack.
Compact Table
Allows you to shrink up the padding of the header and table cells to make the table more compact and take up a little less space.
Outer Border
Enable to add a border around the outside of the table as well as insert vertical borders within rows.
Enable Sortable Columns
Allow visitors to click column headers to sort the table data based off of the content within that column.
Header
Alignment
Choose whether you’d like your table’s header content to be aligned to the left, center or right side of the header cells.
Custom Border Color
Set a custom border color for the border that is between the header and the body of the table.
Header Style
Set the colors of the table header to match your site using one of Foundry’s color swatch presets or make use of custom color pickers.
Sorted Header Colors
Assign a background and foreground color for headers that have been clicked on for sorting.
Content
Alignment
Choose whether you’d like your table’s content to be aligned to the left, center or right side of the row cells.
Rows
Stripe Rows
Use this feature to apply a background color to every other row.
Highlight with Hover
When enabled each row will be highlighted when hovered over.
Style
Border Color
Set the border color for your table using a custom color picker.
Advanced
Collapse Cells in Edit Mode
Turning this feature on will hide the contents of the cells while in Edit Mode. This allows you to save a little space when you’re not editing your Table’s contents.
Show Cells Inline in Edit Mode
A more compact way of viewing your table cells in Edit Mode.
Header
Custom Border Color
Use to define the color of the bottom border of the Header row using a custom color picker.
Header Style
Choose to use one of Foundry’s color presets to define the background of the Header row, or use a custom color picker to set the background and text colors using the color picker.
Header Cell
Span
Chose how many columns a particular header cell should span.
Alignment
Choose to override the alignment for each individual header cell, or allow the table’s default to be inherited.
Cell Style
Choose to use one of Foundry’s color presets to define the background of the Header row, or use a custom color picker to set the background and text colors using the color picker.
Row
Row Style
Choose to use one of Foundry’s color presets to define the background of the Row, or use a custom color picker to set the background and text colors using the color picker.
Alignment
Choose to override the alignment for each individual row, or allow the table’s default to be inherited.
Row Cell
Header Cell
Enabling this feature applies the Header styling to a cell. This can be used for setting up a vertical header at the front or end of a row.
Span
Chose how many columns a particular row cell should span.
Alignment
Choose to override the alignment for each individual row cell, or allow the table’s default to be inherited.
Cell Style
Choose to use one of Foundry’s color presets to define the background of the Header row, or use a custom color picker to set the background and text colors using the color picker.
Link
You may opt to add a link to a cell’s contents. The entirety of the cell’s contents will be linked.
Sortable Content
The content within a column can be sorted in ascending or descending order. Simply click the header of a column to sort it. Clicking again will sort it in the reverse order.