Cadabra | Responsive Tables
Start my project

Responsive Tables

When you make tables in big web projects, you need to take into account several important aspects, which your table should possess.

Adaptivity. The table should easily extend on different screen sizes.

Fixed inner margins.

Various content.

Easy substitution of data and the structure in case of development.

Determine the number of columns, which will be in your table and create a rectangle with the size Table_with/count-row. It will be a cell of the table.

For example, the measure of your table on the medium device is 960 px with 6 columns, so the size of the cell’s width would be 160 px.

Tip: don’t worry, table cells are obtained with the fractional pixels’ values or don’t fit the grid, this is a responsive layout. Round the cell size to the nearest integer and continue creating.

Inside the rectangle make a text field Width: Fixed, set the width taking into account the margins of the cell from the edge and align it to the center of the cell.

Create cells types with various alignments — to the right, to the left, to the center. Do it by using the text alignment.

Determine the cells with specific content — images, icons, links, titles. Create cells for the table header.

Note: save every new text style, it will help you easily change it simultaneously in each column.

By using bindings specify the behavior of cells’ content and check it.

Convert each cell in the symbol.

Make a table line from cells and also convert them into symbols. Expand and zoom in cells depending on the amount of data.

If your table consists of alternating grey and white lines, create white and grey lines on the basis of the common character — strings without background.

Complete the strings with different information. Use the minimal and maximum length of the line to check the validity of your design.

Tip: put layers in the row of the table in the same order as the cells — it will be easier to fill them with data.

Perhaps, you may need to adjust the size of columns, alignments in it and the amount. With such approach, you will need to edit only one component — the basic line and the basic cell.

Now you have a very simple set of components which can be easily changed according to your needs. On its basis, you can also construct an unrestricted amount of tables with a different structure, which are united with one style and adjusted margins.

Thanks for reading us!

Written by Mary Kostrova and Helen Bogdashevskaya.

You can find us here

Instagram, Behance, Dribbble, Facebook, Twitter.

We have something special for you. 

Type the your request
Thank you
Your request has been submitted.
We’ll get in touch with you very soon!