Feature of the month - Table features in CKEditor 5

Tables are all around us, being so popular and frequently seen that we do not pay attention to them anymore, and only concentrate on the information they hold. There are tables of content, which, in fact, are more of a list thing than a table, but we do have multiplication tables and also periodic tables of elements to consider. A highway signpost is a table and a software database — like the one that keeps this blog post data — is a table. The tables are everywhere and the reason for that is that they are simply the best at presenting certain types of information.

# Utilising tables

Rich content, be it a printed book, a website or a Q3 chairman presentation is all about two things: conveying a message and the way to convey it. While we would rarely expect more than images and some basic formatting in a fiction book, it is much different in other applications, where information and data often play the most crucial role.

The ability to group specific data and separate it from a wall of text is especially important for content dealing with financial information, scientific data, but also stock figures. Although this kind of textual or numerical information might sometimes be simply written down or listed, the tables serve several additional purposes.

First of all, they allow for the grouping of the data. Organizing simple numbers into rows and columns lets the author put them into an interaction, bind them together and make them dependent on each other. Rows and columns divide the information and put it together at the same time, thus allowing for a level of organization unavailable in the classic textual form of presentation. It is both faster and easier to intake and conveys the relations between data with no further explanation needed.

The other application of tables is — seemingly — an aesthetic one. Just like images and lists, they provide a visual break, disrupt the dull monotony of long texts and make the content easier to digest. But just like images and lists, they are not purely visual elements, but more of a way to feed particular information to the reader. They help them skip the less meaningful content and concentrate on the most important information within the text. Tables are highly useful for creating summaries, recaps and infobombs.

For certain types of scientific, financial, or technical information, data tables are the way to go. Easy-to-use styling features such as tables and lists encourage precise and expressive communication about data, analysis techniques, and help present the final results and findings in a clear way, as the Renku case study showed — where our client employed the power of CKEditor 5 to bring scientific information into life. Tables are also great for scheduling, timetables, price lists or menus, for listing terms and conditions or providing troubleshooting solutions. They are used in scientific reports, trade-deal appendices, technical manuals — simply everywhere where there is a lot of information and a need arises to structure that data for human reading. This is the case even more so when the reader is a computer algorithm, but this application shall not be covered in this blog post.

# Basic table functionality

The table feature provided in the CKEditor 5 WYSIWYG editor offers table creation and editing tools that help content authors bring tabular data into their documents. It is available in all preconfigured editor builds and it also works out of the box.

Using the dedicated toolbar dropdown, the user can insert a table of up to 10 rows and 10 columns with just two mouse clicks.

The user has full control over the columns, rows and individual table cells. Rows and columns can be deleted and inserted and set as headers. Individual cells can be merged with other adjacent cells and split both vertically and horizontally. All of these operations are conveniently carried out with a set of dropdowns in the contextual table toolbar which appears when a table or an individual cell is clicked.

# Formatting tables

The functions presented thus far allow for creating tables of various sizes with advanced cell layouts. All this is important for the relations between the data and the information it provides. But the last time black-and-white tables made of simple lines were a hit, was within the printed manuals of the past century. Of course, there are the basic text styles like bold or italics, that can be applied to textual content, but this is just the beginning.

In the days of online rich multimedia content, the presentational layer of things is, more often than not, as important as the semantical one. This is why CKEditor 5 offers a prime choice of styling tools. These tools let the user style both the table and all individual cells separately. They have full control over all aspects of the styling: the dimensions, content padding and the style and color of the border. There is the ability to change each individual cell’s background color and it may be matched with changing the font color (if this feature is available in the given build). The colors are predefined during CKEditor 5 integration and can be designed to match the company’s identity or other specific needs. The background color may be as easily removed with the very same drop-down tool.

Visuals are what draws the attention of the readers, but there is more to it than that. A properly formatted and styled table — via the use of colors, borders and other seemingly purely graphic solutions — may greatly aid the message it conveys and the readability of the overall layout. The form of the message becomes a part of the message itself, helping deliver better and more efficient content. This is what modern writing and editing are all about.

# Default styles

While styling tables and even individual table cells in CKEditor 5 is an easy, efficient task that can be done in a breeze, sometimes it is even more efficient to automate certain actions. If you would like all of the tables within your build to look similar visually, they can be preformatted for this need and default table styles can be applied to each newly created table on the go.

This solution would be especially useful for presentational content, websites, company leaflets and other applications where the visual side of the information delivered plays an important role. Applications of this feature are numerous as it is very flexible and only constrained by the CSS specifications and the editor’s needs.

Automating the styling of tables with default table styles is a task that needs to be done once, as defined in the CSS stylesheet, and may as well be forgotten — saving tons of editors’ time later on down the line. It also makes delivering global changes far easier and quicker should a need to restyle all tables in the document arise. It is one of those seemingly small, easily overlooked things that affect the quality of work and overall output of the editing and content creating effort. This is why we, at the CKEditor 5 developer team, introduce those little helpful features.

# Table captions

Having the tables visually distinct from the text is something to keep in mind. It helps the user spot the table, allowing for a better visual break, and if the colors are used for styling; it also breaks the monotony of the black-on-white traditional approach to content creation. But noticing the table is one thing while reading and even scheming is another. This is why we introduced table captions.

A caption works like a header of sorts, even though it is different from the traditional table header row on the semantic level. Captions are — very much like the ones that go with images — used to inform the reader what is the contents and what is the purpose of a particular table. They give a concise, quick message in the form of a title that catches the eye and signals the nature of the data gathered within the table cells.

Captions are also important due to the role they play in the accessibility field. While just casting a quick look at a table and assessing the information contained therein is a simple, quick task for many users, this is not the case for those who need to use screen readers. Adding a caption to a table will have the screen reader read the caption first and thus allowing the visually impaired readers or editors to more efficiently interact with the document and its content. It is beneficial for all parties involved and offers a way for visually impaired people to access the content easier.

# Nesting tables

The use of colors to add a presentational and semantical layer to datasets was already presented before, but there are more ways to use the power of tables to convey the message better and to structure the information contained more efficiently. We have already had one table, but what about a second table?

Let us consider splitting the information contained in the table into smaller datasets. We would normally use table rows, table columns or table cells grouped with some idea in mind. How about putting the data subsets into their individual tables? Splitting them along whatever criteria gets the message across best and then putting them back together into a larger table?

This is, exactly, what nested tables are all about. The editor can take information that would normally fit into a table and tabularize it with other useful information, containing both the data and the cross-data relations in one elegant, efficient solution. The chart below shows an example of this, which additionally utilizes table styles to better structure the content of the table and provide a visual attraction to readers at the same time.

Putting tables within other tables may seem like a radical idea for a layout that can be easily achieved by simply splitting and merging table cells. It relates, however, not only to the semantic information layers or the visual, presentational layers of content. Nesting the tables also relates to and helps facilitate speed, efficiency and the ease of content editing. It is by far easier to drag and drop individual tables around without the need to copy and paste them around the text. Having these informational chunks handy also makes reusing the datasets throughout the document much easier. Keep in mind that faster and easier to digest content creation and edition results in better overall efficiency and leaves more time for proofreading and perfecting the actual content.

# Square your data

In the medieval times, exchequers would cover a table with a piece of checkered cloth and then put coins on the appropriate squares to count them and divide them as needed. Centuries later we still use the very same basic concept of individual cells to hold and present information but the world has moved on since those times. We no longer need wooden tables nor checkered cloth in the information age we currently live in. Instead, we have the highest quality scalable WYSIWYG editor around, with granular features to square away all of our data. And we can make it pretty as well, which is a nice touch is it not?