How to merge cells in a table element?

Hi! I just joined Weblfow :wave:

I’m stuck on merging cells in a table element for quite a while now. In Ms Excel or Google sheets, you could just select cells and merge them together.

This is what my table currently looks like:

image

This is how I want it to be:

image

I want to show a read-only access to my editor, but due to privacy reasons, I won’t be able to :frowning_face:

Thanks for understanding. I would appreciate it if someone could point me to the right direction.

Hi John,

Webflow doesn’t have a table element.
If you’re using an HTML embed, you can use rowspan and colspan.

Hi Michael,

Thanks for the response.

That’s weird. I have this in my elements

image

That’s a series of custom elements.

You should be able to add rowspan and colspan as custom attributes, you’ll want to review the HTML spec for <td> elements in order to see how it’s done.

Side note- I think Finsweet has a designer app for building static-content tables, that could be what was used to create this. It might support rowspan and colspan already as part of the designer UX. I’d check for that app first, and see what it can do.

2 Likes

Thanks for guiding me Michael

Just checked the HTML file

image

It really is an HTML table.

What might be the next move here?

^ This is your next move

It seems like I can’t edit the HTML of the page.

I’m also not sure where I could edit the HTML of this specific element - where might I find this?

If you type “embed” in the Elements Panel, it will literally appear.

Screenshot_2024-04-18_120455

Hi @samliew! Thanks for chiming in

Yes, I can embed an HTML, but what I was looking for is editing the exact HTML of this table component

image

If the table itself is an HTML embed, then I would be able to access it, but since it is not, I’m not sure how I would go about editing it.

EDIT: The weird thing is I can’t even see this table_component in the components tab

image

It’s not a component.

And it’s also not an embed.

Each element in the table is a custom element, you just select them in your left side navigation.
To change one, you’d e.g. click a table_cell element, and then add the custom attributes you want.

You need to read up on how these work so that you understand how to structure your table.

Adding in to the above, use custom attributes to adjust by adding in rowspan or colspan values as Finsweet Table does not account for rowspan or colspan off the bat.

In your case, you need a rowspan = "4" attribute on your Place 2 cell.

P.S. @memetican did mentioned you can use custom attributes to add in rowspan and colspan above, I hope the screenshot make it clearer for you.

1 Like

Thanks @jiyong

I was wondering where I could add tags to an element. It turns out it was just in the settings. Thanks for pointing that out.

Thanks for those who helped as well @memetican @samliew