# Layout Table
Layout Table is a component which is an alternative to the Responsive Grid. It still consists of Rows and Columns, but it isn't responsive. Columns always sit next to each other, and never flow underneath one another. This can result in horizontal scroll bars on small screens if you are not careful.
Layout Table from the Component panel and drop it in your page. It can be placed in any component. Keep in mind that
Layout Table won't shrink and might lead to horizontal scroll bars on small devices if it's too wide.
You can add additional rows and columns to your table from the Toolbar:
You can achieve more complex grids by "merging" neighboring cells. To do this, right click a Table Cell, and choose
Here you can set the
colspan properties, which determine how many positions the cell would take. Keep in mind that if you increase the
colspan of a cell you will need to delete one of the other cells on the row so that all rows contain an equal number. The same goes for
rowspan - if increased you will need to delete one of the cells from the row above or below.
# When to Use
Layout Table is useful in cases where you need precise pixel widths for your columns, and the total width of the entire table doesn't exceed 320px, so that it will always fit in screen.
If you need a wider table than this, you can show
Layout Table only on desktop, and hide it on small devices with the Conditional Visibility options, while showing a mobile optimized version in its place.
# Differences with Table
If you browse the markup of the
Layout Table component in the HTML tab, you will see that it's basically a regular table. The main difference with the
Table component is that
Layout Table sets the
role="presentation" attribute, which indicates to screen readers that the table is for layout purposes only and its contents shouldn't be read cell by cell.