Rullst AcademyRullst Academy/Lesson
Semantic HTML and accessibility · Lesson 06 / 10

Data with clear relationships

The workshop program lists activities and durations. A table can make that relationship explicit.

Learning paths12 min

Let's discover together

  1. 1

    Use table for data related in rows and columns, not for page layout. Caption names the table. Tr creates a row; th marks headers and td marks data cells.

  2. 2

    In this simple table, “Activity” and “Minutes” are th with scope="col". Activity names are th with scope="row". A duration can then be associated with its column and corresponding activity.

  3. 3

    Thead groups header rows and tbody groups body rows. They do not replace th or header relationships. Start small; complex headers need further analysis and are not solved merely by the presence of scope.

  4. 4

    Read a cell outside visual order: “Test, Minutes, 15”. Does it still make sense? Add a specific caption and check a narrow screen. Our review looks for some elements, but does not validate every association.

HTML workshop: write, observe, review

Edit HTML in “My files and GitHub” and update the preview. It uses study elements and reading styles: scripts, custom CSS and external navigation are disabled. Only the kit’s route.svg is shown as an image.

Go to my HTML

These simple checks are neither complete HTML validation nor a WCAG audit. Review content, keyboard, zoom and assistive technologies; record what you have not tested.

Official links and next step

✦
YOUR MISSION

Build a simple table with a caption and headers.

Now it's your turn

Discovery workshop

Read, predict, try

The table has Activity and Minutes columns; the Test row contains 15.
Build your answers and check when you are ready.
A moment to understand

Should a table position the menu and footer?

I need a hint

Compare the intent with the meaning of the elements; appearance alone does not demonstrate accessibility.

Loading your journey…

Take it with you

Add a third activity and check its headers. Explain why the earlier materials list works better as a list.

At your own pace

My files and GitHub

Every lesson can become your own record: code, notes or a practice plan. Saving a file to GitHub is optional and does not change your XP.

Student guide

The editor and downloads open when this lesson is available to your account. Check access below or return to the track map.

Checking your access to this lesson…

Rullstpetbot

AI can make mistakes. Check the lesson material.