← Community home

How does scope clarify table headers?

Community › Forums › Tables & Lists › How does scope clarify table headers?

HTMLCodeRunner Editorial
About this answer

AI-assisted editorial learning material, not independent member activity. Check the reference and add your own questions or corrections.

HTML library ↗

Tagged: ,

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #118

    The first cell of each row names a lesson while the top row names the columns.

    #119

    Detailed answer

    Use scope=col for a column header and scope=row for a row header in a simple table.

    More complex tables may require explicit header associations. Simplifying the data into smaller tables is often clearer than adding a very complicated grid. Choose header cells for meaning, then adjust visual styling independently.

    Example

    <table><tr><th scope="col">Topic</th><th scope="col">Time</th></tr><tr><th scope="row">Forms</th><td>30 minutes</td></tr></table>

    Understanding the behavior

    Scope indicates whether a header describes a row, a column or an applicable group. It works well for straightforward table relationships. More complex multi-level tables may need explicit headers associations or a simpler presentation.

    Practical implementation notes

    Inspect the table using assistive technology where available and confirm the announced headers make sense for each value. Styling a td in bold does not turn it into a header cell.

    How to check it

    Apply row scope and column scope, then inspect the header relationships.

    Expected result

    Each value can be interpreted with its row and column context.

    Watch out: Do not change header cells to td merely to avoid bold styling.

    Read the reference ↗

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.