CodeCow/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-06-22 21:08:12 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

feat(curriculum): Add interactive examples to accessible tables lesson (#62716)

Browse Source
This commit is contained in:
Giftea ☕ 2025-10-13 20:56:00 +01:00 committed by GitHub
parent 5499800ab1
commit f5a932c5e8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 15 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
curriculum/challenges/english/blocks/lecture-accessible-tables-forms/672a539b887ec68c593cdc4b.md
View File

@ -5,7 +5,7 @@ challengeType: 19
dashedName: what-are-best-practices-for-tables-and-accessibility
---
# --description--
# --interactive--
When we see a table, we immediately start making visual associations between the data and the headers.
@ -26,6 +26,8 @@ Now let's talk about row and column headers. Headers are special cells, typicall
For example, the code below creates a table for two pets. Every row has a row header (the name of the pet) and every column has a column header, which describes what the data in the column represents (age and type).
:::interactive_editor
```html
<table>
<caption>Our Pets</caption>
@ -52,6 +54,8 @@ For example, the code below creates a table for two pets. Every row has a row he
</table>
```
:::
Notice that the above code has a `caption` element immediately after the opening `table` element. Then, inside the table head (`thead`) element, it has the column headers (`Name`, `Age`, and `Type`). In the second and third rows, inside the table body (`tbody`) element, we find the data for each one of our pets. The names of the pets are the row headers because they are inside table header elements (`th`).
Associating the data cells with their corresponding headers is also very important for screen readers. The `scope` attribute determines if a header is a row header or a column header.
@ -62,6 +66,8 @@ In the code below, you can see that we added the `scope` attribute to the column
The two row headers (`Nora` and `Gino`) have a `scope` of `row`.
:::interactive_editor
```html
<table>
<caption>Our Pets</caption>
@ -88,8 +94,13 @@ The two row headers (`Nora` and `Gino`) have a `scope` of `row`.
</table>
```
:::
If a column or row header spans across multiple cells, the `scope` will also be applied to each one of the cells individually. Here's an example of that:
:::interactive_editor
```html
<table>
<tbody>
<tr>
@ -117,6 +128,9 @@ If a column or row header spans across multiple cells, the `scope` will also be
</tr>
</tbody>
</table>
```
:::
In this table, the cell with `Nora`'s age (`5`) will have one column header (`Age`) and two row headers (`Dogs` and `Nora`). `Gino`'s age (`2`) will also have one column header (`Age`) and two row headers (`Dogs` and `Gino`).