Help:Avoiding nested tables

There are many different common wikitext practices that, while useful to high level users on the desktop, unfortunately interfere with how their content is displayed on mobile platforms. Nested tables is a prime example.


 * As a reminder about Mobile Best Practices: You can always preview what your edits will look like on a mobile device by adding  to the end of a wikia URL, or if you are using classic editor, when previewing your edits, you can select ‘mobile’ from the drop down menu in the top left-hand corner of the preview screen.

What are Nested Tables?
Nested tables are simply tables within tables with tables (also known as table inception!).


 * Here is an example of nested tables on our Brave Frontier community. Note the difference between the clean desktop view and the less than optimal mobile view.



Why would nested tables be bad?
You should avoid using nested tables whenever possible. Tables, in general, always take up the smallest width they can and even extend vertically when the horizontal space is limited. However, if a table is placed inside another table, that forces the width of these cells to accommodate the additional table. In essence, this forces the entire table structure to be much wider than space allows. This is especially bad for mobile display, because the size of the screen is so much smaller.

The outcome: This causes a lot of horizontal scrolling on mobile (a bad user experience), and much of the table is hidden from view. If you break up the nested tables into several independent tables, the information is displayed on a vertical scroll down the page, rather than a horizontal one.

This also allows each table to be more dynamic. The content formatting is dictated by the size of the mobile screen. Therefore, the browser will move the tables to where they can be displayed to improve the overall flow of content scrolling.

What to do if your community uses Nested Tables
Encourage them to break up the nested tables and attempt to create an infrastructure that is not dependant on tables within tables. Per above, stacking tables next to each other can often times achieve the same result. If the content is best presented in a table format, you can always adjust the cells in such a way that they resemble another table within a table, but still only be one big table.

How to identify nested tables
In the source code, tables always begin with the wikitext  or HTML. Tables are closed with the opposite code:  or. Therefore, if you see the beginning of a table, and before you arrive at the closing brackets of that table, you encounter another beginning of a table, this indicates a table nested within a table. This could go down several layers deep.


 * Here is the source code example of a nested table:



How to break down nested tables
The first step is to identify how many tables are nested within the main table. The second step is to find the furthest nested table (or most deeply rooted) table, and pull it out of the chain of nested tables. Now, hit preview, and you will get an idea of what that table looks like on it’s own. After hitting preview, you can troubleshoot tables it they don’t look as expected by checking the parameters of the table (the code immediately following the table opening: ) Once you have pulled all of the internal tables out of the main table, you should be able to delete the original table code. Now the tables should be stacked for mobile-optimized display.

How to preserve your desktop display now that the tables are separate
Tables should be stacked top-to-bottom or side-by-side. This will allow your mobile browser to push and move the tables around to fit within the space allotted on the mobile display. If the tables are side-by-side and they don’t fit within the width of the mobile screen, the browser will automatically push the last table below. However, one of the biggest challenges that you will face in this stage of positioning your tables is finding a compromise between how they appear on the desktop versus how they appear on the mobile display. This may require adjusting the inline CSS to control how the tables look on the desktop display. Writing CSS into your table wikitext will only affect the desktop version, so the mobile version will still be displayed correctly. Here is a useful help page about How to customize tables. Here is another help page about How to use CSS on your wikia. If you need more individual help with table positioning, see the list of resources at the bottom of the page.

More Useful Info about Nested Tables
Keep in mind, if a template is being used to display one table for various different pages, fixing the nested table issue on that template will also fix the mobile display for all of the pages that contain the template as well. This means that applying this optimization practice to your templates could have a huge impact for your overall community. Tables with images within individual cells will force the cell to conform to the image size. Therefore, images should be sized down to a mobile-friendly size, or pulled out of table cells entirely. If the image is very large and outside of the table, the mobile browser will automatically size it down to fit in the mobile display.

Brave Frontier Community Case Study
The Brave Frontier community was nice enough to be our guinea pig/co-conspirators in this effort to eradicate Nested Tables. We were able to successfully find the balance between breaking down nested tables for one of their most important templates (character template) while still preserving the look and feel of their desktop view. The result is a much improved mobile layout for a huge number of articles on their community. See for yourselves:

If you are a more technical admin and would like to see exactly what changes were made to the source code on Brave Frontier to optimize it for mobile display, you can view the source code before and after the changes were made:
 * Before mobile optimization (Source Code)
 * After mobile optimization (Source Code)
 * Note: this code has been protected to prevent unwanted changes. If you’d like to copy the template for your own use, please copy the code and paste it on your own community or sandbox.

More Resources

 * Help:Tables
 * Help:Global CSS and JS
 * Help:Mobile
 * Forum:Technical

Contact Wikia Staff
Do you need help with converting nested tables on your community? Reach out to us at Special:Contact. Please add Mobile: Nested tables to the subject line.