Mapping Table node to <table> tag in bodyXML and vice versa

[epavlova]

Background

There are differences between the Table content tree node and the table tag in the bodyXML representation. Potentially, they will be troublesome for the transforming the bodyXML to the content tree format and vice versa.

Example article with table "The people vs Elon Musk: billionaire transforms Wisconsin court contest", Mar 2025:

<table class="data-table" data-table-collapse-rownum="" data-table-layout-largescreen="auto"
       data-table-layout-smallscreen="auto" data-table-theme="auto">
    <caption>
        Largest spending groups in Wisconsin supreme court election
    </caption>
    <thead>
        <tr>
            <th data-column-hidden="none" data-column-sortable="false" data-column-type="string">Group
            </th>
            <th data-column-hidden="none" data-column-sortable="false" data-column-type="string">Amount spent
            </th>
            <th data-column-hidden="none" data-column-sortable="false" data-column-type="string">Preferred candidate
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Susan Crawford (candidate)</td>
            <td>$22,042,953</td>
            <td>Crawford</td>
        </tr>
       ...
        <tr>
            <td>Americans for Prosperity</td>
            <td>$3,172,910</td>
            <td>Schimel</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="1000">Through March 26; Source: Brennan Center for Justice, Wisconsin Ethics Commission,
                Vivvix/CMAG
            </td>
        </tr>
    </tfoot>
</table>

<th> tags

The bodyXML representation of <table> tag support 4 different types of children - caption, head, body and footer. The content tree element doesn't have an element corresponding to head.

The table head has the following definition in XHTML format:

<xs:complexType name="Th">
        <xs:complexContent>
            <xs:extension base="Td">
                <xs:attribute name="data-column-type" type="xs:string"/>
                <xs:attribute name="data-column-sortable" type="xs:boolean"/>
                <xs:attribute name="data-column-default-sort" type="xs:string"/>
                <xs:attribute name="data-column-hidden" type="xs:string"/>
            </xs:extension>
        </xs:complexContent>
    </xs:complexType>

<table> attributes

The bodyXML representation of table tag support the following attributes:

<xs:attribute name="class" type="xs:string" fixed="data-table" use="required"/>
<xs:attribute name="id" type="xs:string"/>
<xs:attribute name="data-table-layout-largescreen" type="xs:string"/>
<xs:attribute name="data-name" type="xs:string"/>
<xs:attribute name="data-table-layout-smallscreen" type="xs:string"/>
<xs:attribute name="data-table-theme" type="xs:string"/>
<xs:attribute name="data-table-collapse-rownum" type="xs:string"/>

They don't quite match the attributes of the Table content tree node.

interface Table extends Parent {
	type: 'table'
	stripes: boolean
	compact: boolean
	layoutWidth:
		| 'auto'
		| 'full-grid'
		| 'inset-left'
		| 'inset-right'
		| 'full-bleed'
	collapseAfterHowManyRows?: number
	responsiveStyle: 'overflow' | 'flat' | 'scroll'
	children: [TableCaption, TableBody, TableFooter] | [TableCaption, TableBody] | [TableBody, TableFooter] | [TableBody]
	columnSettings: TableColumnSettings[]
}

<td> attributes

The <td> tags support colspan attribute which doesn't have corresponding attribute in the TableCell content tree node.

    <xs:attribute name="colspan" type="xs:string"/>

TableCell attributes

The TableCell node supports heading attribute which is not present in the bodyXML representation of the td tag.

interface TableCell extends Parent {
   type: 'table-cell'
	heading?: boolean
	children: Phrasing[]
}

Possible approaches

Most probably all of those are worth a discussion before any approaches are suggested.

[adgad]

<th>tags

In content tree we're not explicitly including the row or cells as it's own type, but instead using a heading attribute on the cells.

So the structure of a content-tree table is always Table -> TableBody -> TableRow -> TableCell , where some of the cells can be heading: true

I'm not entirely sure why we've done it like that. I suppose it was thought about with being coupled to the HTML spec, but we do have TableBody and TableFooter 🤔

Perhaps a sensible solution would be to include a TableHeader node, but still keep heading: true on the TableCell to avoid needing a <th> equivalent? This would need a change in CP as well but I think do-able

[adgad]

<table>attributes

<xs:attribute name="class" type="xs:string" fixed="data-table" use="required"/>
We hard-code this to "data-table" when publishing from spark, so I think it's redundant

<xs:attribute name="id" type="xs:string"/>
We don't currently publish this from Spark, or do anything with it on front end, so I think it's safe to not have

<xs:attribute name="data-table-layout-largescreen" type="xs:string"/>
This is mapped to the layoutWidth attribute

<xs:attribute name="data-name" type="xs:string"/>
We're not currently publishing this in Spark or doing anything with it

<xs:attribute name="data-table-layout-smallscreen" type="xs:string"/>
This is mapped to the responsiveStyle attribute

<xs:attribute name="data-table-theme" type="xs:string"/>
It looks like we're mapping this to two boolean attributes: stripes or compact:

const stripes = theme.includes('stripes');
const compact = theme.includes('compact');

<xs:attribute name="data-table-collapse-rownum" type="xs:string"/>
This is mapped to collapseAfterHowManyRows

[adgad]

<td> attributes

It seems we don't support colspan on cells in Spark anymore. Going by our principle that means we shouldn't support it in content tree - although this would be a breaking visual/meaningful change!

TODO: Do we know how many historic articles have a td with a colspan?

[adgad]

<tfoot>

Currently this is modeled as a TableFooter which has text.

We think it's possible some older content, or Specialist US might have any sort of HTML table which allows multiple cells in the footer.

TODO: try and figure out what sort of content Specialist US has, and get some examples of tables.

[epavlova]

I've investigated the pre-Spark content and there are a couple of scenarios where we use the colspan attribute. These cases differ from the one we discussed above where the attribute indicates that the footer should span all columns.

• The articles published with topic Banking & Savings use tables often:
  "Latest savings rates", Published Mar 31 2014, Updated Jun 5 2020
  "Latest Isa rates", Published Mar 31 2014, Updated Jun 5 2020
  "Latest National Savings & Investments rates", Published Mar 31 2014, Updated Jun 5 2020

• There are articles in which tables are used as footers which was a bit surprising:
  "Clegg feels disquiet over Help to Buy", Published Sep 16 2013, Updated Sep 17 2013
  "US moves warships closer to Syria after chemical attack", Published Aug 24 2013, Updated Aug 24 2013

• The Weekend desk have published many recipes in tables:
  "Kiril Sokoloff: ‘There will have to be massive debt relief’", May 1 2020
  "Among the lemon groves of Amalfi", May 1 2020
  "Kimchi patatas — a Ravinder Bhogal recipe", May 6 2020

• The articles with the topic Bridge - Card game use tables often, though I think this is not a critical use case and the absence of colspan attribute won't cause significant visual change:
  "Contract bridge: Avoidance, foresight, and skill bring home vexing game contract", May 27 2020
  "Contract bridge: Strangely silent opponent dooms partnership", Jun 3 2020

We have a total of 8,887 tables with colspan attribute and out of them 6,332 are using the colspan for use cases different from "footer across all columns".

If we decide to keep those 6,332 tables with their current visual representations (I think we should) by extend the TableCell with colspan, I would suggest also adding separate TableHeader node. We already have TableBody and TableFooter and that would bring us closer to the HTML table representation.

[adgad]

Decision: add columnSpan to Content Tree. At some point in the future, Spark + cp-content-pipeline should add support.

TODO: @adgad to see the impact of adding TableHeader to content-tree

TODO: @todor-videv1 @epavlova confirm we've never used rowspan

[epavlova]

Unfortunately, we have tables with rowspan attribute used. However the number of articles is much smaller - 65.
Some examples:

• "Donald Trump by the numbers", Mar 2016 - the articles has two rows with Image Sets;
• "Budget 2017: Tax allowances and reliefs", Nov 2017 - the use of rowspan doesn't seem to affect the actual visual representation on the site for this one
• "Prepare for care fees shake-up", Jul 2012 - the rowspan is affecting the "header" of the table;

Having in mind the small number of affected articles, if we don't consider rowspan useful for future use cases, I think it's safe to skip it.

[adgad]

I kinda feel like if in the future we add column span support to Spark, it would make sense to add row span as well (in the sense that it's just merging cells, effectively). In fact by default Prosemirror's table plugin supports both, we just don't have the UI / shortcuts to support it 🤷