Table

Create simple tables for displaying content in a nice, orderly and responsive fashion. Use standard text for your table cells, or opt to have drop zones for other Foundry tools, such as images.

Examples

Here we've create a simple table to showcase some of the default settings of the Table tool. Being a complex tool consisting of a great many settings gives you a good deal of control over your table layout and design.

AliasFirst NameLast Name
Green LanternHalJordan
Wonder WomanDianaPrince
SupermanClarkKent
CatwomanSelinaKyle
BatgirlBarbaraGordon
Shazam!BillyBatson
BatmanBruceWayne
BatwomanKateKane

We do not follow maps to buried treasure, and X never, ever marks the spot.

Tables are a great way to organize information in a well ordered way for your visitors. The Table tool makes it easy for you to build these organizational elements, and this latest version adds a slew of new features – including the ability to add other Foundry tools into drop zones within your table cells! Bring in images, buttons, and more!

Settings

Parent Tool

Edit Mode

Edit Mode Title

Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.

General

Include Base Margin

When enabled a preset margin will be added to the base of the tool. Foundry allows you to configure the Base Margin preset to your liking within the Control Center. The Base Margin can be configured independently at each of the 6 responsive breakpoints.

Formatting / Layout

Extra Rows

In addition to the rows that you can add manually within Edit Mode, we also provide the ability here in the settings to include a Header and Footer row in the Table. You can choose to toggle one or both of these one here.

Borders

This setting provides you the ability to choose how borders are applied to the table on the whole. You can choose to have a border applied to the entirety of the Table, placing borders on all sides of the tables, rows and cells, or opt to have a border applied just to the top and bottom of each row. Additionally you have the ability to choose None which turns off all borders.

Overall Border

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the overal border of the Table. You're also provided an option to choose a custom one-off color as well.

Dividers

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the borders between the body of the Table and its header and / or footer sections. You're also provided an option to choose a custom one-off color as well.

Compact Cells

Enabling this feature will create a more compact look to the table on the whole, removing a good deal of the padding with all cells in the table.

Styling: Table Header

Alignment (Uniform)

This setting allows you to align the header cell contents to the left, center or right. In Uniform mode this alignment will be set the same for all 6 breakpoints.

Alignment (Non-Uniform)

Clicking on the small + icon will give you the ability to adjust the alignment of the contents independently at each of the 6 responsive breakpoints giving you more granular control.

Background

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the background of the Table header. You're also provided an option to choose a custom one-off color as well.

Text

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the text within the Table header. You're also provided an option to choose a custom one-off color as well.

Hover Styling for Header Cells

When enabled you can provide additional styling for the background and text elements in the Table's header when the visitor hovers over the cells within it.

Hover Background

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the background of the Table header cells when hovered over. You're also provided an option to choose a custom one-off color as well.

Hover Text

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the text within the Table header cells when hovered over. You're also provided an option to choose a custom one-off color as well.

Styling: Table Body

Alignment (Uniform)

This setting allows you to align the button to the left, center or right of its parent container. In Uniform mode this alignment will be set the same for all 6 breakpoints.

Alignment (Non-Uniform)

Clicking on the small + icon will give you the ability to adjust the alignment of the button independently at each of the 6 responsive breakpoints giving you more granular control.

Odd Rows

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the background of the odd numebred rows within the Table. You're also provided an option to choose a custom one-off color as well.

Even Rows

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the background of the even numebred rows within the Table. You're also provided an option to choose a custom one-off color as well.

Text

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the text for both odd and even rows within the Table. You're also provided an option to choose a custom one-off color as well.

Hover Styling for Rows

When enabled you can provide additional styling for the background and text elements in the Table's header when the visitor hovers over the cells within it.

Hover Row Background

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the the background of the Table rows when hovered over. You're also provided an option to choose a custom one-off color as well.

Hover Row Text

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the the text within the Table rows when hovered over. You're also provided an option to choose a custom one-off color as well.

Styling: Table Footer

Alignment (Uniform)

This setting allows you to align the button to the left, center or right of its parent container. In Uniform mode this alignment will be set the same for all 6 breakpoints.

Alignment (Non-Uniform)

Clicking on the small + icon will give you the ability to adjust the alignment of the button independently at each of the 6 responsive breakpoints giving you more granular control.

Background

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the background of the Table footer. You're also provided an option to choose a custom one-off color as well.

Text

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the text within the Table footer. You're also provided an option to choose a custom one-off color as well.

Hover Styling for Footer Cells

When enabled you can provide additional styling for the background and text elements in the Table's footer when the visitor hovers over the cells within it.

Hover Background

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the background of the Table footer cells when hovered over. You're also provided an option to choose a custom one-off color as well.

Hover Text

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the text within the Table footer cells when hovered over. You're also provided an option to choose a custom one-off color as well.

Caption

Include Caption

Enabling this feature adds a small caption to the bottom of the table.

Caption

Here is where you enter your optional caption text.

Alignment (Uniform)

This setting allows you to align the button to the left, center or right of its parent container. In Uniform mode this alignment will be set the same for all 6 breakpoints.

Alignment (Non-Uniform)

Clicking on the small + icon will give you the ability to adjust the alignment of the button independently at each of the 6 responsive breakpoints giving you more granular control.

Caption

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the text of the caption. You're also provided an option to choose a custom one-off color as well.

Advanced

Make Table Sortable

Enabling this feature will allow your visitors to click the table cells to sort the Table's content based on the column they click. Clicking once sorts the table in ascending order, and clicking it a second time sorts it in descending order.

Show Sort Arrows

When using the "Make Table Sortable" feature, you can enable this option to add a sorting icon next to the header text of the column that is being used to sort the Table. The icon will be either a down or up arrow depending on whether the Table is being sorted in ascending or descending order.

HTML Comment

HTML Comment

Enabling this feature adds an HTML comment to the exported code to indicate the name of the tool being used here. This is helpful to both yourself and others when troubleshooting, or inspecting the code. This is enabled by default.

Custom

This field allows you to replace the default HTML Comment with your own text.

CSS

Classes

Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.

Child Items - Cell

Cell Structure

Mode

By default we use the traditional text-base mode for each cell. This is what most users will make use of most often. Additionally though we have a secondary mode called Drop Zone which allows you to insert other Foundry-based tools within an individual cell, allowing you a great deal of versaility at a granular level.

Column Span

This setting allows you to decide how many columns wide this one individual cell will span. By default a cell will span just one single column width. You can alter this here to make it take up more space within the table in the horizontal direction.

Row Span

This setting allows you to decide how many rows deep this one individual cell will span. By default a cell will span just one single row height. You can alter this here to make it take up more space within the table in the vertical direction.

Vertical Align

Here you can adjust the vertical alignment of the content within an individual table cell.

Cell Style Overides

Enable Alignment Overrides

Enabling this feature allows you to change the alignment settings for an individual cell within the table.

Alignment (Uniform)

This setting allows you to align the content to the left, center or right of the cell. In Uniform mode this alignment will be set the same for all 6 breakpoints.

Alignment (Non-Uniform)

Clicking on the small + icon will give you the ability to adjust the alignment of the content independently at each of the 6 responsive breakpoints giving you more granular control.

Background

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the background of a single individual cell within the table. You're also provided an option to choose a custom one-off color as well.

Text

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the text of a single individual cell within the table. You're also provided an option to choose a custom one-off color as well.

Hover Background

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the background of a single individual cell within the table when hovered over. You're also provided an option to choose a custom one-off color as well.

Hover Text

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the text of a single individual cell within the table when hovered over. You're also provided an option to choose a custom one-off color as well.

CSS

Classes

Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.