[Resolved] Adding Colspan to table breaks HTML?

[MMS]

Hi, I’m trying to span a title over two columns using colspan=”2″ (See simple table example below) but when I try this there doesn’t seem to be an option either by changing the HTML or via the interface. Also, there seems to be only an option to change the background color on the whole table and not individual rows.

<figure class="wp-block-table"><table><thead><tr><th class="has-text-align-center" data-align="center">Heading 1</th><th class="has-text-align-center" data-align="center">Heading 2</th></tr></thead><tbody><tr><td class="has-text-align-center" data-align="center">
Title Spanning 2 columns</td><td class="has-text-align-center" data-align="center"></td></tr><tr><td class="has-text-align-center" data-align="center">Data 1</td><td class="has-text-align-center" data-align="center">Data 2</td></tr></tbody></table></figure>

Can you please advise how this could be done. Thanks

[Leo]

Hi there,

The table block is a WP core block so the theme doesn’t have any control over the functionality:
https://wordpress.org/documentation/article/table-block/

The core blocks don’t usually offer a lot of options for customizations either.

Perhaps using the Grid block from GB is a better option?
https://docs.generateblocks.com/article/grid-overview/

Or you can try a table-specific plugin.

Let me know if this helps 🙂

[MMS]

Hi, Thanks for the feedback. I tried the grid block but have a few issues I can’t seem to find a way to prevent:-

1. Is there a way to stop the table headings from wrapping under each other in mobile view?
2. I can’t reduce the gap between each row.
3. I can’t get rows with an uneven amount of text to color the background evenly i.e. the whole cell rather than just the text.

See the table test using a grid here:- https://makemesustainable.com/table-test-with-grid/

Any help to overcome these would be a great help. Thanks.

[David]

Hi there,

just a few questions:

a) how big will the table become ?
b) will the table be used in many places?
b.i) if yes, then will it use the exact same layout?

Just want to understand if the Grid method is the best route, or whether a dedicated Table plugin would be better suited.

[MMS]

Hi, The table is to replace the one shown on this page:-
https://makemesustainable.com/tru-earth-vs-earth-breeze/
I was planning to turn this into a 2 column table and have each category from the first column as a separate row spanning both remaining columns. I will be using the same type of table in future twin product comparison (vs) posts. They will be a very similar layout.

I was hoping to avoid additional plugins although if you know of a good one that won’t slow my site down then happy to take a look. Thanks

[David]

OK, so i would approach it like this.
For a visual guide, first create a draft page, and from the 3 dot top bar menu, switch to the Code Editor.
Paste in this code:

<!-- wp:generateblocks/grid {"uniqueId":"ce20be6b","columns":4,"isDynamic":true,"blockVersion":3} -->
<!-- wp:generateblocks/container {"uniqueId":"db43eb58","isGrid":true,"gridId":"ce20be6b","backgroundColor":"#56ddae","isDynamic":true,"blockVersion":3,"orderMobile":-1,"sizing":{"width":"50%","widthMobile":"100%"},"paddingTop":"15","paddingRight":"15","paddingBottom":"15","paddingLeft":"15","paddingSyncUnits":true} -->
<!-- wp:generateblocks/headline {"uniqueId":"61cabdb1","element":"p","blockVersion":2,"alignment":"center","marginBottom":"0"} -->
<p class="gb-headline gb-headline-61cabdb1 gb-headline-text"><strong>Table Heading 1</strong></p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"2db95a6f","isGrid":true,"gridId":"ce20be6b","backgroundColor":"#56ddae","isDynamic":true,"blockVersion":3,"sizing":{"width":"50%","widthMobile":"100%"},"paddingTop":"15","paddingRight":"15","paddingBottom":"15","paddingLeft":"15","paddingSyncUnits":true} -->
<!-- wp:generateblocks/headline {"uniqueId":"ba241754","element":"p","blockVersion":2,"alignment":"center","marginBottom":"0"} -->
<p class="gb-headline gb-headline-ba241754 gb-headline-text"><strong>Table Heading 1</strong></p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"8cdeeb86","isGrid":true,"gridId":"ce20be6b","backgroundColor":"var(\u002d\u002dbase)","isDynamic":true,"blockVersion":3,"orderMobile":-1,"sizing":{"width":"50%","widthMobile":"100%"},"paddingTop":"15","paddingRight":"15","paddingBottom":"15","paddingLeft":"15","paddingSyncUnits":true} -->
<!-- wp:generateblocks/headline {"uniqueId":"dfa24211","element":"p","blockVersion":2,"alignment":"center","marginBottom":"0"} -->
<p class="gb-headline gb-headline-dfa24211 gb-headline-text"><em>“</em>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi<em>“</em></p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"2778eb19","isGrid":true,"gridId":"ce20be6b","backgroundColor":"var(\u002d\u002dbase)","isDynamic":true,"blockVersion":3,"sizing":{"width":"50%","widthMobile":"100%"},"paddingTop":"15","paddingRight":"15","paddingBottom":"15","paddingLeft":"15","paddingSyncUnits":true} -->
<!-- wp:generateblocks/headline {"uniqueId":"d5c7d4c0","element":"p","blockVersion":2,"alignment":"center","marginBottom":"0"} -->
<p class="gb-headline gb-headline-d5c7d4c0 gb-headline-text"><em>“</em>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi<em>“</em></p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->

<!-- wp:generateblocks/container {"uniqueId":"8f994111","backgroundColor":"var(\u002d\u002dcontrast-3)","bgOptions":{"selector":"element","opacity":1,"overlay":false,"position":"center center","size":"cover","repeat":"no-repeat","attachment":""},"shapeDividers":[],"isDynamic":true,"blockVersion":3,"sizing":{"width":"","widthMobile":"100%"},"paddingTop":"15","paddingRight":"15","paddingBottom":"15","paddingLeft":"15","opacities":[],"transitions":[],"boxShadows":[],"transforms":[],"textShadows":[],"filters":[],"advBackgrounds":[]} -->
<!-- wp:generateblocks/headline {"uniqueId":"a23307e6","element":"p","blockVersion":2,"alignment":"center","marginBottom":"0"} -->
<p class="gb-headline gb-headline-a23307e6 gb-headline-text"><strong><strong>Heading spanning 2 rows</strong></strong></p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

Then switch back to visual editor.

NOTE:

1. Use Grid for each 2 column row.
2. Each column Container has the Background Color and Padding.
3. the text in the containers is set using a GB Headline Block with 0 bottom margin, this will remove the unwanted gaps.
4. In mobile view, the left hand containers have a Layout > Flex Child -> Order of -1 which positions them both above the the right hand column.
5. The double width item is just a separate container.

You would then duplicate that layout for each row you want to add.

[MMS]

Hi, Unfortunately, this still seems to collapse the header and data cells in mobile view

Is it possible to retain the same structure as per the example screenshot / mockup in the following link?

https://imgur.com/a/ZL6fJnR

Thanks

[David]

Ah ok, try this:

<!-- wp:generateblocks/grid {"uniqueId":"ce20be6b","columns":7,"isDynamic":true,"blockVersion":3} -->
<!-- wp:generateblocks/container {"uniqueId":"db43eb58","isGrid":true,"gridId":"ce20be6b","backgroundColor":"#56ddae","isDynamic":true,"blockVersion":3,"sizing":{"width":"50%","widthMobile":"50%"},"paddingTop":"15","paddingRight":"15","paddingBottom":"15","paddingLeft":"15","paddingSyncUnits":true} -->
<!-- wp:generateblocks/headline {"uniqueId":"61cabdb1","element":"p","blockVersion":2,"alignment":"center","marginBottom":"0","backgroundColor":""} -->
<p class="gb-headline gb-headline-61cabdb1 gb-headline-text"><strong><strong>Settings > Width: 50%</strong></strong></p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"2db95a6f","isGrid":true,"gridId":"ce20be6b","backgroundColor":"#56ddae","isDynamic":true,"blockVersion":3,"sizing":{"width":"50%","widthMobile":"50%"},"paddingTop":"15","paddingRight":"15","paddingBottom":"15","paddingLeft":"15","paddingSyncUnits":true} -->
<!-- wp:generateblocks/headline {"uniqueId":"ba241754","element":"p","blockVersion":2,"alignment":"center","marginBottom":"0","backgroundColor":""} -->
<p class="gb-headline gb-headline-ba241754 gb-headline-text"><strong>Settings > Width: 50% </strong></p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"8cdeeb86","isGrid":true,"gridId":"ce20be6b","backgroundColor":"var(\u002d\u002dbase)","isDynamic":true,"blockVersion":3,"sizing":{"width":"50%","widthMobile":"50%","minHeight":"100%"},"paddingTop":"15","paddingRight":"15","paddingBottom":"15","paddingLeft":"15","paddingSyncUnits":true} -->
<!-- wp:generateblocks/headline {"uniqueId":"dfa24211","element":"p","blockVersion":2,"alignment":"center","marginBottom":"0","backgroundColor":"","textColor":"","linkColor":""} -->
<p class="gb-headline gb-headline-dfa24211 gb-headline-text"><em>“</em>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi<em>“</em></p>
<!-- /wp:generateblocks/headline -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center"><strong>This containers have Sizing > Height 100%</strong><br>So the columns are the same height</p>
<!-- /wp:paragraph -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"2778eb19","isGrid":true,"gridId":"ce20be6b","backgroundColor":"var(\u002d\u002dbase)","bgOptions":{"selector":"element","opacity":1,"overlay":false,"position":"center center","size":"cover","repeat":"no-repeat","attachment":""},"shapeDividers":[],"isDynamic":true,"blockVersion":3,"sizing":{"width":"50%","widthMobile":"50%","minHeight":"100%"},"paddingTop":"15","paddingRight":"15","paddingBottom":"15","paddingLeft":"15","paddingSyncUnits":true} -->
<!-- wp:generateblocks/headline {"uniqueId":"d5c7d4c0","element":"p","blockVersion":2,"alignment":"center","marginBottom":"0","backgroundColor":"","textColor":"","linkColor":"","linkColorHover":"","borderColor":"","iconColor":""} -->
<p class="gb-headline gb-headline-d5c7d4c0 gb-headline-text"><em>“</em>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi<em>“</em></p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"ab4ef4ad","isGrid":true,"gridId":"ce20be6b","backgroundColor":"var(\u002d\u002dcontrast-3)","isDynamic":true,"blockVersion":3,"sizing":{"width":"100%","widthMobile":"100%"},"paddingTop":"15","paddingRight":"15","paddingBottom":"15","paddingLeft":"15","paddingSyncUnits":true} -->
<!-- wp:generateblocks/headline {"uniqueId":"e29ae98a","element":"p","blockVersion":2,"alignment":"center","marginBottom":"0","backgroundColor":"","textColor":"","linkColor":"","linkColorHover":"","borderColor":"","iconColor":""} -->
<p class="gb-headline gb-headline-e29ae98a gb-headline-text"><strong>Settings > Width: 100%</strong></p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"0b8ac94c","isGrid":true,"gridId":"ce20be6b","backgroundColor":"var(\u002d\u002dbase)","bgOptions":{"selector":"element","opacity":1,"overlay":false,"position":"center center","size":"cover","repeat":"no-repeat","attachment":""},"shapeDividers":[],"isDynamic":true,"blockVersion":3,"sizing":{"width":"50%","widthMobile":"50%","minHeight":"100%"},"paddingTop":"15","paddingRight":"15","paddingBottom":"15","paddingLeft":"15","paddingSyncUnits":true} -->
<!-- wp:generateblocks/headline {"uniqueId":"2f82391a","element":"p","blockVersion":2,"alignment":"center","marginBottom":"0","backgroundColor":"","textColor":"","linkColor":"","linkColorHover":""} -->
<p class="gb-headline gb-headline-2f82391a gb-headline-text"><em>“</em>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi<em>“</em></p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"e97d434a","isGrid":true,"gridId":"ce20be6b","backgroundColor":"var(\u002d\u002dbase)","bgOptions":{"selector":"element","opacity":1,"overlay":false,"position":"center center","size":"cover","repeat":"no-repeat","attachment":""},"shapeDividers":[],"isDynamic":true,"blockVersion":3,"sizing":{"width":"50%","widthMobile":"50%","minHeight":"100%"},"paddingTop":"15","paddingRight":"15","paddingBottom":"15","paddingLeft":"15","paddingSyncUnits":true} -->
<!-- wp:generateblocks/headline {"uniqueId":"c0d812f4","element":"p","blockVersion":2,"alignment":"center","marginBottom":"0","backgroundColor":"","textColor":"","linkColor":"","linkColorHover":"","borderColor":"","iconColor":""} -->
<p class="gb-headline gb-headline-c0d812f4 gb-headline-text"><em>“</em>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi<em>“</em></p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->

Its a single grid.
Note the difference is a the width is set to either 50% or 100% if you want an item to span 1 or 2 columns.
The height of the text items are set to 100%.
You can duplicate any container in the grid to create new rows.

[MMS]

Perfect! Many thanks for your help.

[David]

You’re welcome

[Author]

Posts