Advanced
60 mins
Teacher/Student led
+140 XP

Show Your Facts in a Table

Put facts on your site in a table, built from three kinds of block one inside the next: the table holds rows, and each row holds the cells a reader actually sees.

Teacher Class Feed

Load previous activity

    1 - Start: What We're Building ~5 mins

    Some things do not read well as sentences. Scores, dates, prices, results.

    Today you put facts on your site in a table, so a reader can run their eye down a column and find what they want.

    By the end of the lesson your site will have a table with a heading row and three rows of your own facts.

    2 - A Table Is Three Kinds of Block ~5 mins

    A table needs three kinds of block, one inside the next:

    • the table block is the whole thing
    • a row block goes inside the table, one for each line across
    • a cell block goes inside a row, one for each box in that line

    Two rows of two cells makes four boxes. You have met a holder before: this is the same idea as the list, one level deeper.

    All three are in the List group.

    3 - Add the Table and Its First Row ~8 mins

    A table starts as a holder with nothing in it.

    This is the block you need:

    {"blocks": {"languageVersion": 0, "blocks": [{"type": "wp_table", "fields": {}}]}}
    1. Click List on the left.
    2. Drag a table block to the bottom of your page.
    3. Drag a row block inside the table, where it opens out.
    4. Click Your web page.

    Check: nothing shows yet. An empty row has no boxes in it, so there is nothing to draw.

    If it did not work: the row is sitting beside the table instead of inside it. Drag it again until it clicks into the opening.

    Interactive activity

    4 - Put Two Cells in the Row ~8 mins

    Cells are the boxes a reader actually sees.

    1. Drag a cell block inside your row.
    2. Type Match in it.
    3. Drag a second cell block under the first one.
    4. Type Score in it.
    5. Click Your web page.

    Check: two boxes appear side by side. Cells stack downwards in the blocks but run across on the page.

    If it did not work: only one box shows, so the second cell is inside the table rather than inside the row.

    Interactive activity

    5 - Make It a Heading Row ~5 mins

    The top row of a table names the columns.

    This is the block you need:

    {"blocks": {"languageVersion": 0, "blocks": [{"type": "wp_table_row", "fields": {"KIND": "head"}, "inputs": {"CELLS": {"block": {"type": "wp_table_cell", "fields": {"TEXT": "Match"}, "next": {"block": {"type": "wp_table_cell", "fields": {"TEXT": "Score"}}}}}}}]}}
    1. Click Blocks.
    2. Click your row block.
    3. Change its box to heading row.
    4. Click Your web page.

    Check: the top row is now bold, and it reads as labels rather than facts.

    Interactive activity

    DigitalSkills.org · Online learning platform

    Unlock the full learning experience

    You're previewing this lesson. Get full access to this lesson and hundreds more — each one ready to teach, with interactive activities, printable resources and pupil progress tracking built in.

    Hundreds of curriculum-aligned lessons
    Interactive activities in every lesson
    Printable resources & progress tracking
    Copyright Notice
    This lesson is copyright of DigitalSkills.org 2017 - 2025. Unauthorised use, copying or distribution is not allowed.
    🍪 Our website uses cookies to make your browsing experience better. By using our website you agree to our use of cookies. Learn more