New design for tables

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[ X] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[X ] Other... Please describe: AIO css and table generation

Current behavior

Currently, there are two table designs. One for HTML tables, and one for markdown tables. We need to standardize on one marked convention, and it’s time to refresh the look and feel as well.

Expected behavior

The general look and feel of tables could use a refresh and optimization for data-rich tables. It would be nice to align the look-and feel more with the Google dev doc style guide: https://developers.google.com/style/tables

Some specifics:

• Title row should use sentence caps to be more consistent with our other headings and with Google dev doc style guide (linked above)

• Title row should stand out without dominating over the page’s section headings. The current bold titles in the HTML tables seem too strong.

• Content in rows should be top aligned, so the first line of text in each row is aligned. This improves readability by improving line scanning left to right, and it makes the table easier to use when scrolling (users see something in each cell at the same time, rather than the blanks that can appear when middle-aligning text).

• Less vertical padding within table rows, to better accommodate data-rich tables with less scrolling

• HTML tables currently have vertical border between columns in the title row, but the rows below do not have the vertical border. Standardize one way or the other.

Keep:

• Outer border and horizontal rule between rows seems to be working well in all tables right now

Minimal reproduction of the problem with instructions

https://angular.io/guide/docs-style-guide#tables https://angular.io/guide/releases currently has both markdown and html tables in it

APIs also use tables without heading rows: https://angular.io/api/animations

What is the motivation / use case for changing the behavior?

Nicer look and feel. Easier use (read and scan) of tables. Re-standardize on one markup convention.

Environment

Angular version: X.Y.Z


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

[jenniferfell]

Top priority in mtg today: Add to requirements - general:

• Responsiveness, esp wide tables in API reference and cheat sheet

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}