Tables
If you have data that you want to display in columns, you can manually draw it in the editor, but it becomes difficult when you need to add columns or rows afterwards. With the table element, you can create a table that is easy to modify, reusable on mobile, and accessible for readers with disabilities.
Within the constraints of the HTML table element, you can customise the table to match your own branding as much as possible using the Maglr Pro editor.
When you drag a new table element onto the canvas, you get a default 3x2 table with a header. You can expand this table by adding extra rows or cells. Using the tab key, you can automatically add rows, but if you want to plan the layout in advance, you can do so via the context menu.
A table can have horizontal or vertical headers, which describes the content of the underlying rows and cells. You can convert a row or column into a header using the context menu. A header is important for accessibility but can also be styled separately.
The table we initially place has a basic style. Through the "styling" menu in the sidebar, you can color each component of the table differently.
By default, we provide the basic options (black/white). If you want to have more extensive styling options for the table, you can expand the "advanced styling" section. When applying styles, pay attention to the hierarchy. Styles can override each other. The "table" is the base, and the "cell" is the final component.
To give one or more cells a different style, select the cells and apply a different typography or background through the right sidebar. This will overwrite all styles previously set through the 'table styling' options.
The width of a column is set to "auto" by default, meaning that the content determines the width. By hovering over the edges of a column in "edit mode," you can drag and change the width of the column. The width is set in pixels. Note that you may need to set this for each column. From that point on, the table (including its mobile version) maintains the same ratio.
A table formatted for desktop can also be applied to mobile. Similar to text, you cannot modify the content itself (unless you overwrite the entire element, which we discourage). However, you can override the styling. Typography can be made smaller along with the padding.
When using a table on mobile, it is important to enable the scrollbar. The content of the frame can then scroll horizontally or vertically. This, combined with the column widths, ensures that a user can view a table on a mobile device without issues.
Note: to enable a horizontal scrollbar on mobile, make sure to manually overwrite the width of the table's columns.
If you have a table with a lot of data, you can make the header "sticky" to keep it visible. The header remains fixed to the screen (horizontally or vertically) while scrolling through the rows of the table. This works when the table is fully placed on the page itself or when you make the table scroll within a smaller frame.
If you add multiple rows to a table, the height of the rows determines the final height of the table. By adding padding to a cell, you can create more white space between the rows.
If you want to make the content of a table fit the size of the selection frame, select the "Stretch table" option in the element settings panel.
Within the constraints of the HTML table element, you can customise the table to match your own branding as much as possible using the Maglr Pro editor.
Setting up a table
When you drag a new table element onto the canvas, you get a default 3x2 table with a header. You can expand this table by adding extra rows or cells. Using the tab key, you can automatically add rows, but if you want to plan the layout in advance, you can do so via the context menu.
Table header
A table can have horizontal or vertical headers, which describes the content of the underlying rows and cells. You can convert a row or column into a header using the context menu. A header is important for accessibility but can also be styled separately.
Table style
The table we initially place has a basic style. Through the "styling" menu in the sidebar, you can color each component of the table differently.
By default, we provide the basic options (black/white). If you want to have more extensive styling options for the table, you can expand the "advanced styling" section. When applying styles, pay attention to the hierarchy. Styles can override each other. The "table" is the base, and the "cell" is the final component.
Inline styling of cells
To give one or more cells a different style, select the cells and apply a different typography or background through the right sidebar. This will overwrite all styles previously set through the 'table styling' options.
Setting column width
The width of a column is set to "auto" by default, meaning that the content determines the width. By hovering over the edges of a column in "edit mode," you can drag and change the width of the column. The width is set in pixels. Note that you may need to set this for each column. From that point on, the table (including its mobile version) maintains the same ratio.
Tables on mobile
A table formatted for desktop can also be applied to mobile. Similar to text, you cannot modify the content itself (unless you overwrite the entire element, which we discourage). However, you can override the styling. Typography can be made smaller along with the padding.
When using a table on mobile, it is important to enable the scrollbar. The content of the frame can then scroll horizontally or vertically. This, combined with the column widths, ensures that a user can view a table on a mobile device without issues.
Note: to enable a horizontal scrollbar on mobile, make sure to manually overwrite the width of the table's columns.
Sticky header
If you have a table with a lot of data, you can make the header "sticky" to keep it visible. The header remains fixed to the screen (horizontally or vertically) while scrolling through the rows of the table. This works when the table is fully placed on the page itself or when you make the table scroll within a smaller frame.
Stretching the table
If you add multiple rows to a table, the height of the rows determines the final height of the table. By adding padding to a cell, you can create more white space between the rows.
If you want to make the content of a table fit the size of the selection frame, select the "Stretch table" option in the element settings panel.
Updated on: 21/06/2023