Let's Connect

Creating an advanced table in Kadence Blocks using Row Layout

Hello Again Block Editor Freaks,

If you reading this tutorial, you must have struggled with creating a perfect table in WordPress, not just a block editor, there is not many options available for tables which are easy to create/edit and are responsive, So here is the tutorial for you.

In this video I will create a Table Structure using the Kadence Blocks “Row Layout” Module, It was a bit tricky but Finally, I did it. As you can see in thumbnails, it is responsive as well. So Let’s start.

Creating Table

To create a table you have to Imagine a Row Layout Block as a Row of table.

  1. Add Row Layout with CSS Class “table-container“.
  2. Add a border of 1px in the Section of Row Layout, not in the Row layout itself, (The row layout has inner sections)
  3. Add a Row again with your desired number of columns, This will be the First Row of your Table, It can be the Header of the table with various elements like mine. Add class “table-row” in each row you add/duplicate for your table.
  4. Make sure to add bottom borders to all Row layouts which are rows of your table.
  5. Now you just have to duplicate Row Layout to create a new row, all styling will be duplicated, making it easier to create a new row.

CSS Code to Make Table Responsive.

If you have 2 columns or 3 with small data, it will be responsive as no scrolling will be needed, but if you have multiple columns, in my case it was 5 so I have to make it Horizontally scrollable. As you see in thumbnail, my mobile version have horizontal scroll bar.

CSS
/* Tab layout inherit */
.hentry .kb-row-layout-id615_b6d027-62 .kt-tab-layout-inherit{
	min-width:1300px;
}

/* Ensure the entire table container scrolls horizontally */
.table-container {
    overflow-x: scroll; /* Enable horizontal scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on touch devices */
     display: flex;
    	flex-wrap: nowrap; /* Prevent rows from wrapping */
    
}

/* Ensure each row takes up the full width and doesn't wrap */
.table-container .kt-row-column-wrap {
    display: flex;
}

/* Ensure each column is of equal width */
.table-container .wp-block-kadence-column {
    	flex: 1 1 20%; /* Each column takes up 20% of the row's width */
    min-width: 220px; /* Prevent columns from shrinking too much */
    box-sizing: border-box; /* Include padding/border in the column width */
    
}

/* 1024px and larger screen sizes */
@media (min-width: 1024px) {
    /* Custom scrollbar for screens wider than 1024px */
    ::-webkit-scrollbar {
        width: 20px;
    }

    ::-webkit-scrollbar-track {
        background-color: transparent;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #d6dee1;
        border-radius: 20px;
        border: 6px solid transparent;
        	background-clip: content-box;
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: #a8bbbf;
    }

}
CSS
Expand

Table Code (Copy/Paste)

You can copy this code to the website. This code have 3 Rows with different icon paste this table directly into your ws and texts, you can aslo add whatever you want, Images, Videos, Buttons, etc as this is just a row.

Free

Try Now

Starter (Mensuel)

Get It

Starter (Annuel)

Get It

Enterprise

Contact us
Row 1

100

100

1200

Personnalisé

Row 2
Row 2
Above Table Code
<!-- wp:kadence/rowlayout {"uniqueID":"555_d955db-eb","columns":1,"colLayout":"equal","maxWidth":1300,"firstColumnWidth":0,"secondColumnWidth":0,"thirdColumnWidth":0,"fourthColumnWidth":0,"fifthColumnWidth":0,"sixthColumnWidth":0,"padding":["xs","","xs",""],"margin":["","","sm",""],"kbVersion":2,"className":"table-container","kadenceBlockCSS":"/* Tab layout inherit */\n.hentry .kb-row-layout-id615_b6d027-62 .kt-tab-layout-inherit{\n\tmin-width:1300px;\n}\n\n/* Ensure the entire table container scrolls horizontally */\n.table-container {\n    overflow-x: scroll; /* Enable horizontal scrolling */\n    -webkit-overflow-scrolling: touch; /* Smooth scrolling on touch devices */\n     display: flex;\n    \tflex-wrap: nowrap; /* Prevent rows from wrapping */\n    \n}\n\n/* Ensure each row takes up the full width and doesn't wrap */\n.table-container .kt-row-column-wrap {\n    display: flex;\n}\n\n/* Ensure each column is of equal width */\n.table-container .wp-block-kadence-column {\n    \tflex: 1 1 20%; /* Each column takes up 20% of the row's width */\n    min-width: 220px; /* Prevent columns from shrinking too much */\n    box-sizing: border-box; /* Include padding/border in the column width */\n    \n}\n\n/* 1024px and larger screen sizes */\n@media (min-width: 1024px) {\n    /* Custom scrollbar for screens wider than 1024px */\n    ::-webkit-scrollbar {\n        width: 20px;\n    }\n\n    ::-webkit-scrollbar-track {\n        background-color: transparent;\n    }\n\n    ::-webkit-scrollbar-thumb {\n        background-color: #d6dee1;\n        border-radius: 20px;\n        border: 6px solid transparent;\n        \tbackground-clip: content-box;\n    }\n\n    ::-webkit-scrollbar-thumb:hover {\n        background-color: #a8bbbf;\n    }\n\n}\n\n"} -->
<!-- wp:kadence/column {"borderWidth":["","","",""],"uniqueID":"555_f22985-1e","borderStyle":[{"top":["rgba(108,102,132,0.2)","",1],"right":["rgba(108,102,132,0.2)","",1],"bottom":["rgba(108,102,132,0.2)","",1],"left":["rgba(108,102,132,0.2)","",1],"unit":"px"}],"kbVersion":2} -->
<div class="wp-block-kadence-column kadence-column555_f22985-1e"><div class="kt-inside-inner-col"><!-- wp:kadence/rowlayout {"uniqueID":"555_c62fd9-83","columns":5,"mobileLayout":"equal","tabletLayout":"equal","collapseGutter":"none","customRowGutter":[0,"",""],"columnGutter":"none","customGutter":[0,"",""],"colLayout":"equal","bgColor":"palette8","bgColorClass":"theme-palette8","padding":["0","0",0,"0"],"borderStyle":[{"top":["","",""],"right":["","",""],"bottom":["rgba(108,102,132,0.2)","",1],"left":["","",""],"unit":"px"}],"kbVersion":2,"className":"table-header-row table-row "} -->
<!-- wp:kadence/column {"id":2,"borderWidth":["","","",""],"uniqueID":"555_8c1aa0-5b","direction":["horizontal","",""],"justifyContent":["space-between","",""],"verticalAlignment":"middle","padding":["xxs","xxs","xxs","xxs"],"tabletPadding":["xxs","xxs","xxs","xxs"],"kbVersion":2} -->
<div class="wp-block-kadence-column kadence-column555_8c1aa0-5b kb-section-dir-horizontal"><div class="kt-inside-inner-col"></div></div>
<!-- /wp:kadence/column -->

<!-- wp:kadence/column {"id":2,"borderWidth":["","","",""],"uniqueID":"555_545a30-8e","direction":["horizontal","",""],"justifyContent":["space-between","",""],"wrapContent":["nowrap","",""],"verticalAlignment":"middle","padding":["xs","xs","xs","xs"],"tabletPadding":["xxs","xxs","xxs","xxs"],"borderStyle":[{"top":["","",""],"right":["rgba(108,102,132,0.2)","",1],"bottom":["","",""],"left":["rgba(108,102,132,0.2)","",1],"unit":"px"}],"kbVersion":2} -->
<div class="wp-block-kadence-column kadence-column555_545a30-8e kb-section-dir-horizontal"><div class="kt-inside-inner-col"><!-- wp:kadence/advancedheading {"level":4,"uniqueID":"555_a7d4b2-09","margin":["0","0","0","0"],"markBorder":"","markBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}],"tabletMarkBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}],"mobileMarkBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}]} -->
<h4 class="kt-adv-heading555_a7d4b2-09 wp-block-kadence-advancedheading" data-kb-block="kb-adv-heading555_a7d4b2-09">Free</h4>
<!-- /wp:kadence/advancedheading -->

<!-- wp:kadence/advancedbtn {"uniqueID":"555_8f8ad5-f7"} -->
<div class="wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns555_8f8ad5-f7"><!-- wp:kadence/singlebtn {"uniqueID":"555_29e219-53","text":"Try Now","padding":["xxs","xs","xxs","xs"],"background":"var(\u002d\u002dtheme-palette-color-2, #3858e9)","borderRadius":[8,8,8,8],"typography":[{"size":[12,"",""],"sizeType":"px","lineHeight":["","",""],"lineType":"","letterSpacing":["","",""],"letterType":"px","textTransform":"","family":"","google":"","style":"","weight":"","variant":"","subset":"","loadGoogle":true}]} /--></div>
<!-- /wp:kadence/advancedbtn --></div></div>
<!-- /wp:kadence/column -->

<!-- wp:kadence/column {"id":2,"borderWidth":["","","",""],"uniqueID":"555_5c38e0-c6","direction":["horizontal","",""],"justifyContent":["space-between","",""],"wrapContent":["nowrap","",""],"verticalAlignment":"middle","padding":["xs","xs","xs","xs"],"tabletPadding":["xxs","xxs","xxs","xxs"],"kbVersion":2} -->
<div class="wp-block-kadence-column kadence-column555_5c38e0-c6 kb-section-dir-horizontal"><div class="kt-inside-inner-col"><!-- wp:kadence/advancedheading {"level":4,"uniqueID":"555_e2b285-75","margin":["0","0","0","0"],"markSize":[12,"",""],"markFontWeight":"400","markColor":"palette3","markBorder":"","markBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}],"tabletMarkBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":""}],"mobileMarkBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":""}],"fontSize":["sm","",""]} -->
<h4 class="kt-adv-heading555_e2b285-75 wp-block-kadence-advancedheading" data-kb-block="kb-adv-heading555_e2b285-75">Starter <mark class="kt-highlight">(Mensuel)</mark></h4>
<!-- /wp:kadence/advancedheading -->

<!-- wp:kadence/advancedbtn {"uniqueID":"555_628c76-06"} -->
<div class="wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns555_628c76-06"><!-- wp:kadence/singlebtn {"uniqueID":"555_3b85a2-b4","text":"Get It","padding":["xxs","xs","xxs","xs"],"background":"var(\u002d\u002dtheme-palette-color-2, #3858e9)","borderRadius":[8,8,8,8],"typography":[{"size":[12,"",""],"sizeType":"px","lineHeight":["","",""],"lineType":"","letterSpacing":["","",""],"letterType":"px","textTransform":"","family":"","google":"","style":"","weight":"","variant":"","subset":"","loadGoogle":true}]} /--></div>
<!-- /wp:kadence/advancedbtn --></div></div>
<!-- /wp:kadence/column -->

<!-- wp:kadence/column {"id":2,"borderWidth":["","","",""],"uniqueID":"555_37105f-0e","direction":["horizontal","",""],"justifyContent":["space-between","",""],"wrapContent":["nowrap","",""],"verticalAlignment":"middle","padding":["xs","xs","xs","xs"],"tabletPadding":["xxs","xxs","xxs","xxs"],"borderStyle":[{"top":["","",""],"right":["rgba(108,102,132,0.2)","",1],"bottom":["","",""],"left":["rgba(108,102,132,0.2)","",1],"unit":"px"}],"kbVersion":2} -->
<div class="wp-block-kadence-column kadence-column555_37105f-0e kb-section-dir-horizontal"><div class="kt-inside-inner-col"><!-- wp:kadence/advancedheading {"level":4,"uniqueID":"555_bffcdb-f9","margin":["0","0","0","0"],"markSize":[12,"",""],"markFontWeight":"400","markColor":"palette3","markBorder":"","markBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}],"tabletMarkBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":""}],"mobileMarkBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":""}],"fontSize":["sm","",""]} -->
<h4 class="kt-adv-heading555_bffcdb-f9 wp-block-kadence-advancedheading" data-kb-block="kb-adv-heading555_bffcdb-f9">Starter <mark class="kt-highlight">(Annuel)</mark></h4>
<!-- /wp:kadence/advancedheading -->

<!-- wp:kadence/advancedbtn {"uniqueID":"555_bfbaf2-6c"} -->
<div class="wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns555_bfbaf2-6c"><!-- wp:kadence/singlebtn {"uniqueID":"555_72013c-41","text":"Get It","padding":["xxs","xs","xxs","xs"],"background":"var(\u002d\u002dtheme-palette-color-2, #3858e9)","borderRadius":[8,8,8,8],"typography":[{"size":[12,"",""],"sizeType":"px","lineHeight":["","",""],"lineType":"","letterSpacing":["","",""],"letterType":"px","textTransform":"","family":"","google":"","style":"","weight":"","variant":"","subset":"","loadGoogle":true}]} /--></div>
<!-- /wp:kadence/advancedbtn --></div></div>
<!-- /wp:kadence/column -->

<!-- wp:kadence/column {"id":2,"borderWidth":["","","",""],"uniqueID":"555_b3b30c-33","direction":["horizontal","",""],"justifyContent":["space-between","",""],"wrapContent":["nowrap","",""],"verticalAlignment":"middle","padding":["xs","xs","xs","xs"],"tabletPadding":["xxs","xxs","xxs","xxs"],"kbVersion":2} -->
<div class="wp-block-kadence-column kadence-column555_b3b30c-33 kb-section-dir-horizontal"><div class="kt-inside-inner-col"><!-- wp:kadence/advancedheading {"level":4,"uniqueID":"555_ed942e-21","margin":["0","0","0","0"],"markBorder":"","markBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}],"tabletMarkBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}],"mobileMarkBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}],"fontSize":["sm","",""]} -->
<h4 class="kt-adv-heading555_ed942e-21 wp-block-kadence-advancedheading" data-kb-block="kb-adv-heading555_ed942e-21">Enterprise</h4>
<!-- /wp:kadence/advancedheading -->

<!-- wp:kadence/advancedbtn {"uniqueID":"555_4d9970-6a"} -->
<div class="wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns555_4d9970-6a"><!-- wp:kadence/singlebtn {"uniqueID":"555_230a88-74","text":"Contact us","padding":["xxs","xs","xxs","xs"],"background":"var(\u002d\u002dtheme-palette-color-2, #3858e9)","borderRadius":[8,8,8,8],"typography":[{"size":[12,"",""],"sizeType":"px","lineHeight":["","",""],"lineType":"","letterSpacing":["","",""],"letterType":"px","textTransform":"","family":"","google":"","style":"","weight":"","variant":"","subset":"","loadGoogle":true}]} /--></div>
<!-- /wp:kadence/advancedbtn --></div></div>
<!-- /wp:kadence/column -->
<!-- /wp:kadence/rowlayout -->

<!-- wp:kadence/rowlayout {"uniqueID":"555_8ac370-90","columns":5,"mobileLayout":"equal","tabletLayout":"equal","collapseGutter":"none","customRowGutter":[0,"",""],"columnGutter":"none","customGutter":[0,"",""],"colLayout":"equal","bgColor":"palette9","bgColorClass":"theme-palette9","padding":["0","0",0,"0"],"borderStyle":[{"top":["","",""],"right":["","",""],"bottom":["rgba(108,102,132,0.2)","",1],"left":["","",""],"unit":"px"}],"kbVersion":2,"className":"table-row"} -->
<!-- wp:kadence/column {"borderWidth":["","","",""],"uniqueID":"555_c184eb-1c","direction":["vertical","",""],"justifyContent":["center","",""],"verticalAlignment":"middle","padding":["xs","xs","xs","xs"],"tabletPadding":["xxs","xxs","xxs","xxs"],"kbVersion":2} -->
<div class="wp-block-kadence-column kadence-column555_c184eb-1c kb-section-dir-vertical"><div class="kt-inside-inner-col"><!-- wp:kadence/advancedheading {"level":6,"uniqueID":"555_d4b2fa-dd","align":"center","margin":["0","0","0","0"],"padding":["0","0","0","0"],"markBorder":"","markBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}],"tabletMarkBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}],"mobileMarkBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}]} -->
<h6 class="kt-adv-heading555_d4b2fa-dd wp-block-kadence-advancedheading" data-kb-block="kb-adv-heading555_d4b2fa-dd">Row 1</h6>
<!-- /wp:kadence/advancedheading --></div></div>
<!-- /wp:kadence/column -->

<!-- wp:kadence/column {"id":2,"borderWidth":["","","",""],"uniqueID":"555_8ca921-7e","direction":["vertical","",""],"justifyContent":["space-between","",""],"verticalAlignment":"middle","padding":["xs","xs","xs","xs"],"tabletPadding":["xxs","xxs","xxs","xxs"],"borderStyle":[{"top":["","",""],"right":["rgba(108,102,132,0.2)","",1],"bottom":["","",""],"left":["rgba(108,102,132,0.2)","",1],"unit":"px"}],"kbVersion":2} -->
<div class="wp-block-kadence-column kadence-column555_8ca921-7e kb-section-dir-vertical"><div class="kt-inside-inner-col"><!-- wp:kadence/advancedheading {"uniqueID":"555_a5d2ef-fb","align":"center","margin":["0","0","0","0"],"padding":["0","0","0","0"],"markBorder":"","markBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}],"tabletMarkBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}],"mobileMarkBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}],"htmlTag":"p","fontSize":["sm","",""]} -->
<p class="kt-adv-heading555_a5d2ef-fb wp-block-kadence-advancedheading" data-kb-block="kb-adv-heading555_a5d2ef-fb">100</p>
<!-- /wp:kadence/advancedheading --></div></div>
<!-- /wp:kadence/column -->

<!-- wp:kadence/column {"borderWidth":["","","",""],"uniqueID":"555_408b2b-c0","direction":["vertical","",""],"justifyContent":["space-between","",""],"verticalAlignment":"middle","padding":["xs","xs","xs","xs"],"tabletPadding":["xxs","xxs","xxs","xxs"],"kbVersion":2} -->
<div class="wp-block-kadence-column kadence-column555_408b2b-c0 kb-section-dir-vertical"><div class="kt-inside-inner-col"><!-- wp:kadence/advancedheading {"uniqueID":"555_5129f5-24","align":"center","margin":["0","0","0","0"],"padding":["0","0","0","0"],"markBorder":"","markBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}],"tabletMarkBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}],"mobileMarkBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}],"htmlTag":"p","fontSize":["sm","",""]} -->
<p class="kt-adv-heading555_5129f5-24 wp-block-kadence-advancedheading" data-kb-block="kb-adv-heading555_5129f5-24">100</p>
<!-- /wp:kadence/advancedheading --></div></div>
<!-- /wp:kadence/column -->

<!-- wp:kadence/column {"id":2,"borderWidth":["","","",""],"uniqueID":"555_3ccbf2-6a","direction":["vertical","",""],"justifyContent":["space-between","",""],"verticalAlignment":"middle","padding":["xs","xs","xs","xs"],"tabletPadding":["xxs","xxs","xxs","xxs"],"borderStyle":[{"top":["","",""],"right":["rgba(108,102,132,0.2)","",1],"bottom":["","",""],"left":["rgba(108,102,132,0.2)","",1],"unit":"px"}],"kbVersion":2} -->
<div class="wp-block-kadence-column kadence-column555_3ccbf2-6a kb-section-dir-vertical"><div class="kt-inside-inner-col"><!-- wp:kadence/advancedheading {"uniqueID":"555_d01357-fe","align":"center","margin":["0","0","0","0"],"padding":["0","0","0","0"],"markBorder":"","markBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}],"tabletMarkBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}],"mobileMarkBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}],"htmlTag":"p","fontSize":["sm","",""]} -->
<p class="kt-adv-heading555_d01357-fe wp-block-kadence-advancedheading" data-kb-block="kb-adv-heading555_d01357-fe">1200</p>
<!-- /wp:kadence/advancedheading --></div></div>
<!-- /wp:kadence/column -->

<!-- wp:kadence/column {"id":2,"borderWidth":["","","",""],"uniqueID":"555_89b64d-c8","direction":["vertical","",""],"justifyContent":["space-between","",""],"verticalAlignment":"middle","padding":["xs","xs","xs","xs"],"tabletPadding":["xxs","xxs","xxs","xxs"],"kbVersion":2} -->
<div class="wp-block-kadence-column kadence-column555_89b64d-c8 kb-section-dir-vertical"><div class="kt-inside-inner-col"><!-- wp:kadence/advancedheading {"uniqueID":"555_e59765-5b","align":"center","margin":["0","0","0","0"],"padding":["0","0","0","0"],"markBorder":"","markBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}],"tabletMarkBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}],"mobileMarkBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}],"htmlTag":"p","fontSize":["sm","",""]} -->
<p class="kt-adv-heading555_e59765-5b wp-block-kadence-advancedheading" data-kb-block="kb-adv-heading555_e59765-5b">Personnalisé</p>
<!-- /wp:kadence/advancedheading --></div></div>
<!-- /wp:kadence/column -->
<!-- /wp:kadence/rowlayout -->

<!-- wp:kadence/rowlayout {"uniqueID":"555_59215a-b1","columns":5,"mobileLayout":"equal","tabletLayout":"equal","collapseGutter":"none","customRowGutter":[0,"",""],"columnGutter":"none","customGutter":[0,"",""],"colLayout":"equal","bgColor":"palette9","bgColorClass":"theme-palette9","padding":["0","0",0,"0"],"borderStyle":[{"top":["","",""],"right":["","",""],"bottom":["rgba(108,102,132,0.2)","",1],"left":["","",""],"unit":"px"}],"kbVersion":2,"className":"table-row"} -->
<!-- wp:kadence/column {"borderWidth":["","","",""],"uniqueID":"555_7845c6-8a","direction":["vertical","",""],"justifyContent":["center","",""],"verticalAlignment":"middle","padding":["xs","xs","xs","xs"],"tabletPadding":["xxs","xxs","xxs","xxs"],"kbVersion":2} -->
<div class="wp-block-kadence-column kadence-column555_7845c6-8a kb-section-dir-vertical"><div class="kt-inside-inner-col"><!-- wp:kadence/advancedheading {"level":6,"uniqueID":"555_b06cc4-55","align":"center","margin":["0","0","0","0"],"padding":["0","0","0","0"],"markBorder":"","markBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}],"tabletMarkBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}],"mobileMarkBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}]} -->
<h6 class="kt-adv-heading555_b06cc4-55 wp-block-kadence-advancedheading" data-kb-block="kb-adv-heading555_b06cc4-55">Row 2</h6>
<!-- /wp:kadence/advancedheading --></div></div>
<!-- /wp:kadence/column -->

<!-- wp:kadence/column {"id":2,"borderWidth":["","","",""],"uniqueID":"555_475304-50","direction":["vertical","",""],"justifyContent":["space-between","",""],"verticalAlignment":"middle","padding":["xs","xs","xs","xs"],"tabletPadding":["xxs","xxs","xxs","xxs"],"borderStyle":[{"top":["","",""],"right":["rgba(108,102,132,0.2)","",1],"bottom":["","",""],"left":["rgba(108,102,132,0.2)","",1],"unit":"px"}],"kbVersion":2} -->
<div class="wp-block-kadence-column kadence-column555_475304-50 kb-section-dir-vertical"><div class="kt-inside-inner-col"><!-- wp:kadence/icon {"uniqueID":"555_36d9b3-e1"} -->
<div class="wp-block-kadence-icon kt-svg-icons kt-svg-icons555_36d9b3-e1 alignnone"><!-- wp:kadence/single-icon {"uniqueID":"555_dac500-73","icon":"fe_x","size":20,"width":3,"color":"palette3"} -->
<div class="wp-block-kadence-single-icon kt-svg-style-default kt-svg-icon-wrap kt-svg-item-555_dac500-73"><span data-name="fe_x" data-stroke="3" class="kadence-dynamic-icon"></span></div>
<!-- /wp:kadence/single-icon --></div>
<!-- /wp:kadence/icon --></div></div>
<!-- /wp:kadence/column -->

<!-- wp:kadence/column {"borderWidth":["","","",""],"uniqueID":"555_44a0ec-c5","direction":["vertical","",""],"justifyContent":["space-between","",""],"verticalAlignment":"middle","padding":["xs","xs","xs","xs"],"tabletPadding":["xxs","xxs","xxs","xxs"],"kbVersion":2} -->
<div class="wp-block-kadence-column kadence-column555_44a0ec-c5 kb-section-dir-vertical"><div class="kt-inside-inner-col"><!-- wp:kadence/icon {"uniqueID":"555_3f9e09-91"} -->
<div class="wp-block-kadence-icon kt-svg-icons kt-svg-icons555_3f9e09-91 alignnone"><!-- wp:kadence/single-icon {"uniqueID":"555_5f1f9c-1b","icon":"fe_x","size":20,"width":3,"color":"palette3"} -->
<div class="wp-block-kadence-single-icon kt-svg-style-default kt-svg-icon-wrap kt-svg-item-555_5f1f9c-1b"><span data-name="fe_x" data-stroke="3" class="kadence-dynamic-icon"></span></div>
<!-- /wp:kadence/single-icon --></div>
<!-- /wp:kadence/icon --></div></div>
<!-- /wp:kadence/column -->

<!-- wp:kadence/column {"id":2,"borderWidth":["","","",""],"uniqueID":"555_a92874-bc","direction":["vertical","",""],"justifyContent":["space-between","",""],"verticalAlignment":"middle","padding":["xs","xs","xs","xs"],"tabletPadding":["xxs","xxs","xxs","xxs"],"borderStyle":[{"top":["","",""],"right":["rgba(108,102,132,0.2)","",1],"bottom":["","",""],"left":["rgba(108,102,132,0.2)","",1],"unit":"px"}],"kbVersion":2} -->
<div class="wp-block-kadence-column kadence-column555_a92874-bc kb-section-dir-vertical"><div class="kt-inside-inner-col"><!-- wp:kadence/icon {"uniqueID":"555_db6e65-d0"} -->
<div class="wp-block-kadence-icon kt-svg-icons kt-svg-icons555_db6e65-d0 alignnone"><!-- wp:kadence/single-icon {"uniqueID":"555_f8f940-e7","icon":"fe_x","size":20,"width":3,"color":"palette3"} -->
<div class="wp-block-kadence-single-icon kt-svg-style-default kt-svg-icon-wrap kt-svg-item-555_f8f940-e7"><span data-name="fe_x" data-stroke="3" class="kadence-dynamic-icon"></span></div>
<!-- /wp:kadence/single-icon --></div>
<!-- /wp:kadence/icon --></div></div>
<!-- /wp:kadence/column -->

<!-- wp:kadence/column {"id":2,"borderWidth":["","","",""],"uniqueID":"555_ff9ac6-a8","direction":["vertical","",""],"justifyContent":["space-between","",""],"verticalAlignment":"middle","padding":["xs","xs","xs","xs"],"tabletPadding":["xxs","xxs","xxs","xxs"],"kbVersion":2} -->
<div class="wp-block-kadence-column kadence-column555_ff9ac6-a8 kb-section-dir-vertical"><div class="kt-inside-inner-col"><!-- wp:kadence/icon {"uniqueID":"555_e583c1-41"} -->
<div class="wp-block-kadence-icon kt-svg-icons kt-svg-icons555_e583c1-41 alignnone"><!-- wp:kadence/single-icon {"uniqueID":"555_76ee29-ae","icon":"fas_check-circle","size":20,"color":"var(\u002d\u002dtheme-palette-color-1, #2248ee)"} -->
<div class="wp-block-kadence-single-icon kt-svg-style-default kt-svg-icon-wrap kt-svg-item-555_76ee29-ae"><span data-name="fas_check-circle" class="kadence-dynamic-icon"></span></div>
<!-- /wp:kadence/single-icon --></div>
<!-- /wp:kadence/icon --></div></div>
<!-- /wp:kadence/column -->
<!-- /wp:kadence/rowlayout -->

<!-- wp:kadence/rowlayout {"uniqueID":"555_7da3c9-5d","columns":5,"mobileLayout":"equal","tabletLayout":"equal","collapseGutter":"none","customRowGutter":[0,"",""],"columnGutter":"none","customGutter":[0,"",""],"colLayout":"equal","bgColor":"palette9","bgColorClass":"theme-palette9","padding":["0","0",0,"0"],"borderStyle":[{"top":["","",""],"right":["","",""],"bottom":["rgba(108,102,132,0.2)","",1],"left":["","",""],"unit":"px"}],"kbVersion":2,"className":"table-row"} -->
<!-- wp:kadence/column {"borderWidth":["","","",""],"uniqueID":"555_4b5b8e-48","direction":["vertical","",""],"justifyContent":["center","",""],"verticalAlignment":"middle","padding":["xs","xs","xs","xs"],"tabletPadding":["xxs","xxs","xxs","xxs"],"kbVersion":2} -->
<div class="wp-block-kadence-column kadence-column555_4b5b8e-48 kb-section-dir-vertical"><div class="kt-inside-inner-col"><!-- wp:kadence/advancedheading {"level":6,"uniqueID":"555_3c5dcf-8e","align":"center","margin":["0","0","0","0"],"padding":["0","0","0","0"],"markBorder":"","markBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}],"tabletMarkBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}],"mobileMarkBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}]} -->
<h6 class="kt-adv-heading555_3c5dcf-8e wp-block-kadence-advancedheading" data-kb-block="kb-adv-heading555_3c5dcf-8e">Row 2</h6>
<!-- /wp:kadence/advancedheading --></div></div>
<!-- /wp:kadence/column -->

<!-- wp:kadence/column {"id":2,"borderWidth":["","","",""],"uniqueID":"555_b489f3-fc","direction":["vertical","",""],"justifyContent":["space-between","",""],"verticalAlignment":"middle","padding":["xs","xs","xs","xs"],"tabletPadding":["xxs","xxs","xxs","xxs"],"borderStyle":[{"top":["","",""],"right":["rgba(108,102,132,0.2)","",1],"bottom":["","",""],"left":["rgba(108,102,132,0.2)","",1],"unit":"px"}],"kbVersion":2} -->
<div class="wp-block-kadence-column kadence-column555_b489f3-fc kb-section-dir-vertical"><div class="kt-inside-inner-col"><!-- wp:kadence/icon {"uniqueID":"555_8429b2-92"} -->
<div class="wp-block-kadence-icon kt-svg-icons kt-svg-icons555_8429b2-92 alignnone"><!-- wp:kadence/single-icon {"uniqueID":"555_9b8658-c9","icon":"fas_check-circle","size":20,"color":"var(\u002d\u002dtheme-palette-color-1, #2248ee)"} -->
<div class="wp-block-kadence-single-icon kt-svg-style-default kt-svg-icon-wrap kt-svg-item-555_9b8658-c9"><span data-name="fas_check-circle" class="kadence-dynamic-icon"></span></div>
<!-- /wp:kadence/single-icon --></div>
<!-- /wp:kadence/icon --></div></div>
<!-- /wp:kadence/column -->

<!-- wp:kadence/column {"borderWidth":["","","",""],"uniqueID":"555_39c5e9-bb","direction":["vertical","",""],"justifyContent":["space-between","",""],"verticalAlignment":"middle","padding":["xs","xs","xs","xs"],"tabletPadding":["xxs","xxs","xxs","xxs"],"kbVersion":2} -->
<div class="wp-block-kadence-column kadence-column555_39c5e9-bb kb-section-dir-vertical"><div class="kt-inside-inner-col"><!-- wp:kadence/icon {"uniqueID":"555_9e21fb-24"} -->
<div class="wp-block-kadence-icon kt-svg-icons kt-svg-icons555_9e21fb-24 alignnone"><!-- wp:kadence/single-icon {"uniqueID":"555_d9a29c-5e","icon":"fas_check-circle","size":20,"color":"var(\u002d\u002dtheme-palette-color-1, #2248ee)"} -->
<div class="wp-block-kadence-single-icon kt-svg-style-default kt-svg-icon-wrap kt-svg-item-555_d9a29c-5e"><span data-name="fas_check-circle" class="kadence-dynamic-icon"></span></div>
<!-- /wp:kadence/single-icon --></div>
<!-- /wp:kadence/icon --></div></div>
<!-- /wp:kadence/column -->

<!-- wp:kadence/column {"id":2,"borderWidth":["","","",""],"uniqueID":"555_42d3f7-e0","direction":["vertical","",""],"justifyContent":["space-between","",""],"verticalAlignment":"middle","padding":["xs","xs","xs","xs"],"tabletPadding":["xxs","xxs","xxs","xxs"],"borderStyle":[{"top":["","",""],"right":["rgba(108,102,132,0.2)","",1],"bottom":["","",""],"left":["rgba(108,102,132,0.2)","",1],"unit":"px"}],"kbVersion":2} -->
<div class="wp-block-kadence-column kadence-column555_42d3f7-e0 kb-section-dir-vertical"><div class="kt-inside-inner-col"><!-- wp:kadence/icon {"uniqueID":"555_b341dd-cd"} -->
<div class="wp-block-kadence-icon kt-svg-icons kt-svg-icons555_b341dd-cd alignnone"><!-- wp:kadence/single-icon {"uniqueID":"555_476d6b-ad","icon":"fas_check-circle","size":20,"color":"var(\u002d\u002dtheme-palette-color-1, #2248ee)"} -->
<div class="wp-block-kadence-single-icon kt-svg-style-default kt-svg-icon-wrap kt-svg-item-555_476d6b-ad"><span data-name="fas_check-circle" class="kadence-dynamic-icon"></span></div>
<!-- /wp:kadence/single-icon --></div>
<!-- /wp:kadence/icon --></div></div>
<!-- /wp:kadence/column -->

<!-- wp:kadence/column {"id":2,"borderWidth":["","","",""],"uniqueID":"555_708973-ca","direction":["vertical","",""],"justifyContent":["space-between","",""],"verticalAlignment":"middle","padding":["xs","xs","xs","xs"],"tabletPadding":["xxs","xxs","xxs","xxs"],"kbVersion":2} -->
<div class="wp-block-kadence-column kadence-column555_708973-ca kb-section-dir-vertical"><div class="kt-inside-inner-col"><!-- wp:kadence/icon {"uniqueID":"555_e40963-16"} -->
<div class="wp-block-kadence-icon kt-svg-icons kt-svg-icons555_e40963-16 alignnone"><!-- wp:kadence/single-icon {"uniqueID":"555_2b7439-c8","icon":"fas_check-circle","size":20,"color":"var(\u002d\u002dtheme-palette-color-1, #2248ee)"} -->
<div class="wp-block-kadence-single-icon kt-svg-style-default kt-svg-icon-wrap kt-svg-item-555_2b7439-c8"><span data-name="fas_check-circle" class="kadence-dynamic-icon"></span></div>
<!-- /wp:kadence/single-icon --></div>
<!-- /wp:kadence/icon --></div></div>
<!-- /wp:kadence/column -->
<!-- /wp:kadence/rowlayout --></div></div>
<!-- /wp:kadence/column -->
<!-- /wp:kadence/rowlayout -->
HTML
Expand

Limitation of this Method

This method uses divs to create a table which is not good semantically, It shoudl use table, td, tr, etc to make sure it’s correct in that way.

Feel free to comment if you face any issues or ping me on facebook, link is given below. Thanks

Subscribe to my Newsletter

If you love my tutorials, consider subscribing to not miss any awesome tips about block editors.

Don't Keep This Magic to Yourself - Share!
Rahul Singh
Rahul Singh

With more than 5 years of wrangling Kadence and Blocksy Themes, plus mastering the Block Editor, I turn complex web design into a breeze. My superpower? Crafting websites that are both fast and fabulous, with a dash of fun and a focus on making conversions soar!

Articles: 8

Leave a Reply

Your email address will not be published. Required fields are marked *


Related Tutorials

Popular Tutorials

Creating Section Slider in Kadence Blocks Using Row Layout
Create After / Before Image Comparison in Kadence Blocks
Kadence Timeline Block with CSS only – Fully Responsive
Creating Switchable Images via Kadence Tabs – Free Snippet Included