avoiding layout tables in MDN pages

[Janet Swisher]

Is it possible to get rid of layout-oriented tables on pages like this one?
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS

Not only is it no longer a best practice, but as our content gets reused
and remixed, it can cause problems downstream. For example, this page is
problematic when pulled into the Marketplace Developer Hub.


--
Janet Swisher <mailto:jREMOVE...@mozilla.com>
Mozilla Developer Network <https://developer.mozilla.org>
Technical Writer/Community Steward

[Jean-Yves Perrier]

I made an experiment last December. I changed one of this page to a CSS3
column layout, which is fairly easy to do. This was working well (going
from 2 to 1 column on smaller screen) except that as Firefox doesn't
support break-inside:avoid, it wasn't possible to control that the top
of a column start at a <h2>. Unfortunately we still don't support it,
although there is some activity on this bug these days.

I stopped there as other layout work needed styling that weren't
permitted at that time. Now that we have CustomCSS we can do something
better. Maybe we should propose this as a task for this week-end doc sprint?

Note that the use of tables for layout is not specific to these landing
pages, we have plenty of tables used for layout of examples.

BTW, the reuse of pages is exactly why mixing layout and content is bad.

-- JY