[Jingle] This lesson is a collection of best practices to help you design better tables in Foleon. As creators, we are responsible for visualizing data, making it easy to read, and telling the story of its importance. This lesson is broken into two topics. First, we'll cover ways to style your table element and then we'll close out by sharing other ways to visualize data in your Foleon Doc. Tables vary in size content and purpose. A well-designed table impacts the success of your Foleon Doc. It will help your readers scan, understand, and take action. When deciding how to style and format your table, prioritize readability. In case your organization already has their brand kit set up, font styles for tables are taken care of. However, it's still possible to make manual adjustments. To do this use the brand settings. To make columns with lots of numbers easier to scan, a monospaced font can be a solution. That way instead of having proportional spacing where a "3" is wider than a "1" each number is the same width making it easier on the eyes. There are common monospace fonts like Courier, Courier New and Monaco but following your company's brand guidelines should always be the priority. Row styling helps users scan and read through the information in your table. Choose the style that best suits the type and amount of information in your table. By default, the border of your table shows all sides at once creating a grid structure. You can change the thickness and color of the border or have no borders at all by setting the border weight to zero. Without Borders, you get a free-form table. Style alternates can help make the content more readable. Looking like a zebra stripes effect. Another way to change the look and feel of your table is to play around with the line-height. We'll adjust this from the brand settings to do this for the entire table. A condensed line-height allows you to show more data at once, limiting how much you need to scroll. But this will reduce the table's readability. However less density makes it more comfortable for reading large sets of data. Experiment to see what fits your table best. Color contrast can help highlight important table parts if that is desired. Applying a different color background to the header can be quick. Here I choose to make the header white and the text bold. And these in fact are three table elements with a divider in between to create an additional contrasting effect. The contrasting header doesn't need to be on the top. You choose what part of your table makes the most sense to highlight. Let's say there was a total row at the bottom of this table that I want to highlight. I can simply switch the header position. I've also added contrast to the center column by using style alternates and set the color to highlight columns instead of the rows. Adding contrast organizes your information and adds meaning to your table. This helps present the data in a digestible way. Subtext can provide context and helpful details without taking up space or cluttering the table. In a product or feature overview, you can add a sentence to explain what the product is or what makes the table unique or if you have a list of features you can add a one sentence explanation of what the table means. The style of your subtext should reflect your brand guide's typographic hierarchy so collaborate with your team to see what is best. Subtext is just one solution, but sometimes you want to add background information or explain the information in the table in more depth. Maybe you don't think the main page of the report is the right place to add this. You can add a button below the table and connect it to an overlay. When you click the button, an overlay opens with the additional information. You can find your overlays under pages in a separate tab to edit them further. Tables matter and remember when deciding how to style and format your table, prioritize readability. The table element is not the only tool in your tool belt to visualize your data easily and offer your audience engaging information. You may also want to use images of graphs, animate the important ones into gifs even, or embed interactive tables or graphs from other sources. But the easiest way is to use the data visualization elements in Foleon. There is a counter, a circle, and a bar element. They are a great way to visualize a single data point or combine multiple to create a system of data points. Here is a quick summary of what we've discussed today. manage the font style and spacing from the brand settings. Adjust row styling. Add contrast to highlight important parts of your table. Use subtext to create clarity. Place more information in an overlay to keep your pages clean. And lastly, leverage other data visualization elements to help tell the story of your data. I hope you feel inspired to level up your data visualizations! Good luck and thanks for watching! [Jingle]