Recommendations

Recommendations

To ensure that tables fit nicely onto pages, edit table widths using percentages instead of pixels (px).

To edit widths:

  1. Open the page or post that contains the table you wish to modify.
  2. Click within the cell you wish to edit.
  3. Click on one of the following icons:
     Edits a single cell, a set of rows, or all cells in a table.
     Edits a single cell, a single row, or all cells in a table.
  4. When editing the width or height, make sure to enter a number in percents (%).
*If numbers are not entered as a percent, they will automatically be converted into pixels, which is not well-supported on mobile webpages.

As an extra measure:

  1. Click on the HTML view tab.
  2. Perform a search for “px” (Ctrl + F in Windows; Command + F in Mac)
  3. Replace any numbers in px form to a percentage.
    E.g. Change “750px” to “100%”.

General tips and considerations:

  • Always use the “cutable” class.
  • Your table should have no more than 5 columns.  Content in tables with more columns than this may not appear in the mobile version of your website.
  • If your table is content-heavy or has 5 or more columns, include a link to a PDF of the table.  This ensures that content in the table is still accessible to readers, even if the format of the table breaks.