<td> elements have the flow content content model, so it is fine for them to have child <span> elements.

The only difference between the HTML for this method and the HTML for a typical table is that contents of <td> elements must be wrapped. For example, in the HTML for this method, the contents of <td> elements are wrapped in <span> elements:

Rationale

Wrapping allows the content of a <td> element to be laid out in its own box when the table is in card mode. For example, consider a <td> element in the DOM tree when the table is in card mode:

< td data-label = " Breed " > ::before < span > Persian Cat </ span > </ td >

This structure allows Persian Cat to be laid out in a box adjacent to the ::before pseudo element's box. This can be done using styles like td:before, td > span { display: inline-block; } or td:before, td > span { display: table-cell; } . If there is no wrapper element, the same <td> element would have the following structure in the DOM tree:

< td data-label = " Breed " > ::before Persian Cat </ td >