Table

The table element is a great way of listing things out well as a table in a format that you are used to, but you can also think of it as a container element. To bring in the table element, we click on Add elements, and then I will go here in the sidebar on the left, find my table, click, hold, and drag, and drop it into the area. To help you visualize how the table works, there are some placeholder content already brought in here. You can see we have this heading at the top, then we have a side heading, and then We have the content over here. I called it a content element, and the reason for that is that we hear where the content appears. It looks like it's just text that you can enter there. But you'd be wrong. You can bring in any of these elements. If I want to bring in a button, looking at, I can bring in a button, I can bring in a line, I can bring in more text. And that's why I think this for me is really more a content element than anything else wrapped inside of a functionality of a table.

Let's just keep working with the default as it came in and explore the options that you have here. First, let's go to the container options. The container is represented by this dotted bounding box, and the options are accessed here in the top right corner. You have to delete, you have duplicate, and under settings, you have padding and margins. Next to that, you have color, and this is going to apply to the content. For the alternate rows, you select this one that is active, and you apply the alternate color for those rows. And you will see this appear a few times within the table element. To the left, where you have more options, you can have the head at the top activated or deactivated as well as the sidebar. Rows are determined here. You can add more, but you are not limited to that. You can select and type in a value of your choice, and you'll be given those additional rows. Same for columns. The width is how this table is spaced within its bounding box. Preferably, leave it at 100%. To interact with the rest of the content within this table, you just select those areas.

If we go to the head tabs, you select, and you will see that you can add icons on a column by column basis. You can set it to the left, to the right, and change the size. Topography, the same, and then you can style out the color at the top again. Under settings, you have padding. This padding applies only to the header. To change the naming of the labels in the heading, it's simple. Just select and type in the text. The same goes for the sidebar. You will see And when I selected very similar to the header, we have the icon that you can change on a line by line basis. You can set your topography, which will apply to all, and then you have the color. Again, you can set it as a uniform color, and then you have the option for alternatives. Reverting back to the default that we started with, it is paramount that when you work with these large content containers like the table element that you go and view it on responsive displays like tablets and mobile. Let's go and see how this will display on a tablet, and you will immediately begin to feel it may get a little bit squashed.

Here, we only work with two columns, but you can understand that if we had more columns here, you will definitely run into a problem. And that's where you may have to decide to do something different, hide this element and bring in something different for a tablet, and then same for mobile. On the mobile, once it does get squashed, you see that we have the scrolling bar at the bottom, which we can move and we can access the rest of the information. So if you really need a big table with lots of content, not all is lost, you will have the scroll function.