primer
[modification request] table styling in Prose
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
Discussed at Planning:
- @nsolerieu to take on some additional design investigation
- re-review at next planning session (next Monday)
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 |
|---|---|
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