[modification request] table styling in Prose

[nsolerieu]

Problem

SWP asked for getting HTML table support for SEO and solution page using the Prose component. It is not supported as of today

Historical context:

• Prose only supports paragraphs, headings, quotes, lists and links today
• We kept the initial scope light, assuming that support for other tags will improve over time on an as-needed basis
• The inherited styling from the ReadMe project got cut from the current Prose component

Solution

Per discussion between Site and Primer Brand, we would like to implement basic styling (aka- support) for of the <table> markup.

Here is an in-situ suggestion using our text, color, border primitives

We cant restrict the amount of column but would highly suggest to limit to 5 or perhaps fix the min-width of <td> and have an overflow-y: scroll

I do not recommend using a boxed design to minimize the visual noise and fit the editorial styling we have been moving toward brand-wise

Urgency

No major urgency, SWP is working on scaling the template and could use capability anytime

[rezrah]

Discussed at Planning:

• @nsolerieu to take on some additional design investigation
• re-review at next planning session (next Monday)

[nsolerieu]

Scope

This is not the data table component, we do not have the same control since the user is the one shaping the table DOM structure - thsu we can't create a "shell" only style the native HTML markup

---

Current version of table styling int he github ecosystem: the blog

Design notes:

• Looks generic and unpolished
• Color looks branded/opinioated
• Spacing is very large and formated for few column use (3-4 max)
• Borders add a lot of noise
• This looks optimized for web 2.0 standards
• Mobile behavior is standard - shrink evenly

Desktop	Mobile

---

Test with real content

Without overriding the native behavior of the table markup, things will squich on mobile which is not working on mobile and could use a collapse specific styling with sticky header.

Text content

Desktop	Mobile

Data

Desktop	Mobile

---

Suggestion

The only mobile solution to fix this mobile issue is to collapse and keep the table header for context like the example here. This is achieve by adding a data-label to each <td>

Desktop	Mobile

[nsolerieu]

Primer Brand x Site design

We decided to not pursue the suggested approach for these reasons:

• Allowing editors to pass classes/dat attributes in HTML is not secure
• Expecting editors to know what to insert in HTML is unlikely
• Text don't belong in a table, especially the large amount we are expecting

Guidelines

• No text in tables. Text based comparison or content sets should be formatted as regular text and follow regular editorial guidelines (heading > Text > Separator > Smaller heading > Text > ... )
• Large numerical data sets (larger that 4 column) should be formatted using a dedicated data-table
• Numerical data set with row label followed by up to 2 columns the ideal case for using this in-prose HTML table