Turn browsercompat into table

[devnook]

Fixes #7310

[netlify[bot]]

✔️ Deploy Preview for web-dev-staging ready!

🔨 Explore the source changes: 6c8c0341d774dbc85ce69f52cf1e6e1e35e3e0a1

🔍 Inspect the deploy log: https://app.netlify.com/sites/web-dev-staging/deploys/62014512ec072c0007e28f89

😎 Browse the preview: https://deploy-preview-7313--web-dev-staging.netlify.app

[rachelandrew]

@devnook I'm wondering if we should make the label "Browser Compat" into a <caption>? What would be the best for a11y?

[jeffposnick]

FWIW, this is what the <table> implementation looks like in Feedly, when I access the RSS feed for the staging server:

I guess that's better? I'm okay with this PR, but I don't know the answer to Rachel's question about <caption> best practices.

(Not to derail the PR, but another approach would be to turn the original <span>s into <li>s, with a parent <ul>. This info strikes me as being "list-like" and the unstyled <ul>/<li> combo might end up being the most legible in an RSS reader.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. To prevent this from happening, leave a comment.

[matthiasrohmer]

Fixed by https://github.com/GoogleChrome/webdev-infra/pull/60.