Skip to content

Knowledgebase

Creating a table that works on smaller screens

wordpress

Use a Table block for information whose row and column relationships matter, such as a compact feature comparison. Do not use a table simply to position ordinary page sections side by side.

01 Keep the comparison focused

Decide what each row represents and what each column means. Remove columns that repeat the same value or require long paragraphs. A narrow, meaningful table is easier to understand on a phone than a wide catalogue compressed into tiny text.

Prepare clear labels and indicate units where relevant. If a value is unavailable, explain that meaning instead of leaving an ambiguous empty cell. Use text as well as colour to distinguish states.

02 Build the table

  1. Insert a Table block and choose the initial number of rows and columns.
  2. Enable a header section where appropriate and enter descriptive column labels.
  3. Fill the body cells with concise information. Use the block's row and column controls when the structure changes rather than inserting spaces to imitate alignment.
  4. Add a useful caption or nearby explanation of the comparison and its scope.
  5. Choose a readable style with adequate contrast, then preview the page at multiple widths.

How do I check whether a table works on mobile?

Confirm that text remains readable and that any horizontal scrolling is obvious and usable. The surrounding theme affects overflow behaviour, so test the published page rather than assuming the editor preview is sufficient. Avoid fixed widths that force the whole page beyond the screen.

If the table remains too complex, split it into focused comparisons or provide an alternative structured list. Do not remove important headers just to save space. For complex multi-level headers or specialised accessibility requirements, ask a developer to review the markup instead of relying on visual formatting alone.

03 Maintain accurate relationships

After adding or deleting a column, read across several rows to ensure values still align with the right labels. Copying spreadsheet content can shift cells unexpectedly. Test links inside cells and check that a reader can understand the comparison without relying on a background colour or an icon whose meaning is not explained.

Sources and further reading

Was this answer helpful?

Need a little more help?

Our support team can help you find the next step.

Contact support

Powered by WHMCompleteSolution