paint-brush
How to Draw an Attractive Convenient Table — Design Techniques and Examplesby@evengy
5,773 reads
5,773 reads

How to Draw an Attractive Convenient Table — Design Techniques and Examples

by Evgeny BondkowskiJune 16th, 2023
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

In this article, I show different table design techniques and examples of their application. You can use it in any application, not only in graphics editors (like Figma, InDesign, and Photoshop) but in Exel, PoverPoint, and Word. It will be especially useful for non-designers or novice designers to quickly get acquainted with how to design a table.
featured image - How to Draw an Attractive Convenient Table — Design Techniques and Examples
Evgeny Bondkowski HackerNoon profile picture

In this article, I want to show different table design techniques and examples of their application. You can use it in any application, not only in graphics editors (like Figma, InDesign, and Photoshop) but in Exel, PoverPoint, and Word. It will be especially useful for non-designers or novice designers to quickly get acquainted with how to design a table differently and choose the appropriate option for their project. As well as experienced professionals who rarely draw tables.


A rectangular table, along with text and illustrations, is one of the main ways to visually convey information. There are especially many tables in complex interfaces. Usually, for large enterprise applications for desktops, a data table is the main thing that the user works with. On long reads, tables become the most noticeable visual element that stands out among the text, attracts the most attention, and set the entire style of the page or site if there are no illustrations. Therefore, the design of tables is very important, and it is worth allocating a separate time for this to get a high-quality design of a website, presentation, or printed document.

1. Table design techniques

A regular table consists of rows and columns separated by uniform lines, enclosed within a frame. This type of table can be easily created using Excel. It serves as a universal option when designing resources is not feasible. However, for designers, it is considered a starting point for further customization.

Regular table


The opposite option is a table without lines. Only data and no registration. It looks good in an airy design, and only when there is very little data (columns and rows) and a lot of space. But it is still more difficult to read the information than if there is a minimum design

Table without lines


Cross-band background fill is another lightweight option that is used with a small amount of data, simplifying the table reading. It looks easy, but it practically excludes other techniques to highlight some information in the table. For example, you can’t highlight a row or cell with a different color.

Cross-band background fill


A table with horizontal lines only is perhaps the most common option now. The design is made as easy as possible due to the absence of a frame and vertical lines, the information is easy to read thanks to the selection of lines. Most often, the lines are made very light.

Horizontal dividers only


Highlighting the header with a brighter line is a development of the previous version. The design option that I use most often. It is as visually light as possible and at the same time convenient. You can use the bolder or darker line for it.

Highlighting the header with a brighter line


For the convenience of perception of information, you can apply a change in font size and saturation - to separate the header or highlight a key column. This helps to read the table and makes it visually more interesting.

Changing font size and saturation


Additionally, the appearance can be changed by changing the distances between the lines - adding or removing empty space. Large distances between rows make the design easier and help to separate rows, and compact ones allow you to put more information and/or put more emphasis on columns.

Changing the distance between lines


Highlighting the header with color can be used instead of a thick line (or together). Also, in some cases, a frame around the table will look good, especially when there are many other elements around from which it is necessary to separate the table itself. In this case, it is worth preserving the overall lightness of the lines so that the frame does not interfere with the perception of information.

Frame around the table, highlighting the header with color


The fashion of the current moment, which has become almost a standard, is the rounding of the corners of the table frame. Helps to fit the table into the overall design when buttons, blocks, and other lines are rounded.

Rounded corners of the table


To separate the table from the rest of the elements, you can use a background page fill instead of a frame. This technique is good when the table is the main element on the screen and occupies it almost completely. Usually, the table has a lighter color, which puts it in the foreground relative to other content.

Background page fill


To separate the content by rows and columns, as well as to highlight the table on the screen, you can use lines of different thicknesses and types. This helps to highlight the header and the key column, as well as set up the hierarchy of division within the table. Usually, the tables are dominated by rows and are separated by brighter lines, and columns are lighter. There may be a reverse situation.

Lines of different colors, thicknesses, and types


In a rich design where there are a lot of bright elements and a lot of elements with shadows, in addition to the background, you can use the selection of the table with a shadow. To create more lightness, you can use only the shadow without background fill.

Highlighting a table with a shadow


Instead of a line, a column or row can be separated by a shadow. This is usually used when hovering the cursor over a row, or when scrolling the table horizontally, to pin a key column. But it can also be used as a static element.

Shadow dividing of a column or row


You can use the color fill of individual rows, columns, or cells to highlight important information. For example, an abnormal value in a cell, the currently active row, or a column with totals.

Filling rows, columns, and cells with color


Colored vertical lines for highlighting individual lines do not take up much space, and are not as bright as the background fill, but work well for highlighting accents. It is often used to indicate the status of strings.

Colored vertical bars to highlight lines


For more visual separation of rows or columns of the table, you can divide them into separate blocks with an outline and/or shadow. It is usually used when there are few rows, and there is a lot of information in each cell. For example, tariff plan tables.

Dividing rows into separate blocks

2. Examples of table design

Here are examples from my practice. I drew a lot of tables, and, depending on the situation, I used all the techniques listed above. Usually several are used at once, below I will show such complex cases.

One of the most frequent options. Separating only rows with lines, highlighting the header with a thick line, and using different fonts for the header and the key column.


The same thing, but simpler - the text is typed in one size. Highlighting is not necessary because a different style sets the format of information - long text in the header, and numbers in the cells.


For small tables with two columns, you can use lines connecting the content instead of dividing the rows. The text in the left column is directly linked to the value in the right.


The frame around the table is used to highlight it on a page with a large number of other elements. The first line is also tinted to highlight the title. Zero values are separated in a gray font in the cells.


To make the table the main element of the screen, and separate it from the control buttons, a background fill is used. The corners of the table are rounded like the rest of the elements. The header is highlighted in bold


To separate the table, both fill and shadow is used to highlight the block on the page more clearly. The table header is separated by a thicker line, the rows are separated by narrower ones. The corners are rounded.


To highlight individual lines that are worth paying more attention to, a color fill is used. To highlight the line when hovering, a lighter one is used


A color fill between shades of the same color is used to create a hierarchy. In this case, the most important information is at the lowest level, and it is highlighted in the most saturated color.


Highlighting the expanded line with a background color. The vertical bar indicates the status of the row. In this case, the intersection is shown - it is the selected line that is revealed. Background fill and shadow are used to highlight the table on the screen. The corners are rounded



Using dotted lines to separate lines. Such lines, among other things, allow you to simultaneously make them light and see them on screens with poor contrast.


Separation of rows and columns by different lines. Highlighting the key column with an even more saturated line. Background fill helps to make a visual step for displaying the hierarchy of rows - the dependent row is highlighted.


Separating the header with a shadow when scrolling the table. Here the header is stuck to the top of the screen, the content goes under it when scrolling. The color fill of individual cells is also used

3. Further development of tables

In order to make tables even more convenient and beautiful - in some cases, you can replace them with graphs and diagrams, or embed small graphical elements in the table. I will tell you about these techniques in the next article, which I will publish in the near future.


graphs and charts instead of tables


Thanks for your attention!


Examples of tables in the figure