Skip to content
This repository was archived by the owner on Jul 11, 2024. It is now read-only.

Commit f38a28f

Browse files
author
Eric Eggert
committed
Rearrange table examples
Rearrange table examples to include the irregular tables example one as example two on the page about simple tables. Also add scope to the delivery slots example. Change intro text.
1 parent b76b625 commit f38a28f

File tree

1 file changed

+96
-22
lines changed

1 file changed

+96
-22
lines changed

‎source/tables/simple.html.erb.md‎

Lines changed: 96 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,13 @@ wcag_techniques:
99

1010
A simple table has one header row, or a header row and header column. They are the first row and column of the table.
1111

12-
Use header cell elements (`<th>`) to markup the header cells so that they are distinguishable from data cells and associated with the correct data cells. For example, in the [second table below](#table-with-header-cells-in-the-top-row-and-first-column) “Closed” is meaningless on its own, but makes sense when it’s associated with time (the row header) and day (the column header).
12+
Use header cell elements (`<th>`) to markup the header cells so that they are distinguishable from data cells and associated with the correct data cells. For example, in the [third example below](#table-with-header-cells-in-the-top-row-and-first-column) “Closed” is meaningless on its own, but makes sense when it’s associated with time (the row header) and day (the column header).
1313

14-
Additionally, you can use the [`<caption> element`](caption-summary.html) to identify the table, which in some cases might be a WCAG 2.0 requirement.
14+
To explicitly associate header cells to data cells, it is usually useful to use the `scope` attribute. If the `scope` value is `row`, the heading is only a heading for other cells in this row, if the value is `col` it is the heading only for other cells in this column.
1515

16-
If the table has only a header column, see the [first example of the Irregular Tables tutorial](irregular.html#table-with-header-cells-in-one-column-only).
16+
For more complex examples on the use of `scope`, see the [Irregular Tables tutorial](irregular.html).
17+
18+
Additionally, you can use the [`<caption>` element](caption-summary.html) to identify the table, which in some cases might be a WCAG 2.0 requirement.
1719

1820
## Table with header cells in the top row only
1921
{:.ex}
@@ -76,49 +78,121 @@ This table of concerts only needs the cells in the top row marked up as `<th>` c
7678

7779
[Full code for “Table with header cells in the top row only”](examples/headertoprow.html)
7880

81+
## Table with header cells in one column only
82+
{:.ex}
83+
84+
This example has `<th>` elements for all cells in the left column of a table. As the heading cells are read in every line, the `scope` attribute with a value of `row` should be used on each `<th>` cell to ensure that it cannot be mistaken as a header for other cells in the same column. In the table below, Belgium should not be mistaken as the heading for France, Holland, etc.
85+
86+
{::nomarkdown}
87+
<%= sample_start %>
88+
89+
<table>
90+
<caption>
91+
Capital cities
92+
</caption>
93+
<tr>
94+
<th scope="row">Belgium</th>
95+
<td>Brussels</td>
96+
</tr>
97+
<tr>
98+
<th scope="row">France</th>
99+
<td>Paris</td>
100+
</tr>
101+
<tr>
102+
<th scope="row">Holland</th>
103+
<td>Amsterdam</td>
104+
</tr>
105+
<tr>
106+
<th scope="row">Luxembourg</th>
107+
<td>Luxembourg</td>
108+
</tr>
109+
<tr>
110+
<th scope="row">Spain</th>
111+
<td>Madrid</td>
112+
</tr>
113+
<tr>
114+
<th scope="row">UK</th>
115+
<td>London</td>
116+
</tr>
117+
</table>
118+
119+
<%= sample_end %>
120+
{:/nomarkdown}
121+
122+
{::nomarkdown}
123+
<%= code_start %>
124+
{:/nomarkdown}
125+
126+
~~~ html
127+
<table>
128+
<caption>Capital cities</caption>
129+
<tr>
130+
<th scope="row">Belgium</th>
131+
<td>Brussels</td>
132+
</tr>
133+
<tr>
134+
<th scope="row">France</th>
135+
<td>Paris</td>
136+
</tr>
137+
<tr>
138+
<th scope="row">Holland</th>
139+
<td>Amsterdam</td>
140+
</tr>
141+
[…]
142+
</table>
143+
~~~
144+
145+
{::nomarkdown}
146+
<%= code_end %>
147+
{:/nomarkdown}
148+
149+
[Full code Example “Table with header cells in one column only”](examples/scope-simple.html)
150+
79151
## Table with header cells in the top row and first column
80152
{:.ex}
81153

82-
This table of opening times has header information contained in both the top row and the first column. All header cells are marked up as `<th>` cells.
154+
This table of opening times has header information contained in both the top row and the first column. All header cells are marked up as `<th>` cells, additionally we add `scope` attributes with the values `col` (to the top row header cells) and `row` (to the first column header cells).
83155

84156
{::nomarkdown}
85157
<%= sample_start %>
86158

159+
<p><strong>Delivery slots:</strong></p>
160+
87161
<table>
88162
<tr>
89-
<th>Delivery slots</th>
90-
<th>Monday</th>
91-
<th>Tuesday</th>
92-
<th>Wednesday</th>
93-
<th>Thursday</th>
94-
<th>Friday</th>
163+
<td></td>
164+
<th scope="col">Monday</th>
165+
<th scope="col">Tuesday</th>
166+
<th scope="col">Wednesday</th>
167+
<th scope="col">Thursday</th>
168+
<th scope="col">Friday</th>
95169
</tr>
96170
<tr>
97-
<th>09:00 - 11:00</th>
171+
<th scope="row">09:00 - 11:00</th>
98172
<td>Closed</td>
99173
<td>Open</td>
100174
<td>Open</td>
101175
<td>Closed</td>
102176
<td>Closed</td>
103177
</tr>
104178
<tr>
105-
<th>11:00 - 13:00</th>
179+
<th scope="row">11:00 - 13:00</th>
106180
<td>Open</td>
107181
<td>Open</td>
108182
<td>Closed</td>
109183
<td>Closed</td>
110184
<td>Closed</td>
111185
</tr>
112186
<tr>
113-
<th>13:00 - 15:00</th>
187+
<th scope="row">13:00 - 15:00</th>
114188
<td>Open</td>
115189
<td>Open</td>
116190
<td>Open</td>
117191
<td>Closed</td>
118192
<td>Closed</td>
119193
</tr>
120194
<tr>
121-
<th>15:00 - 17:00</th>
195+
<th scope="row">15:00 - 17:00</th>
122196
<td>Closed</td>
123197
<td>Closed</td>
124198
<td>Closed</td>
@@ -137,23 +211,23 @@ This table of opening times has header information contained in both the top row
137211
~~~ html
138212
<table>
139213
<tr>
140-
<th>Delivery slots</th>
141-
<th>Monday</th>
142-
<th>Tuesday</th>
143-
<th>Wednesday</th>
144-
<th>Thursday</th>
145-
<th>Friday</th>
214+
<th scope="col">Delivery slots</th>
215+
<th scope="col">Monday</th>
216+
<th scope="col">Tuesday</th>
217+
<th scope="col">Wednesday</th>
218+
<th scope="col">Thursday</th>
219+
<th scope="col">Friday</th>
146220
</tr>
147221
<tr>
148-
<th>09:00 - 11:00</th>
222+
<th scope="row">09:00 - 11:00</th>
149223
<td>Closed</td>
150224
<td>Open</td>
151225
<td>Open</td>
152226
<td>Closed</td>
153227
<td>Closed</td>
154228
</tr>
155229
<tr>
156-
<th>11:00 - 13:00</th>
230+
<th scope="row">11:00 - 13:00</th>
157231
<td>Open</td>
158232
<td>Open</td>
159233
<td>Closed</td>

0 commit comments

Comments
 (0)