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.
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.
Alias | First Name | Last Name |
---|---|---|
Green Lantern | Hal | Jordan |
Wonder Woman | Diana | Prince |
Superman | Clark | Kent |
Catwoman | Selina | Kyle |
Batgirl | Barbara | Gordon |
Shazam! | Billy | Batson |
Batman | Bruce | Wayne |
Batwoman | Kate | Kane |
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!
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Enabling this feature adds a small caption to the bottom of the table.
Here is where you enter your optional caption text.
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.
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.
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.
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.
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.
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.
This field allows you to replace the default HTML Comment with your own text.
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.
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.
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.
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.
Here you can adjust the vertical alignment of the content within an individual table cell.
Enabling this feature allows you to change the alignment settings for an individual cell within the table.
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.
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.
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.
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.
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.
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.
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.