USWDS - General (Table): Apply theme header background color and color to all th elements#5779
USWDS - General (Table): Apply theme header background color and color to all th elements#5779ajanickiv wants to merge 3 commits into
Conversation
| <colgroup span="2"></colgroup> | ||
| <colgroup span="2"></colgroup> | ||
| <colgroup span="2"></colgroup> | ||
| <colgroup span="2"></colgroup> |
There was a problem hiding this comment.
info: Added additional colgroup elements to satisfy the requirements laid out by the W3 for irregular headers. "If a header spans two or more columns, use a element instead of that number of elements, and the number of columns spanned is noted in the span attribute." Since there are 6 headers spanning 2 columns each - there should be 6 elements.
There was a problem hiding this comment.
Thank you for flagging this! Shortly after this PR was made, we updated our table markup and no longer have a user-facing table with multi-column headers.
I've added a comment to uswds/uswds-site#2263 to keep track of as we add examples to our guidance.
| <tbody> | ||
| <tr> | ||
| <th scope="row">Tango</th> | ||
| <td>Tango</td> |
There was a problem hiding this comment.
info: Tango, Foxtrot, Hilo, and Bravo are the alphabetical sorting examples and not related to the data in the other columns, so they should td elements, not th
|
Hey there @ajanickiv ! Thank you for your work here. We've decided to separate the markup changes from the style changes to maintain the scope of this work. I'm going to close this in favor of #5986 which will isolate the style changes needed. We'll add you as a contributor! |
Summary
Applied theme header background color and color to all table header (th) elements.
This is not a breaking change.
This will change the look of table header elements in table rows in some cases - applying the header background color and a heavier font weight.
Reason(s) for changes
Changes were inspired by the W3 table documentation to follow the patterns laid out in the tutorial.
Related issue
Closes #5777
Testing and review
Ran the following commands - all passed
Started storybook and tested examples.
Default
Borderless
Striped
Sortable
Scrollable Default
Scrollable Striped
Scrollable Compact
Scrollable Compact Striped
Stacked Default
Stacked Borderless
Stacked with Header
Stacked with Header Borderless