Traditionally, our editors have laid out a lot of content using tables, because they are quite easy to use. However, the result is not SEO-friendly, and also does not look good on mobiles and tablets.
Our solution is to allow tables in the text editor, but then convert the result to that behaves properly on smaller screens.
Caveats
- In order to do this, we have had to remove the various options, and instead rely on classes to help tables behave smoothly
- Some advanced things cant be handled using the editor and requires tweaking the css
Tables can be added via the table button in the editor. Once the table is added, table classes can be added using the styles dropdown:
- image150,image300,image450,image600 – These are for 2-olumn wide tables where one column is all images. If one column is all images, then the width is by default set at 200px. These set the width of the image at 150,300,450 and 600px
- frontdisplay (‘German’ front) – this emulates the old front display on the German sites
- displaytable (Green background) – table with green gradient background
- preserve2cells (2 x 2 column) – for 4-column tables, that are really groups of 2×2. For tablet sizes, the table will behave like 2-column table
- aligntop – table cells by default are middle aligned, this switches the alignment to top-aligned
- table-of-contents – some big pages need a wikipedia style table of contents at the beginning
- data
Additional classes
The one problem is that using the ‘style’ background, you cannot add more than one style. However tables sometimes need additional styles to make sure they behave properly in tablets and mobiles. Right now the only way to add these styles is to access the html via the source button and add the styles directly
- collapse-tablet – By default, tables preserve their forms for tablet, but collapse for mobiles, with one cell on top of the other. Adding this class collapses the cell for tablet.
- collapse-reverse – When tables collapse, the left cells are on top of the right ones, this reverses the order and puts the right cells first
- collapse-float – For 2 column tables where 1 image columns, the images expand to full width when the table collapses. This floats the image and wraps the text in the other column around it.