Framer Update, CMS

Framer Update: CMS Tables

Edo

3:19

9.9K views

Mar 11, 2025

About this lesson

Introducing Tables in the Framer CMS. When viewing a CMS item, head to a Rich Text field to see the new Table tool, and click it to insert a sample table. When editing, columns auto-adjust to fit the text, and you can add rows or columns using the plus button on the edges. Right-click a cell for options like inserting rows, merging cells, and setting headers. To style your table, select it, go to CMS Styles on the Canvas, and edit the Table properties, where you can adjust colors, padding, radius, and fine-tune outer and inner borders. You can also customize the text within tables, like the titles in headers, by assigning a style to them and tweaking it on the Canvas. Lastly, all CMS tables are responsive by default, enabling smooth horizontal scrolling on mobile.

https://www.framer.com/updates/cms-tables

🌞 Start for free: https://framer.link/yt

📚 Learn more at: https://framer.link/yt-academy

💎 Join the Community: https://framer.link/yt-community

🎉 Follow on X: https://framer.link/yt-x

0:00[Music]0:01hi everyone this is Ado from framer 0:03today I want to show you the latest 0:05addition to the framer CMS which is 0:08tables let me show them by opening a CMS 0:13item you see here there is a new table 0:16tool on the right and by clicking it a 0:19sample table is inserted you can then 0:21customize it with your own content and 0:24the columns will automatically adjust 0:26their sides to 0:27fit to add columns or rows you can hover 0:30on the right or bottom edges of the 0:32table and click the plus button right 0:35clicking a cell instead opens additional 0:38options such as inserting arow before 0:40after the active one you can also click 0:43and drag to select multiple cells then 0:46right click to turn them into headers 0:48which is useful for other 0:49columns and you can use the same menu to 0:52merge multiple cells into a single one 0:55now let me right click and delete this 0:57table and add a new one so I can show 1:00you some styling 1:01options customizing your table's 1:04appearance is simple and can be done 1:06from the canvas with your Rich Text 1:09content selected you can head to the CMS 1:12Styles section and then pick the table 1:14property and click edit from here you 1:17see there are a few options you can edit 1:21such as the header color for 1:24instance and if you head back you can 1:28even adjust the pad in of each cell as 1:31well as the radius of the entire table 1:35like I'm doing and if you click the 1:37Border property you'll see that there 1:39are a few Advanced options like showing 1:42or hiding an outer border and even 1:45deciding which type of inner dividers 1:48you want like horizontal only for 1:50instance this already gives you quite 1:52some flexibility on how your table looks 1:55like but if you want to go even further 1:57for instance by customizing how the text 2:00within the table looks like you can 2:02quickly do so by double clicking the 2:04table which opens the CMS overlay and 2:07from there you can click and drag to 2:09select multiple header cells and then 2:11assign a different type of heading like 2:14heading six you'll notice that the 2:17change is immediately reflected in the 2:19canvas and if you want to edit the text 2:21stle even further you can head to the 2:23properties panel click edit and change 2:26something like its color which you'll 2:28see immediately reflected in the table 2:31we've been testing this feature for 2:33quite a bit by using tables on our own 2:36frame.com site for instance on this 2:40comparison page there is a table over 2:43here which uses some text wrapping done 2:45by hitting command enter when typing and 2:48now I'm going to resize the preview to 2:51show you that on smaller viewports the 2:54table is horizontally scrollable and 2:56this is done automatically for you so 2:58when you at the table that's responsive 3:01by 3:02default we really hope you enjoyed this 3:04update and we have so much more in store 3:07for the CMS so stay tuned and happy 3:09building 3:12[Music]

TeachesCMS Fields

Also coversFrames Hover & Press Responsive Design

Watch on YouTube ↗

‹ Using Layout Templates in Framer (Fundamentals Lesson 22)

Framer Update: CMS Starter Plugin ›