The table block footer section is not displaying properly.

[viralsampat-multidots]

What problem does this address?

I have checked Gutenberg table block and I have added its header section, test data, and footer section. But, in admin and at front-end user can't identify that which is footer section. Because footer section is react like row & columns data.

For better understanding here I have attached video for the same.
Video

What is your proposed solution?

Here, I have one suggestion like if possible then we can modified footer section like our header section, If we will display like our header section. So user can easily identify that here we have footer section.

[devanshijoshi9]

Hey @t-hamano 👋

To display the footer section the same as the header section, I have added the same style as thead > th tag in the theme. scss file locally.

Here is the output for the same:

In editor:

In front-end:

Let me know if it is the right implementation. Thanks.

[t-hamano]

@viralsampat-multidots
Thank you for your contribution.

I saw your video and the borders below the thead and above the tfoot are defined in theme.css. In other words, the borders are displayed in themes that have opted for block styles through add_theme_support( 'wp-block-styles'), as in Twenty Twenty Two.

In your video, this border disappears on the front end, but the latest Gutenberg trunk appears to have resolved this issue. This should not be a problem in themes that support block styles, since thead and tfoot can be identified by the border.

However, in themes without block styles like TT3, there remains the problem of not being able to visually identify where the footer is.

To solve this problem, @devanshijoshi9 tried the approach of making the tfoot font thicker, but the style change affects backward compatibility. In my opinion, we might refrain from changing the style for visual purposes, since the placeholder text will tell us that it is a footer before we enter text.

@mikachan @aaronrobertshaw @alexstine
If you have any comments on this proposal or a better approach to solving this problem, I would love to hear your advice 🙏

[alexstine]

@joedolson Maybe some visual feedback you can provide?

[aaronrobertshaw]

If you have any comments on this proposal

Thanks for the ping 👍

I gave this a bit of a test and witnessed the same behaviour, and came to the same conclusions as @t-hamano.

To solve this problem, @devanshijoshi9 tried the approach of making the tfoot font thicker, but the style change affects backward compatibility

To play devil's advocate for a moment, it could also be possible to view the footer's lack of distinction as a visual bug or accessibility issue. Depending on how subtle any styling tweaks were, they might be a welcome change.

That said, I don't have a strong opinion in this case, but I would likely lean towards not introducing anything potentially breaking as well.

There’s also been some long running discussion around improving the Table block, including refactoring it to use inner blocks which would provide a huge increase in terms of what we could control and style. The downside there is any change on that front is going to be slow as its a huge and complex job.

[joedolson]

Overall, I'd like to see the table block refactored so that it offers a better overall experience.

The biggest problem I can see with the lack of a visually distinct demarcation of tfoot is that users will simply treat it as an additional row of the table body, not noticing that it's actually a footer. Because the only visible marker is a placeholder, once you've added content to the cell, there's no obvious way to know that it's any different from other rows.

That may be obvious when you create the block, but not necessarily to a second editor who comes in to make changes, later.

I'd consider the lack of distinction to be a bug.

[t-hamano]

Thanks for your input, @aaronrobertshaw, @joedolson.

For the moment, I have added this issue as a bug in the tracking issue. (possibly an enhancement).

Also, @viralsampat-multidots has submitted #46567, which seems to offer a solution that includes making the font-weight thicker.

[ntsekouras]

Can we close this one since #46567 has landed?

[t-hamano]

@ntsekouras
Thanks for letting me know.

In #46567, thead and tfoot borders were finally moved from theme.css to style.css. So the borders are now visible regardless of whether or not wp-block-styles opts in.

I would like to close this issue, but if I have missed something please comment.

Twenty Twenty Three:

Twenty Twenty One: