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.
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.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.
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.
You'll use this content type to create components for each product in your table.
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.
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.
And that's it! The finished table can look something like this:As you can see, each component represents one row of the table. If you decide you want to arrange the rows differently or sort them, you can grab the components using and move them as needed.
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
If your content creators are used to managing tables in the spreadsheet documents, you might want to provide them with a similar experience in Kontent.ai. This way of working requires involvement from your development team as they need to create a custom element first. Then, your creators could select a spreadsheet document from Google Drive, for instance, and insert it into a content item within a few clicks.If you prefer the old ways of working with content, you can also integrate WYSIWYG HTML editors into Kontent.ai.
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!
Table content type with a rich text set to allow only components or items of the Product type.
What a table created by using components can look like to editors.
An example of a built-in table in the rich text editor
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.
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.
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.
Paste your table from a spreadsheetIf you have your table in a spreadsheet such as Microsoft Excel, you can also copy the table from there and paste it directly into the rich text editor in Kontent.ai.
and move them as needed.
. All rights reserved.
