Model tables
0% complete
Tables help people better understand complex information. You can use them to clearly present lists of product features, offices in the area, property listings, and so on. In Kontent.ai, you can model this kind of information using structured content.
The beauty of structured content is that you can display it however you want. It can be a classic table on your website or interactive tiles in your mobile app, for instance.
To create such a product table in Kontent.ai, you need two content types. One for the table itself and one for the individual products.
Key points
- Using structured content to model tables brings you complete freedom of how you present the information on your website or an app.
- If your tables don't have more than a couple of rows and columns, the built-in table in a rich text might do the job.
- You can also use a custom element for tables but that requires some work from your development team.
Model your content and use it anywhere, anyhow
When creating tables in Kontent.ai, the recommended way to do so is by structuring your content. The actual content can be anything that needs to be sorted, a pricing list, online courses, or a number of products. Let's say you have a list of products that you want to display. Each product has details such as its name, price, and product number. In Kontent.ai, you can create this structure using components. The idea is that you create one component for each product, which represents one row in a table.Need to reuse your table?Think about where you want to use your table before you start creating it. This way, you'll know whether to use components for one-time use, or reusable content items.
You can also convert components to separate items, if you decide to reuse them later on.
Step 1: Define the Product content type
First, create a content type for individual products and name it Product. Now, add content elements for each piece of information you have about your products:- Text elements for the product name and description
- Number elements for its price and product number.
- Also, add guidelines to the elements to clarify how to fill in the information.
Step 2: Define the content type for your table
Create a second content type called Table and add one rich text element to it. Your content creators will be adding products as components to the rich text. Add a guideline to the rich text explaining how to add a new table entry. Limit the rich text to allow only the components and items of the Product type.The Table content type is universalUse the Table type for more than just products. For example, list your departments, university courses, and so on. To do that, allow the appropriate content types in the Table type limitations.
Step 3: Create the table and fill it with content
Now, your content creators will use both content types to create the table in 3 steps:- Open a content item where you want to place the table.
- In the rich text element, add a component based on the Table content type.
- In the Table component, add each product as a nested component of the Product type.
- If you plan to reuse the content, add a linked item of the Product type instead.
A simple way for simple content
If the information you want to share is really simple, yet best shown as a table, you can use the built-in tables in Kontent.ai. If you want to show the opening hours of your office, for example, the built-in tables can do the job just fine. Keep in mind that once you have created your table this way, there's no easy way to move the rows around or reuse the table somewhere else. That's why it only makes sense to use built-in tables for a simple content that you won't need to reuse in the future. If you want to set the first table row as a header, your developers need to take care of it in your front-end app. For example, you can make the text bold so that your app can then recognize such a row as a header.Insert tables from external sources
Sign in with your Kontent.ai credentials or sign up for free to unlock the full lesson, track your progress, and access exclusive expert insights and tips!