Practice - 5 Tasks
Answer the questions below
1fill in blank
easyComplete the code to add a caption to the table for screen readers.
HTML
<table> [1] <tr><td>Data 1</td><td>Data 2</td></tr> </table>
Drag options to blanks, or click blank then click option'
Attempts:
3 left
💡 Hint
Common Mistakes
Using instead of <caption> inside the table.</div><div class="mistake-item">Using <header> or <summary> which are not valid table elements.</div></div></div><div class="feedback-box incorrect d-none"><div class="feedback-title">✗ Incorrect</div><div class="feedback-text"><p>The <caption> element provides a title or explanation for the table, which helps screen readers understand the table's purpose.</p></div></div></div></div><div class="puzzle-container " id="puzzle-fill_in_blank-1"><div class="task-card " id="try-t2" data-blank-count="1"><div class="task-header"><div class="task-badge"><span class="task-number">2</span><span class="task-type">fill in blank</span></div><span class="task-difficulty medium">medium</span></div><p class="task-instruction text-pre-wrap ">Complete the code to mark the first row as table headers.</p><div class="code-block"><div class="code-header"><span class="code-title">HTML</span></div><pre class="code-content" id="code-t2"><table>
<tr><span class="code-blank" data-blank="1" data-task="t2">[1]</span></tr>
<tr><td>Data <span class="hl-num">1</span></td><td>Data <span class="hl-num">2</span></td></tr>
</table></pre></div><div class="blank-selection-hint" id="hint-select-t2"><span class="d-flex align-items-center justify-content-center flex-wrap gap-1 line-height-normal"><span class="new-material-symbols icon-hw-22"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#EF4444"><path d="M480-240q-76.33 0-138.83-43.5-62.5-43.5-87.5-115.83-4-12 2-23.34 6-11.33 19-15.33 13-4.33 25.83 2.17 12.83 6.5 18.83 20.83 19.67 49 63.34 78.67 43.66 29.66 97.33 29.66 72 0 122.67-50.66Q653.33-408 653.33-480q0-53-29.83-96.83-29.83-43.84-78.83-63.5-14.67-6-20.67-18.84-6-12.83-1.67-25.83 4.34-13 15.5-19 11.17-6 23.17-2 71 25 115 87.17 44 62.16 44 138.83 0 100-70 170t-170 70Zm0 160q-161.33 0-277.33-110.67-116-110.66-123-271.33-.34-13.33 8.83-23t22.83-10.67q13.67-1 24.5 8.84 10.84 9.83 12.17 24.5 12.67 138 106.17 226.83 93.5 88.83 225.83 88.83 139.33 0 236.33-97t97-236.33q0-133.67-90-228.17T496.67-812q-14.67-1.33-23.84-11.67-9.16-10.33-8.83-24.66.33-13.67 10-22.67 9.67-9 23-8.67 80 3 149.83 36 69.84 33 121.5 87.17Q820-702.33 850-631.17 880-560 880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm-97.33-420-132-131-33.34 101Q213-518 201-518.5q-12-.5-15.67-12.5L89.67-850q-2.67-9.33 4.5-16.5 7.16-7.17 16.5-4.5l319 95.67q12 3.66 12.5 15.66t-11.5 16.34l-101 33.33 132 132q17 17 17 39t-17 39q-17 17-39.5 17t-39.5-17Z"></path></svg></span> Drag options to blanks, or click blank then click option'</span></div><div class="fill-options" id="fillOptions-t2"><div class="fill-option " draggable="true" data-key="A" data-task="t2"><span class="option-key">A</span><th>Header 1</th><th>Header 2</th></div><div class="fill-option " draggable="true" data-key="B" data-task="t2"><span class="option-key">B</span><td>Header 1</td><td>Header 2</td></div><div class="fill-option " draggable="true" data-key="C" data-task="t2"><span class="option-key">C</span><caption>Headers</caption></div><div class="fill-option " draggable="true" data-key="D" data-task="t2"><span class="option-key">D</span><thead>Header 1 Header 2</thead></div></div><button class="verify-btn" id="verifyBtn-t2" disabled=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 13l4 4L19 7"></path></svg>Verify Answer</button><div class="attempts-counter" id="attempts-t2"><span>Attempts:</span><div class="attempts-dots"><span class="attempt-dot "></span><span class="attempt-dot "></span><span class="attempt-dot "></span></div><span id="attemptsLeft-t2">3<!-- --> left</span></div><div class="hint-box d-none" id="hint-t2"><div class="hint-box-title">💡 Hint</div><div class="hint-box-text" id="hintText-t2"></div></div><div class="mistakes-box d-none" id="mistakes-t2"><div class="mistakes-box-title">Common Mistakes</div><div class="mistakes-list"><div class="mistake-item">Using <td> instead of <th> for headers.</div><div class="mistake-item">Trying to use <thead> inside a <tr> which is invalid.</div></div></div><div class="feedback-box incorrect d-none"><div class="feedback-title">✗ Incorrect</div><div class="feedback-text"><p>The <th> element defines header cells in a table row, which screen readers identify as headers.</p></div></div></div></div><div class="puzzle-container " id="puzzle-fill_in_blank-2"><div class="task-card " id="try-t3" data-blank-count="1"><div class="task-header"><div class="task-badge"><span class="task-number">3</span><span class="task-type">fill in blank</span></div><span class="task-difficulty hard">hard</span></div><p class="task-instruction text-pre-wrap ">Fix the error in the table to correctly associate headers with data cells using scope.</p><div class="code-block"><div class="code-header"><span class="code-title">HTML</span></div><pre class="code-content" id="code-t3"><table>
<tr><th <span class="code-blank" data-blank="1" data-task="t3">[1]</span>>Name</th><th <span class="code-blank" data-blank="1" data-task="t3">[1]</span>>Age</th></tr>
<tr><td>Alice</td><td><span class="hl-num">30</span></td></tr>
</table></pre></div><div class="blank-selection-hint" id="hint-select-t3"><span class="d-flex align-items-center justify-content-center flex-wrap gap-1 line-height-normal"><span class="new-material-symbols icon-hw-22"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#EF4444"><path d="M480-240q-76.33 0-138.83-43.5-62.5-43.5-87.5-115.83-4-12 2-23.34 6-11.33 19-15.33 13-4.33 25.83 2.17 12.83 6.5 18.83 20.83 19.67 49 63.34 78.67 43.66 29.66 97.33 29.66 72 0 122.67-50.66Q653.33-408 653.33-480q0-53-29.83-96.83-29.83-43.84-78.83-63.5-14.67-6-20.67-18.84-6-12.83-1.67-25.83 4.34-13 15.5-19 11.17-6 23.17-2 71 25 115 87.17 44 62.16 44 138.83 0 100-70 170t-170 70Zm0 160q-161.33 0-277.33-110.67-116-110.66-123-271.33-.34-13.33 8.83-23t22.83-10.67q13.67-1 24.5 8.84 10.84 9.83 12.17 24.5 12.67 138 106.17 226.83 93.5 88.83 225.83 88.83 139.33 0 236.33-97t97-236.33q0-133.67-90-228.17T496.67-812q-14.67-1.33-23.84-11.67-9.16-10.33-8.83-24.66.33-13.67 10-22.67 9.67-9 23-8.67 80 3 149.83 36 69.84 33 121.5 87.17Q820-702.33 850-631.17 880-560 880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm-97.33-420-132-131-33.34 101Q213-518 201-518.5q-12-.5-15.67-12.5L89.67-850q-2.67-9.33 4.5-16.5 7.16-7.17 16.5-4.5l319 95.67q12 3.66 12.5 15.66t-11.5 16.34l-101 33.33 132 132q17 17 17 39t-17 39q-17 17-39.5 17t-39.5-17Z"></path></svg></span> Drag options to blanks, or click blank then click option'</span></div><div class="fill-options" id="fillOptions-t3"><div class="fill-option " draggable="true" data-key="A" data-task="t3"><span class="option-key">A</span>scope="row"</div><div class="fill-option " draggable="true" data-key="B" data-task="t3"><span class="option-key">B</span>aria-label="header"</div><div class="fill-option " draggable="true" data-key="C" data-task="t3"><span class="option-key">C</span>scope="col"</div><div class="fill-option " draggable="true" data-key="D" data-task="t3"><span class="option-key">D</span>role="header"</div></div><button class="verify-btn" id="verifyBtn-t3" disabled=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 13l4 4L19 7"></path></svg>Verify Answer</button><div class="attempts-counter" id="attempts-t3"><span>Attempts:</span><div class="attempts-dots"><span class="attempt-dot "></span><span class="attempt-dot "></span><span class="attempt-dot "></span></div><span id="attemptsLeft-t3">3<!-- --> left</span></div><div class="hint-box d-none" id="hint-t3"><div class="hint-box-title">💡 Hint</div><div class="hint-box-text" id="hintText-t3"></div></div><div class="mistakes-box d-none" id="mistakes-t3"><div class="mistakes-box-title">Common Mistakes</div><div class="mistakes-list"><div class="mistake-item">Using scope="row" for column headers.</div><div class="mistake-item">Using aria-label or role attributes incorrectly.</div></div></div><div class="feedback-box incorrect d-none"><div class="feedback-title">✗ Incorrect</div><div class="feedback-text"><p>The scope="col" attribute tells screen readers that these headers apply to columns.</p></div></div></div></div><div class="puzzle-container " id="puzzle-fill_in_blank-3"><div class="task-card " id="try-t4" data-blank-count="2"><div class="task-header"><div class="task-badge"><span class="task-number">4</span><span class="task-type">fill in blank</span></div><span class="task-difficulty hard">hard</span></div><p class="task-instruction text-pre-wrap ">Fill both blanks to create a table with a header section and body section.</p><div class="code-block"><div class="code-header"><span class="code-title">HTML</span></div><pre class="code-content" id="code-t4"><table>
<span class="code-blank" data-blank="1" data-task="t4">[1]</span>>
<tr><th scope=<span class="hl-str">"col"</span>>Product</th><th scope=<span class="hl-str">"col"</span>>Price</th></tr>
<span class="code-blank" data-blank="2" data-task="t4">[2]</span>>
<tbody>
<tr><td>Book</td><td>$<span class="hl-num">10</span></td></tr>
</tbody>
</table></pre></div><div class="blank-selection-hint" id="hint-select-t4"><span class="d-flex align-items-center justify-content-center flex-wrap gap-1 line-height-normal"><span class="new-material-symbols icon-hw-22"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#EF4444"><path d="M480-240q-76.33 0-138.83-43.5-62.5-43.5-87.5-115.83-4-12 2-23.34 6-11.33 19-15.33 13-4.33 25.83 2.17 12.83 6.5 18.83 20.83 19.67 49 63.34 78.67 43.66 29.66 97.33 29.66 72 0 122.67-50.66Q653.33-408 653.33-480q0-53-29.83-96.83-29.83-43.84-78.83-63.5-14.67-6-20.67-18.84-6-12.83-1.67-25.83 4.34-13 15.5-19 11.17-6 23.17-2 71 25 115 87.17 44 62.16 44 138.83 0 100-70 170t-170 70Zm0 160q-161.33 0-277.33-110.67-116-110.66-123-271.33-.34-13.33 8.83-23t22.83-10.67q13.67-1 24.5 8.84 10.84 9.83 12.17 24.5 12.67 138 106.17 226.83 93.5 88.83 225.83 88.83 139.33 0 236.33-97t97-236.33q0-133.67-90-228.17T496.67-812q-14.67-1.33-23.84-11.67-9.16-10.33-8.83-24.66.33-13.67 10-22.67 9.67-9 23-8.67 80 3 149.83 36 69.84 33 121.5 87.17Q820-702.33 850-631.17 880-560 880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm-97.33-420-132-131-33.34 101Q213-518 201-518.5q-12-.5-15.67-12.5L89.67-850q-2.67-9.33 4.5-16.5 7.16-7.17 16.5-4.5l319 95.67q12 3.66 12.5 15.66t-11.5 16.34l-101 33.33 132 132q17 17 17 39t-17 39q-17 17-39.5 17t-39.5-17Z"></path></svg></span> Drag options to blanks, or click blank then click option'</span></div><div class="fill-options" id="fillOptions-t4"><div class="fill-option " draggable="true" data-key="A" data-task="t4"><span class="option-key">A</span><thead</div><div class="fill-option " draggable="true" data-key="B" data-task="t4"><span class="option-key">B</span><tfoot</div><div class="fill-option " draggable="true" data-key="C" data-task="t4"><span class="option-key">C</span></thead</div><div class="fill-option " draggable="true" data-key="D" data-task="t4"><span class="option-key">D</span></tfoot</div></div><button class="verify-btn" id="verifyBtn-t4" disabled=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 13l4 4L19 7"></path></svg>Verify Answer</button><div class="attempts-counter" id="attempts-t4"><span>Attempts:</span><div class="attempts-dots"><span class="attempt-dot "></span><span class="attempt-dot "></span><span class="attempt-dot "></span></div><span id="attemptsLeft-t4">3<!-- --> left</span></div><div class="hint-box d-none" id="hint-t4"><div class="hint-box-title">💡 Hint</div><div class="hint-box-text" id="hintText-t4"></div></div><div class="mistakes-box d-none" id="mistakes-t4"><div class="mistakes-box-title">Common Mistakes</div><div class="mistakes-list"><div class="mistake-item">Using <tfoot> instead of <thead> for headers.</div><div class="mistake-item">Forgetting to close the <thead> tag.</div></div></div><div class="feedback-box incorrect d-none"><div class="feedback-title">✗ Incorrect</div><div class="feedback-text"><p>The <thead> and </thead> tags wrap the header rows of a table, separating them from the body.</p></div></div></div></div><div class="puzzle-container " id="puzzle-fill_in_blank-4"><div class="task-card " id="try-t5" data-blank-count="3"><div class="task-header"><div class="task-badge"><span class="task-number">5</span><span class="task-type">fill in blank</span></div><span class="task-difficulty hard">hard</span></div><p class="task-instruction text-pre-wrap ">Fill all three blanks to add a summary attribute and ARIA label for better accessibility.</p><div class="code-block"><div class="code-header"><span class="code-title">HTML</span></div><pre class="code-content" id="code-t5"><table <span class="code-blank" data-blank="1" data-task="t5">[1]</span>=<span class="hl-str">"Sales data for 2023"</span> <span class="code-blank" data-blank="2" data-task="t5">[2]</span>=<span class="hl-str">"sales-table"</span> <span class="code-blank" data-blank="3" data-task="t5">[3]</span>=<span class="hl-str">"Sales Table"</span>>
<caption>Annual Sales</caption>
<thead>
<tr><th scope=<span class="hl-str">"col"</span>>Month</th><th scope=<span class="hl-str">"col"</span>>Revenue</th></tr>
</thead>
<tbody>
<tr><td>January</td><td>$<span class="hl-num">1000</span></td></tr>
</tbody>
</table></pre></div><div class="blank-selection-hint" id="hint-select-t5"><span class="d-flex align-items-center justify-content-center flex-wrap gap-1 line-height-normal"><span class="new-material-symbols icon-hw-22"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#EF4444"><path d="M480-240q-76.33 0-138.83-43.5-62.5-43.5-87.5-115.83-4-12 2-23.34 6-11.33 19-15.33 13-4.33 25.83 2.17 12.83 6.5 18.83 20.83 19.67 49 63.34 78.67 43.66 29.66 97.33 29.66 72 0 122.67-50.66Q653.33-408 653.33-480q0-53-29.83-96.83-29.83-43.84-78.83-63.5-14.67-6-20.67-18.84-6-12.83-1.67-25.83 4.34-13 15.5-19 11.17-6 23.17-2 71 25 115 87.17 44 62.16 44 138.83 0 100-70 170t-170 70Zm0 160q-161.33 0-277.33-110.67-116-110.66-123-271.33-.34-13.33 8.83-23t22.83-10.67q13.67-1 24.5 8.84 10.84 9.83 12.17 24.5 12.67 138 106.17 226.83 93.5 88.83 225.83 88.83 139.33 0 236.33-97t97-236.33q0-133.67-90-228.17T496.67-812q-14.67-1.33-23.84-11.67-9.16-10.33-8.83-24.66.33-13.67 10-22.67 9.67-9 23-8.67 80 3 149.83 36 69.84 33 121.5 87.17Q820-702.33 850-631.17 880-560 880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm-97.33-420-132-131-33.34 101Q213-518 201-518.5q-12-.5-15.67-12.5L89.67-850q-2.67-9.33 4.5-16.5 7.16-7.17 16.5-4.5l319 95.67q12 3.66 12.5 15.66t-11.5 16.34l-101 33.33 132 132q17 17 17 39t-17 39q-17 17-39.5 17t-39.5-17Z"></path></svg></span> Drag options to blanks, or click blank then click option'</span></div><div class="fill-options" id="fillOptions-t5"><div class="fill-option " draggable="true" data-key="A" data-task="t5"><span class="option-key">A</span>summary</div><div class="fill-option " draggable="true" data-key="B" data-task="t5"><span class="option-key">B</span>id</div><div class="fill-option " draggable="true" data-key="C" data-task="t5"><span class="option-key">C</span>aria-label</div><div class="fill-option " draggable="true" data-key="D" data-task="t5"><span class="option-key">D</span>class</div></div><button class="verify-btn" id="verifyBtn-t5" disabled=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 13l4 4L19 7"></path></svg>Verify Answer</button><div class="attempts-counter" id="attempts-t5"><span>Attempts:</span><div class="attempts-dots"><span class="attempt-dot "></span><span class="attempt-dot "></span><span class="attempt-dot "></span></div><span id="attemptsLeft-t5">3<!-- --> left</span></div><div class="hint-box d-none" id="hint-t5"><div class="hint-box-title">💡 Hint</div><div class="hint-box-text" id="hintText-t5"></div></div><div class="mistakes-box d-none" id="mistakes-t5"><div class="mistakes-box-title">Common Mistakes</div><div class="mistakes-list"><div class="mistake-item">Using class instead of id for unique identification.</div><div class="mistake-item">Confusing aria-label with summary.</div></div></div><div class="feedback-box incorrect d-none"><div class="feedback-title">✗ Incorrect</div><div class="feedback-text"><p>The <code>summary</code> attribute describes the table for screen readers, <code>id</code> gives a unique identifier, and <code>aria-label</code> provides an accessible name.</p></div></div></div></div></div></div></article></div><div><article class="content-card" id="practice"><div class="code-articles-card-header justify-content-between"><div class="d-flex align-items-center" style="gap:12px"><span class="card-icon nofill intro"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="blue-icon-color site-fs-20" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 7a5 5 0 1 0 5 5"></path><path d="M13 3.055a9 9 0 1 0 7.941 7.945"></path><path d="M15 6v3h3l3 -3h-3v-3z"></path><path d="M15 9l-3 3"></path></svg></span><h2 class="codefly-card-title mb-0 pb-0">Practice</h2></div><span class="site-fs-15">(<!-- -->1<!-- -->/<!-- -->5<!-- -->)</span></div><div class="code-articles-card-body" data-theme="light"><div class=""><div class="mb-4"><div class="practice-content"><div class="text-pre-wrap dbd-txt-theme-intense pb-3">1<!-- -->. <!-- -->What is the main purpose of the <code><caption></code> element in an HTML table?</div></div><div class="question-pills-container " style="padding-top:unset"><span class="level-badge">easy</span></div></div><div class=""><div class="practice-options"><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>A<!-- -->. <!-- -->To add a footer row at the bottom of the table.</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>B<!-- -->. <!-- -->To provide a title or description for the table, improving accessibility.</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>C<!-- -->. <!-- -->To create a header cell for each column.</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>D<!-- -->. <!-- -->To style the table with colors and fonts.</span></div></div><div class="py-3"><button class="site-btn" style="width:200px" disabled="">Verify</button></div></div><div class="py-2 d-none"><div class="practice-helper-btns-wrapper"></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-solution-box"><h4 class="helper-solution-box-title">Solution</h4><div class="practice-helper-body"><ol><li><h4>Step 1: Understand the role of <code><caption></code></h4>The <code><caption></code> element is used to give a title or description to a table, which helps screen readers and users understand the table's content.</li><li><h4>Step 2: Compare with other options</h4>Options B, C, and D describe other table parts or styling, but only <code><caption></code> provides a descriptive title.</li><li><h4>Final Answer:</h4><strong>To provide a title or description for the table, improving accessibility.</strong> -> Option B</li><li><h4>Quick Check:</h4><code><caption></code> = Table title [OK]</li></ol></div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-hint-box"><div class="practice-helper-body"><strong class="helper-hint-box-title">Hint: </strong>Caption tags give tables a clear title for screen readers [OK]</div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-mistakes-box"><div class="practice-helper-body"><strong class="helper-mistakes-box-title">Common Mistakes: </strong><ul class="ph-mistakes-list"><li class="ph-mistake-item mb-0">Confusing <caption> with <tfoot> or <thead></li><li class="ph-mistake-item mb-0">Thinking <caption> styles the table</li><li class="ph-mistake-item mb-0">Ignoring accessibility benefits of <caption></li></ul></div></div></div></div></div></div><div class="d-none"><div class="mb-4"><div class="practice-content"><div class="text-pre-wrap dbd-txt-theme-intense pb-3">2<!-- -->. <!-- -->Which of the following is the correct way to mark a header cell for a column in an HTML table?</div></div><div class="question-pills-container " style="padding-top:unset"><span class="level-badge">easy</span></div></div><div class=""><div class="practice-options"><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>A<!-- -->. <code><td scope="col">Header</td></code></span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>B<!-- -->. <code><td>Header</td></code></span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>C<!-- -->. <code><th scope="row">Header</th></code></span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>D<!-- -->. <code><th scope="col">Header</th></code></span></div></div><div class="py-3"><button class="site-btn" style="width:200px" disabled="">Verify</button></div></div><div class="py-2 d-none"><div class="practice-helper-btns-wrapper"></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-solution-box"><h4 class="helper-solution-box-title">Solution</h4><div class="practice-helper-body"><ol><li><h4>Step 1: Identify the correct element for header cells</h4>The <code><th></code> element is used for header cells, not <code><td></code>.</li><li><h4>Step 2: Understand the scope attribute</h4>For column headers, <code>scope="col"</code> is correct. <code><th scope="col">Header</th></code> uses <code><th scope="col"></code>, which is the proper syntax.</li><li><h4>Final Answer:</h4><strong><th scope="col">Header</th></strong> -> Option D</li><li><h4>Quick Check:</h4><code><th scope="col"></code> = Column header [OK]</li></ol></div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-hint-box"><div class="practice-helper-body"><strong class="helper-hint-box-title">Hint: </strong>Use <th> with scope="col" for column headers [OK]</div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-mistakes-box"><div class="practice-helper-body"><strong class="helper-mistakes-box-title">Common Mistakes: </strong><ul class="ph-mistakes-list"><li class="ph-mistake-item mb-0">Using <td> instead of <th> for headers</li><li class="ph-mistake-item mb-0">Mixing scope="row" with column headers</li><li class="ph-mistake-item mb-0">Omitting the scope attribute</li></ul></div></div></div></div></div></div><div class="d-none"><div class="mb-4"><div class="practice-content"><div class="text-pre-wrap dbd-txt-theme-intense pb-3">3<!-- -->. <!-- -->Given the following table snippet, what will screen readers associate the header "Name" with?
<pre><table>
<caption>User List</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>30</td>
</tr>
</tbody>
</table></pre></div></div><div class="question-pills-container " style="padding-top:unset"><span class="level-badge">medium</span></div></div><div class=""><div class="practice-options"><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>A<!-- -->. <!-- -->The header "Name" is linked to the first column cells like "Alice".</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>B<!-- -->. <!-- -->The header "Name" is linked to the first row cells like "Alice" and "30".</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>C<!-- -->. <!-- -->The header "Name" is ignored by screen readers because it lacks an id.</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>D<!-- -->. <!-- -->The header "Name" is linked to the entire table caption.</span></div></div><div class="py-3"><button class="site-btn" style="width:200px" disabled="">Verify</button></div></div><div class="py-2 d-none"><div class="practice-helper-btns-wrapper"></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-solution-box"><h4 class="helper-solution-box-title">Solution</h4><div class="practice-helper-body"><ol><li><h4>Step 1: Understand scope="col" usage</h4>The <code>scope="col"</code> attribute on the <code><th></code> means the header applies to the entire column below it.</li><li><h4>Step 2: Identify which cells belong to the "Name" column</h4>The first column cells, such as "Alice", are associated with the "Name" header for screen readers.</li><li><h4>Final Answer:</h4><strong>The header "Name" is linked to the first column cells like "Alice".</strong> -> Option A</li><li><h4>Quick Check:</h4>scope="col" links header to column cells [OK]</li></ol></div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-hint-box"><div class="practice-helper-body"><strong class="helper-hint-box-title">Hint: </strong>scope="col" links header to column cells below [OK]</div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-mistakes-box"><div class="practice-helper-body"><strong class="helper-mistakes-box-title">Common Mistakes: </strong><ul class="ph-mistakes-list"><li class="ph-mistake-item mb-0">Confusing row and column scope</li><li class="ph-mistake-item mb-0">Thinking headers need id attributes to link</li><li class="ph-mistake-item mb-0">Assuming caption links headers</li></ul></div></div></div></div></div></div><div class="d-none"><div class="mb-4"><div class="practice-content"><div class="text-pre-wrap dbd-txt-theme-intense pb-3">4<!-- -->. <!-- -->What is wrong with this table snippet regarding accessibility?
<pre><table>
<tr>
<td>Product</td>
<td>Price</td>
</tr>
<tr>
<td>Book</td>
<td>$10</td>
</tr>
</table></pre></div></div><div class="question-pills-container " style="padding-top:unset"><span class="level-badge">medium</span></div></div><div class=""><div class="practice-options"><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>A<!-- -->. <!-- -->The table is missing <code><caption></code> for description.</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>B<!-- -->. <!-- -->The header cells use <code><td></code> instead of <code><th></code>.</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>C<!-- -->. <!-- -->All of the above.</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>D<!-- -->. <!-- -->The <code>scope</code> attribute is missing on header cells.</span></div></div><div class="py-3"><button class="site-btn" style="width:200px" disabled="">Verify</button></div></div><div class="py-2 d-none"><div class="practice-helper-btns-wrapper"></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-solution-box"><h4 class="helper-solution-box-title">Solution</h4><div class="practice-helper-body"><ol><li><h4>Step 1: Check for caption element</h4>The table lacks a <code><caption></code>, which helps describe the table for screen readers.</li><li><h4>Step 2: Check header cell tags and attributes</h4>The first row uses <code><td></code> instead of <code><th></code> for headers, and no <code>scope</code> attributes are present.</li><li><h4>Final Answer:</h4><strong>All of the above.</strong> -> Option C</li><li><h4>Quick Check:</h4>Missing caption, wrong header tags, and no scope = C [OK]</li></ol></div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-hint-box"><div class="practice-helper-body"><strong class="helper-hint-box-title">Hint: </strong>Headers need <th> with scope and caption for full accessibility [OK]</div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-mistakes-box"><div class="practice-helper-body"><strong class="helper-mistakes-box-title">Common Mistakes: </strong><ul class="ph-mistakes-list"><li class="ph-mistake-item mb-0">Using <td> for headers</li><li class="ph-mistake-item mb-0">Skipping caption element</li><li class="ph-mistake-item mb-0">Not adding scope attribute to headers</li></ul></div></div></div></div></div></div><div class="d-none"><div class="mb-4"><div class="practice-content"><div class="text-pre-wrap dbd-txt-theme-intense pb-3">5<!-- -->. <!-- -->You want to create an accessible table showing students and their scores. Which combination of elements and attributes is best practice?</div></div><div class="question-pills-container " style="padding-top:unset"><span class="level-badge">hard</span></div></div><div class=""><div class="practice-options"><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>A<!-- -->. <!-- -->Use <code><caption></code> for the title, <code><th scope="col"></code> for column headers, and <code><th scope="row"></code> for row headers.</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>B<!-- -->. <!-- -->Use <code><caption></code> for the title, <code><td></code> for all cells, and no scope attributes.</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>C<!-- -->. <!-- -->Use <code><thead></code> with <code><td></code> for headers and <code><tbody></code> for data rows.</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>D<!-- -->. <!-- -->Use <code><caption></code> for the title and <code>aria-label</code> on each <code><td></code> cell.</span></div></div><div class="py-3"><button class="site-btn" style="width:200px" disabled="">Verify</button></div></div><div class="py-2 d-none"><div class="practice-helper-btns-wrapper"></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-solution-box"><h4 class="helper-solution-box-title">Solution</h4><div class="practice-helper-body"><ol><li><h4>Step 1: Use <code><caption></code> for table description</h4>This helps all users understand the table's purpose.</li><li><h4>Step 2: Use <code><th></code> with proper scope for headers</h4>Column headers get <code>scope="col"</code>, row headers get <code>scope="row"</code>. This clarifies relationships for screen readers.</li><li><h4>Final Answer:</h4><strong>Use <caption> for the title, <th scope="col"> for column headers, and <th scope="row"> for row headers.</strong> -> Option A</li><li><h4>Quick Check:</h4>Caption + th with scope col/row = best accessibility [OK]</li></ol></div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-hint-box"><div class="practice-helper-body"><strong class="helper-hint-box-title">Hint: </strong>Caption plus <th> with scope="col" and scope="row" is best [OK]</div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-mistakes-box"><div class="practice-helper-body"><strong class="helper-mistakes-box-title">Common Mistakes: </strong><ul class="ph-mistakes-list"><li class="ph-mistake-item mb-0">Using <td> for headers</li><li class="ph-mistake-item mb-0">Skipping scope attributes</li><li class="ph-mistake-item mb-0">Relying only on aria-labels on data cells</li></ul></div></div></div></div></div></div><div class="d-flex align-items-center justify-content-between mt-4"><button class="secondary-site-btn" disabled=""><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"></path></svg> Previous</button><div class="practice-question-toggles-wrapper"><button class="practice-question-toggle-btn active ">1</button><button class="practice-question-toggle-btn ">2</button><button class="practice-question-toggle-btn ">3</button><button class="practice-question-toggle-btn ">4</button><button class="practice-question-toggle-btn ">5</button></div><button class="secondary-site-btn">Next <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path></svg></button></div></div></article></div><div id="mock" class="mtc-wrapper"><div class="mtc-card-container"><div class="mtc-card pulse-effect"><span class="mtc-recommended-badge">Recommended</span><div class="mtc-icon-wrap"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" color="#fff" style="color:#fff" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 7a5 5 0 1 0 5 5"></path><path d="M13 3.055a9 9 0 1 0 7.941 7.945"></path><path d="M15 6v3h3l3 -3h-3v-3z"></path><path d="M15 9l-3 3"></path></svg></div><h4 class="mtc-heading">Ready to prove it?</h4><p class="mtc-sub">Pass the test and this pattern moves <span class="mtc-state-pill">unknown</span> <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="m268 112 144 144-144 144m124-144H100"></path></svg> <span class="mtc-state-pill good">strong</span> <span class="d-inline-block">while earning <span class="weight-800">+1 Grip</span></span> toward your certificate.</p><div class="mtc-pills"><span class="mtc-pill"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>10 questions</span><span class="mtc-pill"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="13" width="13" xmlns="http://www.w3.org/2000/svg"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z"></path></svg>~5 min</span><span class="mtc-pill"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>easy <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="m268 112 144 144-144 144m124-144H100"></path></svg> hard</span></div><div class="mtc-cta-wrap"><button type="button" class="mtc-cta-btn">Take the Test <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="m268 112 144 144-144 144m124-144H100"></path></svg></button></div></div></div></div></div></main><div class="rpi-float-wrap"><button type="button" class="rpi-float-btn" aria-label="Report an issue"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"></path><line x1="4" y1="22" x2="4" y2="15"></line></svg><span class="rpi-float-label">Report Issue</span></button></div></div><div style="display:none"><div id="ad-management-config-settings" data-blocklist-all="1"></div></div> <script src="/_next/static/chunks/webpack-28170116499ad51b.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/_next/static/css/d071dca61fbb01bf.css\",\"style\"]\n2:HL[\"/_next/static/css/907864b6faf28c32.css\",\"style\"]\n3:HL[\"/_next/static/css/ada9a246b4e9c7f9.css\",\"style\"]\n4:HL[\"/_next/static/css/725c7861d1898ba8.css\",\"style\"]\n5:HL[\"/_next/static/css/c478212c00f26f15.css\",\"style\"]\n6:HL[\"/_next/static/css/989afc350a4b3a28.css\",\"style\"]\n7:HL[\"/_next/static/css/ccfdf35169bd162c.css\",\"style\"]\n8:HL[\"/_next/static/css/417e7aee3e688b57.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"9:I[95751,[],\"\"]\nc:I[39275,[],\"\"]\n12:I[61343,[],\"\"]\n13:I[84080,[\"8726\",\"static/chunks/8726-fd60949e252ac8d1.js\",\"3185\",\"static/chunks/app/layout-e2ef1005801dc1ed.js\"],\"\"]\n14:I[88726,[\"8726\",\"static/chunks/8726-fd60949e252ac8d1.js\",\"3185\",\"static/chunks/app/layout-e2ef1005801dc1ed.js\"],\"Toaster\"]\n15:I[20154,[\"8422\",\"static/chunks/66ec4792-3d3220126f3e74ee.js\",\"6950\",\"static/chunks/f8025e75-5dd99dd1a689ea97.js\",\"6795\",\"static/chunks/6795-1b544390b9b7cb09.js\",\"5214\",\"static/chunks/5214-cc3a3a8017cc6e4d.js\",\"7078\",\"static/chunks/7078-09556dce22020d83.js\",\"3154\",\"static/chunks/3154-0aa2f15561902c10.js\",\"7562\",\"static/chunks/7562-b71a43604fd32292.js\",\"4481\",\"static/chunks/4481-14671e1e3d1ffff7.js\",\"4662\",\"static/chunks/4662-1ac1c089600dcc35.js\",\"9160\",\"static/chunks/app/not-found-b9aad74520590312.js\"],\"default\"]\n16:I[78598,[\"8726\",\"static/chunks/8726-fd60949e252ac8d1.js\",\"3185\",\"static/chunks/app/layout-e2ef1005801dc1ed.js\"],\"default\"]\n17:I[56192,[\"8726\",\"static/chunks/8726-fd60949e252ac8d1.js\",\"3185\",\"static/chunks/app/layout-e2ef1005801dc1ed.js\"],\"default\"]\n19:I[76130,[],\"\"]\nd:[\"lang\",\"en\",\"d\"]\ne:[\"subject\",\"html\",\"d\"]\nf:[\"part\",\"part-1\",\"d\"]\n10:[\"pattern\",\"html-table-accessibility-basics\",\"d\"]\n11:[\"mode\",\"try\",\"oc\"]\n1a:[]\n"])</script><script>self.__next_f.push([1,"0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/d071dca61fbb01bf.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/907864b6faf28c32.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L9\",null,{\"buildId\":\"leyaa-prod-build-id\",\"assetPrefix\":\"\",\"initialCanonicalUrl\":\"/en/codefly/learn/html/part-1/html-table-accessibility-basics/try\",\"initialTree\":[\"\",{\"children\":[[\"lang\",\"en\",\"d\"],{\"children\":[\"codefly\",{\"children\":[\"learn\",{\"children\":[[\"subject\",\"html\",\"d\"],{\"children\":[[\"part\",\"part-1\",\"d\"],{\"children\":[[\"pattern\",\"html-table-accessibility-basics\",\"d\"],{\"children\":[[\"mode\",\"try\",\"oc\"],{\"children\":[\"__PAGE__\",{}]}]}]}]}]}]}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"lang\",\"en\",\"d\"],{\"children\":[\"codefly\",{\"children\":[\"learn\",{\"children\":[[\"subject\",\"html\",\"d\"],{\"children\":[[\"part\",\"part-1\",\"d\"],{\"children\":[[\"pattern\",\"html-table-accessibility-basics\",\"d\"],{\"children\":[[\"mode\",\"try\",\"oc\"],{\"children\":[\"__PAGE__\",{},[[\"$La\",\"$Lb\"],null],null]},[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$d\",\"children\",\"codefly\",\"children\",\"learn\",\"children\",\"$e\",\"children\",\"$f\",\"children\",\"$10\",\"children\",\"$11\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L12\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/ada9a246b4e9c7f9.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/725c7861d1898ba8.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"2\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/c478212c00f26f15.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"3\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/989afc350a4b3a28.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"4\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/ccfdf35169bd162c.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"5\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/417e7aee3e688b57.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$d\",\"children\",\"codefly\",\"children\",\"learn\",\"children\",\"$e\",\"children\",\"$f\",\"children\",\"$10\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L12\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$d\",\"children\",\"codefly\",\"children\",\"learn\",\"children\",\"$e\",\"children\",\"$f\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L12\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$d\",\"children\",\"codefly\",\"children\",\"learn\",\"children\",\"$e\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L12\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$d\",\"children\",\"codefly\",\"children\",\"learn\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L12\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$d\",\"children\",\"codefly\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L12\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$d\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L12\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"meta\",null,{\"name\":\"theme-color\",\"content\":\"#5f56fe\"}],[\"$\",\"meta\",null,{\"name\":\"msapplication-TileColor\",\"content\":\"#5f56fe\"}],[\"$\",\"$L13\",null,{\"src\":\"https://www.googletagmanager.com/gtag/js?id=G-N2NY2DMMDW\",\"strategy\":\"afterInteractive\"}],[\"$\",\"$L13\",null,{\"id\":\"google-analytics\",\"strategy\":\"afterInteractive\",\"children\":\"\\n window.dataLayer = window.dataLayer || [];\\n function gtag(){dataLayer.push(arguments);}\\n gtag('js', new Date());\\n gtag('config', 'G-N2NY2DMMDW', {\\n page_path: window.location.pathname,\\n });\\n \"}],[\"$\",\"script\",null,{\"async\":true,\"src\":\"https://www.googletagmanager.com/gtag/js?id=AW-18214378714\"}],[\"$\",\"$L13\",null,{\"children\":\"\\n window.dataLayer = window.dataLayer || [];\\n function gtag() {\\n dataLayer.push(arguments);\\n }\\n gtag('js', new Date());\\n gtag('config', 'AW-18214378714');\\n \"}],[\"$\",\"script\",null,{\"data-grow-initializer\":\"\",\"suppressHydrationWarning\":true,\"dangerouslySetInnerHTML\":{\"__html\":\"!(function(){window.growMe||((window.growMe=function(e){window.growMe._.push(e);}),(window.growMe._=[]));var e=document.createElement(\\\"script\\\");(e.type=\\\"text/javascript\\\"),(e.src=\\\"https://faves.grow.me/main.js\\\"),(e.defer=!0),e.setAttribute(\\\"data-grow-faves-site-id\\\",\\\"U2l0ZTo0MGIxZDBlZC0wNzdlLTQ0NjgtOThmOC1kNDYyZGMwM2IwMWY=\\\");var t=document.getElementsByTagName(\\\"script\\\")[0];t.parentNode.insertBefore(e,t);})();\"}}],[\"$\",\"$L13\",null,{\"src\":\"//scripts.scriptwrapper.com/tags/40b1d0ed-077e-4468-98f8-d462dc03b01f.js\",\"strategy\":\"afterInteractive\",\"data-noptimize\":\"1\",\"data-cfasync\":\"false\"}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"suppressHydrationWarning\":true,\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"WebApplication\\\",\\\"name\\\":\\\"Leyaa.ai\\\",\\\"description\\\":\\\"Leyaa.ai builds learning intelligence that understands how you learn - guiding what to study, how to practice, and when to move forward.\\\",\\\"url\\\":\\\"https://leyaa.ai\\\",\\\"applicationCategory\\\":\\\"EducationalApplication\\\",\\\"operatingSystem\\\":\\\"Web\\\",\\\"offers\\\":{\\\"@type\\\":\\\"Offer\\\",\\\"price\\\":\\\"0\\\",\\\"priceCurrency\\\":\\\"USD\\\"},\\\"creator\\\":{\\\"@type\\\":\\\"Organization\\\",\\\"name\\\":\\\"Leyaa.ai\\\"}}\"}}],[\"$\",\"$L13\",null,{\"id\":\"clarity-script\",\"strategy\":\"afterInteractive\",\"dangerouslySetInnerHTML\":{\"__html\":\"\\n (function(c,l,a,r,i,t,y){\\n c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};\\n t=l.createElement(r);t.async=1;t.src=\\\"https://www.clarity.ms/tag/\\\"+i;\\n y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);\\n })(window, document, \\\"clarity\\\", \\\"script\\\", \\\"w4gxh6rdmh\\\");\\n \"}}]]}],[\"$\",\"body\",null,{\"children\":[[\"$\",\"$L14\",null,{\"containerStyle\":{\"top\":70}}],[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L12\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[\"$\",\"$L15\",null,{}],\"notFoundStyles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/c478212c00f26f15.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],\"styles\":null}],[\"$\",\"$L16\",null,{}],\" \",[\"$\",\"$L17\",null,{}]]}]]}],null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$L18\"],\"globalErrorComponent\":\"$19\",\"missingSlots\":\"$W1a\"}]]\n"])</script><script>self.__next_f.push([1,"18:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Table accessibility basics in HTML - Interactive Code Practice | Leyaa.ai\"}],[\"$\",\"meta\",\"3\",{\"name\":\"description\",\"content\":\"Practice Table accessibility basics in HTML with interactive drag-and-drop exercises. Complete code by filling in the blanks. Instant feedback, hints \u0026 explanations. Free.\"}],[\"$\",\"meta\",\"4\",{\"name\":\"author\",\"content\":\"Leyaa.ai\"}],[\"$\",\"link\",\"5\",{\"rel\":\"manifest\",\"href\":\"/manifest.json\",\"crossOrigin\":\"use-credentials\"}],[\"$\",\"meta\",\"6\",{\"name\":\"keywords\",\"content\":\"learning intelligence,AI learning,personalized learning,adaptive learning,study guide,exam preparation,learning platform,education technology,edtech,smart learning\"}],[\"$\",\"meta\",\"7\",{\"name\":\"creator\",\"content\":\"Leyaa.ai\"}],[\"$\",\"meta\",\"8\",{\"name\":\"publisher\",\"content\":\"Leyaa.ai\"}],[\"$\",\"meta\",\"9\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"10\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"meta\",\"11\",{\"name\":\"mobile-web-app-capable\",\"content\":\"yes\"}],[\"$\",\"meta\",\"12\",{\"name\":\"content-language\",\"content\":\"en\"}],[\"$\",\"link\",\"13\",{\"rel\":\"canonical\",\"href\":\"https://leyaa.ai/codefly/learn/html/part-1/html-table-accessibility-basics/try\"}],[\"$\",\"link\",\"14\",{\"rel\":\"alternate\",\"hrefLang\":\"en\",\"href\":\"https://leyaa.ai/codefly/learn/html/part-1/html-table-accessibility-basics/try\"}],[\"$\",\"link\",\"15\",{\"rel\":\"alternate\",\"hrefLang\":\"x-default\",\"href\":\"https://leyaa.ai/codefly/learn/html/part-1/html-table-accessibility-basics/try\"}],[\"$\",\"meta\",\"16\",{\"name\":\"apple-mobile-web-app-capable\",\"content\":\"yes\"}],[\"$\",\"meta\",\"17\",{\"name\":\"apple-mobile-web-app-title\",\"content\":\"Leyaa\"}],[\"$\",\"meta\",\"18\",{\"name\":\"apple-mobile-web-app-status-bar-style\",\"content\":\"default\"}],[\"$\",\"meta\",\"19\",{\"property\":\"og:title\",\"content\":\"Table accessibility basics in HTML - Interactive Code Practice | Leyaa.ai\"}],[\"$\",\"meta\",\"20\",{\"property\":\"og:description\",\"content\":\"Practice Table accessibility basics in HTML with interactive drag-and-drop exercises. Complete code by filling in the blanks. Instant feedback, hints \u0026 explanations. Free.\"}],[\"$\",\"meta\",\"21\",{\"property\":\"og:url\",\"content\":\"https://leyaa.ai/codefly/learn/html/part-1/html-table-accessibility-basics/try\"}],[\"$\",\"meta\",\"22\",{\"property\":\"og:locale\",\"content\":\"en_US\"}],[\"$\",\"meta\",\"23\",{\"property\":\"og:image\",\"content\":\"https://leyaa.ai/Assets/metaImages/leyaa-preview-image.png\"}],[\"$\",\"meta\",\"24\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"25\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"26\",{\"property\":\"og:image:alt\",\"content\":\"Table accessibility basics in HTML - Interactive Code Practice\"}],[\"$\",\"meta\",\"27\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"28\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"29\",{\"name\":\"twitter:site\",\"content\":\"@leyaaai\"}],[\"$\",\"meta\",\"30\",{\"name\":\"twitter:creator\",\"content\":\"@leyaaai\"}],[\"$\",\"meta\",\"31\",{\"name\":\"twitter:title\",\"content\":\"Table accessibility basics in HTML - Interactive Code Practice | Leyaa.ai\"}],[\"$\",\"meta\",\"32\",{\"name\":\"twitter:description\",\"content\":\"Practice Table accessibility basics in HTML with interactive drag-and-drop exercises. Complete code by filling in the blanks. Instant feedback, hints \u0026 explanations. Free.\"}],[\"$\",\"meta\",\"33\",{\"name\":\"twitter:image\",\"content\":\"https://leyaa.ai/Assets/metaImages/leyaa-preview-image.png\"}],[\"$\",\"link\",\"34\",{\"rel\":\"icon\",\"href\":\"/leyaa-logo.png\"}],[\"$\",\"link\",\"35\",{\"rel\":\"apple-touch-icon\",\"href\":\"https://leyaa.ai/Assets/Favicons/apple-touch-icon.png\"}],[\"$\",\"meta\",\"36\",{\"name\":\"next-size-adjust\"}]]\n"])</script><script>self.__next_f.push([1,"a:null\n"])</script><script>self.__next_f.push([1,"1c:I[43489,[\"8422\",\"static/chunks/66ec4792-3d3220126f3e74ee.js\",\"6950\",\"static/chunks/f8025e75-5dd99dd1a689ea97.js\",\"6051\",\"static/chunks/795d4814-8b40e2eae05948ca.js\",\"5706\",\"static/chunks/9c4e2130-0ef90d15550fcb15.js\",\"522\",\"static/chunks/94730671-fd9628eddbd5107b.js\",\"7699\",\"static/chunks/8e1d74a4-d3c1e3cfb4eeea98.js\",\"7240\",\"static/chunks/53c13509-a3e4ac0640ae03f2.js\",\"9956\",\"static/chunks/ee560e2c-27ba7a66c659fa82.js\",\"2516\",\"static/chunks/f7333993-31ab72eb9b202e3d.js\",\"1779\",\"static/chunks/0e762574-cee3ec2351d97ca0.js\",\"6795\",\"static/chunks/6795-1b544390b9b7cb09.js\",\"5214\",\"static/chunks/5214-cc3a3a8017cc6e4d.js\",\"7078\",\"static/chunks/7078-09556dce22020d83.js\",\"4889\",\"static/chunks/4889-de8d1c4f2ff2f134.js\",\"8726\",\"static/chunks/8726-fd60949e252ac8d1.js\",\"7534\",\"static/chunks/7534-02c906a11e681445.js\",\"4220\",\"static/chunks/4220-e3c1264f6e3453a7.js\",\"7562\",\"static/chunks/7562-b71a43604fd32292.js\",\"4481\",\"static/chunks/4481-14671e1e3d1ffff7.js\",\"6857\",\"static/chunks/6857-f9121be732678b30.js\",\"2202\",\"static/chunks/2202-dad5d33fadc7ea73.js\",\"1786\",\"static/chunks/1786-7253d5c3df8362c5.js\",\"7029\",\"static/chunks/app/%5Blang%5D/codefly/learn/%5Bsubject%5D/%5Bpart%5D/%5Bpattern%5D/%5B%5B...mode%5D%5D/page-b11550cd55444a64.js\"],\"default\"]\n1b:T48c,{\"@context\":\"https://schema.org\",\"@type\":\"LearningResource\",\"name\":\"Table accessibility basics in HTML - Interactive Code Practice\",\"description\":\"Practice Table accessibility basics in HTML with interactive drag-and-drop exercises. Complete code by filling in the blanks. Instant feedback, hints \u0026 explanations. Free.\",\"url\":\"https://leyaa.ai/codefly/learn/html/part-1/html-table-accessibility-basics/try\",\"learningResourceType\":\"Practice Exercise\",\"programmingLanguage\":\"HTML\",\"inLanguage\":\"en\",\"isAccessibleForFree\":true,\"teaches\":\"Table accessibility basics in HTML - Interactive Code Practice\",\"provider\":{\"@type\":\"Organization\",\"url\":\"https://leyaa.ai\"},\"educationalLevel\":\"Beginner to Advanced\",\"breadcrumb\":{\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"posi"])</script><script>self.__next_f.push([1,"tion\":1,\"name\":\"Home\",\"item\":\"https://leyaa.ai\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Table accessibility basics in HTML - Interactive Code Practice\",\"item\":\"https://leyaa.ai/codefly/learn/html/part-1/html-table-accessibility-basics\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Try It\",\"item\":\"https://leyaa.ai/codefly/learn/html/part-1/html-table-accessibility-basics/try\"}]}}"])</script><script>self.__next_f.push([1,"b:[[[\"$\",\"script\",\"0\",{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"$1b\"}}]],[\"$\",\"$L1c\",null,{\"subject\":\"html\",\"dbSubject\":\"html\",\"part\":\"part-1\",\"pattern\":\"html_table_accessibility_basics\",\"modeSlug\":\"try\",\"lang\":\"en\",\"internalLinks\":[{\"code\":\"LMC\",\"slug\":\"\",\"label\":\"📖 Learn\",\"href\":\"/codefly/learn/html/part-1/html-table-accessibility-basics\",\"active\":false},{\"code\":\"LMCWHY\",\"slug\":\"why\",\"label\":\"💡 Why Learn This\",\"href\":\"/codefly/learn/html/part-1/html-table-accessibility-basics/why\",\"active\":false},{\"code\":\"DLM\",\"slug\":\"deep\",\"label\":\"💡 Deep Learn Mode\",\"href\":\"/codefly/learn/html/part-1/html-table-accessibility-basics/deep\",\"active\":false},{\"code\":\"TMC\",\"slug\":\"try\",\"label\":\"✏️ Try It\",\"href\":\"/codefly/learn/html/part-1/html-table-accessibility-basics/try\",\"active\":true},{\"code\":\"VMC\",\"slug\":\"visualize\",\"label\":\"👁 Visualize\",\"href\":\"/codefly/learn/html/part-1/html-table-accessibility-basics/visualize\",\"active\":false},{\"code\":\"TCM\",\"slug\":\"complexity\",\"label\":\"⏱ Complexity\",\"href\":\"/codefly/learn/html/part-1/html-table-accessibility-basics/complexity\",\"active\":false},{\"code\":\"CMC\",\"slug\":\"challenge\",\"label\":\"🏆 Challenge\",\"href\":\"/codefly/learn/html/part-1/html-table-accessibility-basics/challenge\",\"active\":false},{\"code\":\"PMC\",\"slug\":\"project\",\"label\":\"📁 Project\",\"href\":\"/codefly/learn/html/part-1/html-table-accessibility-basics/project\",\"active\":false},{\"code\":\"RMC\",\"slug\":\"review\",\"label\":\"🧠 Quick Review\",\"href\":\"/codefly/learn/html/part-1/html-table-accessibility-basics/review\",\"active\":false}],\"isLoggedIn\":false,\"seoH1\":\"Table accessibility basics in HTML - Interactive Code Practice\",\"contentData\":{\"pattern_id\":\"html_table_accessibility_basics\",\"metadata\":{\"slot_map\":{\"LMCWHY\":\"LMCWHY\",\"LMC\":\"LMC\",\"TMC\":\"TMC\",\"CMC\":\"CMC\",\"RMC\":\"RMC\",\"VMC\":\"BRM\",\"TCM\":\"WPM\",\"PMC\":\"PMC\",\"DLM\":\"DLM\"}},\"modes\":{\"TMC\":{\"topic\":\"Table accessibility basics\",\"mode\":\"TMC_v5\",\"language\":\"html\",\"content_type\":\"Web Development\",\"tasks\":[{\"id\":\"t1\",\"type\":\"fill_in_blank\",\"difficulty\":\"easy\",\"instruction\":\"Complete the code to add a caption to the table for screen readers.\",\"code\":\"\u003ctable\u003e\\n {{BLANK_1}}\\n \u003ctr\u003e\u003ctd\u003eData 1\u003c/td\u003e\u003ctd\u003eData 2\u003c/td\u003e\u003c/tr\u003e\\n\u003c/table\u003e\",\"options\":{\"A\":\"\u003ccaption\u003eMonthly Sales\u003c/caption\u003e\",\"B\":\"\u003ctitle\u003eMonthly Sales\u003c/title\u003e\",\"C\":\"\u003cheader\u003eMonthly Sales\u003c/header\u003e\",\"D\":\"\u003csummary\u003eMonthly Sales\u003c/summary\u003e\"},\"correct_answer\":[\"A\"],\"answer_explanation\":\"\u003cp\u003eThe \u003ccaption\u003e element provides a title or explanation for the table, which helps screen readers understand the table's purpose.\u003c/p\u003e\",\"hints\":[{\"level\":1,\"hint\":\"Think about which HTML tag is specifically designed to describe a table.\"},{\"level\":2,\"hint\":\"The caption appears visually above the table and is read by screen readers.\"}],\"common_mistakes\":[\"Using \u003ctitle\u003e instead of \u003ccaption\u003e inside the table.\",\"Using \u003cheader\u003e or \u003csummary\u003e which are not valid table elements.\"],\"max_attempts\":3,\"time_limit_seconds\":120},{\"id\":\"t2\",\"type\":\"fill_in_blank\",\"difficulty\":\"medium\",\"instruction\":\"Complete the code to mark the first row as table headers.\",\"code\":\"\u003ctable\u003e\\n \u003ctr\u003e{{BLANK_1}}\u003c/tr\u003e\\n \u003ctr\u003e\u003ctd\u003eData 1\u003c/td\u003e\u003ctd\u003eData 2\u003c/td\u003e\u003c/tr\u003e\\n\u003c/table\u003e\",\"options\":{\"A\":\"\u003cth\u003eHeader 1\u003c/th\u003e\u003cth\u003eHeader 2\u003c/th\u003e\",\"B\":\"\u003ctd\u003eHeader 1\u003c/td\u003e\u003ctd\u003eHeader 2\u003c/td\u003e\",\"C\":\"\u003ccaption\u003eHeaders\u003c/caption\u003e\",\"D\":\"\u003cthead\u003eHeader 1 Header 2\u003c/thead\u003e\"},\"correct_answer\":[\"A\"],\"answer_explanation\":\"\u003cp\u003eThe \u003cth\u003e element defines header cells in a table row, which screen readers identify as headers.\u003c/p\u003e\",\"hints\":[{\"level\":1,\"hint\":\"Headers in tables use a special tag different from regular cells.\"},{\"level\":2,\"hint\":\"The tag for headers is similar to \u003ctd\u003e but starts with 'th'.\"}],\"common_mistakes\":[\"Using \u003ctd\u003e instead of \u003cth\u003e for headers.\",\"Trying to use \u003cthead\u003e inside a \u003ctr\u003e which is invalid.\"],\"max_attempts\":3,\"time_limit_seconds\":120},{\"id\":\"t3\",\"type\":\"fill_in_blank\",\"difficulty\":\"hard\",\"instruction\":\"Fix the error in the table to correctly associate headers with data cells using scope.\",\"code\":\"\u003ctable\u003e\\n \u003ctr\u003e\u003cth {{BLANK_1}}\u003eName\u003c/th\u003e\u003cth {{BLANK_1}}\u003eAge\u003c/th\u003e\u003c/tr\u003e\\n \u003ctr\u003e\u003ctd\u003eAlice\u003c/td\u003e\u003ctd\u003e30\u003c/td\u003e\u003c/tr\u003e\\n\u003c/table\u003e\",\"options\":{\"A\":\"scope=\\\"row\\\"\",\"B\":\"aria-label=\\\"header\\\"\",\"C\":\"scope=\\\"col\\\"\",\"D\":\"role=\\\"header\\\"\"},\"correct_answer\":[\"C\"],\"answer_explanation\":\"\u003cp\u003eThe scope=\\\"col\\\" attribute tells screen readers that these headers apply to columns.\u003c/p\u003e\",\"hints\":[{\"level\":1,\"hint\":\"Headers for columns use a specific scope attribute.\"},{\"level\":2,\"hint\":\"The value for column headers is 'col'.\"}],\"common_mistakes\":[\"Using scope=\\\"row\\\" for column headers.\",\"Using aria-label or role attributes incorrectly.\"],\"max_attempts\":3,\"time_limit_seconds\":120},{\"id\":\"t4\",\"type\":\"fill_in_blank\",\"difficulty\":\"hard\",\"instruction\":\"Fill both blanks to create a table with a header section and body section.\",\"code\":\"\u003ctable\u003e\\n {{BLANK_1}}\u003e\\n \u003ctr\u003e\u003cth scope=\\\"col\\\"\u003eProduct\u003c/th\u003e\u003cth scope=\\\"col\\\"\u003ePrice\u003c/th\u003e\u003c/tr\u003e\\n {{BLANK_2}}\u003e\\n \u003ctbody\u003e\\n \u003ctr\u003e\u003ctd\u003eBook\u003c/td\u003e\u003ctd\u003e$10\u003c/td\u003e\u003c/tr\u003e\\n \u003c/tbody\u003e\\n\u003c/table\u003e\",\"options\":{\"A\":\"\u003cthead\",\"B\":\"\u003ctfoot\",\"C\":\"\u003c/thead\",\"D\":\"\u003c/tfoot\"},\"correct_answer\":[\"A\",\"C\"],\"answer_explanation\":\"\u003cp\u003eThe \u0026lt;thead\u0026gt; and \u0026lt;/thead\u0026gt; tags wrap the header rows of a table, separating them from the body.\u003c/p\u003e\",\"hints\":[{\"level\":1,\"hint\":\"The header section starts with \u0026lt;thead\u0026gt; and ends with \u0026lt;/thead\u0026gt;.\"},{\"level\":2,\"hint\":\"Make sure to close the tag properly with a slash.\"}],\"common_mistakes\":[\"Using \u0026lt;tfoot\u0026gt; instead of \u0026lt;thead\u0026gt; for headers.\",\"Forgetting to close the \u0026lt;thead\u0026gt; tag.\"],\"max_attempts\":3,\"time_limit_seconds\":120},{\"id\":\"t5\",\"type\":\"fill_in_blank\",\"difficulty\":\"hard\",\"instruction\":\"Fill all three blanks to add a summary attribute and ARIA label for better accessibility.\",\"code\":\"\u003ctable {{BLANK_1}}=\\\"Sales data for 2023\\\" {{BLANK_2}}=\\\"sales-table\\\" {{BLANK_3}}=\\\"Sales Table\\\"\u003e\\n \u003ccaption\u003eAnnual Sales\u003c/caption\u003e\\n \u003cthead\u003e\\n \u003ctr\u003e\u003cth scope=\\\"col\\\"\u003eMonth\u003c/th\u003e\u003cth scope=\\\"col\\\"\u003eRevenue\u003c/th\u003e\u003c/tr\u003e\\n \u003c/thead\u003e\\n \u003ctbody\u003e\\n \u003ctr\u003e\u003ctd\u003eJanuary\u003c/td\u003e\u003ctd\u003e$1000\u003c/td\u003e\u003c/tr\u003e\\n \u003c/tbody\u003e\\n\u003c/table\u003e\",\"options\":{\"A\":\"summary\",\"B\":\"id\",\"C\":\"aria-label\",\"D\":\"class\"},\"correct_answer\":[\"A\",\"B\",\"C\"],\"answer_explanation\":\"\u003cp\u003eThe \u003ccode\u003esummary\u003c/code\u003e attribute describes the table for screen readers, \u003ccode\u003eid\u003c/code\u003e gives a unique identifier, and \u003ccode\u003earia-label\u003c/code\u003e provides an accessible name.\u003c/p\u003e\",\"hints\":[{\"level\":1,\"hint\":\"The summary attribute is used to describe the table's content.\"},{\"level\":2,\"hint\":\"The aria-label attribute gives an accessible name to the table.\"}],\"common_mistakes\":[\"Using class instead of id for unique identification.\",\"Confusing aria-label with summary.\"],\"max_attempts\":3,\"time_limit_seconds\":120}],\"learning_checkpoint\":{\"after_task\":3,\"micro_summary\":\"\u003cp\u003eYou have learned how to add captions, use header cells, and apply scope attributes to make tables accessible.\u003c/p\u003e\"},\"metadata\":{\"version\":\"5.0\",\"content_type\":\"markup\",\"total_tasks\":5,\"estimated_time_minutes\":10}}},\"subject\":\"html\",\"title\":\"Table accessibility basics\",\"puzzleDetails\":[{\"_id\":\"69b1785045baa2b58545feae\",\"question_number\":1,\"question\":\"What is the main purpose of the \u003ccode\u003e\u0026lt;caption\u0026gt;\u003c/code\u003e element in an HTML table?\",\"options\":{\"A\":\"To add a footer row at the bottom of the table.\",\"B\":\"To provide a title or description for the table, improving accessibility.\",\"C\":\"To create a header cell for each column.\",\"D\":\"To style the table with colors and fonts.\"},\"correct_answer\":[\"B\"],\"solution_explanation\":\"\u003cdiv class='solution-box'\u003e\u003cspan class='solution-label'\u003e\u003cstrong\u003eSolution:\u003c/strong\u003e\u003c/span\u003e\u003col\u003e\u003cli\u003e\u003ch4\u003eStep 1: Understand the role of \u003ccode\u003e\u0026lt;caption\u0026gt;\u003c/code\u003e\u003c/h4\u003eThe \u003ccode\u003e\u0026lt;caption\u0026gt;\u003c/code\u003e element is used to give a title or description to a table, which helps screen readers and users understand the table's content.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eStep 2: Compare with other options\u003c/h4\u003eOptions B, C, and D describe other table parts or styling, but only \u003ccode\u003e\u0026lt;caption\u0026gt;\u003c/code\u003e provides a descriptive title.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eFinal Answer:\u003c/h4\u003e\u003cstrong\u003eTo provide a title or description for the table, improving accessibility.\u003c/strong\u003e -\u003e Option B\u003c/li\u003e\u003cli\u003e\u003ch4\u003eQuick Check:\u003c/h4\u003e\u003ccode\u003e\u0026lt;caption\u0026gt;\u003c/code\u003e = Table title [OK]\u003c/li\u003e\u003c/ol\u003e\u003c/div\u003e\",\"quick_trick\":\"Caption tags give tables a clear title for screen readers [OK]\",\"common_mistakes\":[\"Confusing \u003ccaption\u003e with \u003ctfoot\u003e or \u003cthead\u003e\",\"Thinking \u003ccaption\u003e styles the table\",\"Ignoring accessibility benefits of \u003ccaption\u003e\"],\"subject\":\"html\",\"pattern\":\"Table accessibility basics\",\"category\":\"Web Development\",\"question_format\":\"MCQ\",\"question_mode\":\"conceptual\",\"difficulty\":\"easy\",\"topic\":\"Tables\",\"type\":\"Web Development\",\"question_type\":\"conceptual\",\"level\":\"easy\",\"test_type\":\"puzzle\",\"pattern_id\":\"html_table_accessibility_basics\",\"subjectTitle\":\"HTML\",\"part\":\"part-1\",\"set_no\":1,\"usage_count\":2,\"last_used_at\":\"2026-08-11T13:41:18.856Z\",\"topic_id\":\"html_p1_t7\"},{\"_id\":\"69b1785045baa2b58545feaf\",\"question_number\":2,\"question\":\"Which of the following is the correct way to mark a header cell for a column in an HTML table?\",\"options\":{\"A\":\"\u003ccode\u003e\u0026lt;td scope=\\\"col\\\"\u0026gt;Header\u0026lt;/td\u0026gt;\u003c/code\u003e\",\"B\":\"\u003ccode\u003e\u0026lt;td\u0026gt;Header\u0026lt;/td\u0026gt;\u003c/code\u003e\",\"C\":\"\u003ccode\u003e\u0026lt;th scope=\\\"row\\\"\u0026gt;Header\u0026lt;/th\u0026gt;\u003c/code\u003e\",\"D\":\"\u003ccode\u003e\u0026lt;th scope=\\\"col\\\"\u0026gt;Header\u0026lt;/th\u0026gt;\u003c/code\u003e\"},\"correct_answer\":[\"D\"],\"solution_explanation\":\"\u003cdiv class='solution-box'\u003e\u003cspan class='solution-label'\u003e\u003cstrong\u003eSolution:\u003c/strong\u003e\u003c/span\u003e\u003col\u003e\u003cli\u003e\u003ch4\u003eStep 1: Identify the correct element for header cells\u003c/h4\u003eThe \u003ccode\u003e\u0026lt;th\u0026gt;\u003c/code\u003e element is used for header cells, not \u003ccode\u003e\u0026lt;td\u0026gt;\u003c/code\u003e.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eStep 2: Understand the scope attribute\u003c/h4\u003eFor column headers, \u003ccode\u003escope=\\\"col\\\"\u003c/code\u003e is correct. \u003ccode\u003e\u0026lt;th scope=\\\"col\\\"\u0026gt;Header\u0026lt;/th\u0026gt;\u003c/code\u003e uses \u003ccode\u003e\u0026lt;th scope=\\\"col\\\"\u0026gt;\u003c/code\u003e, which is the proper syntax.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eFinal Answer:\u003c/h4\u003e\u003cstrong\u003e\u0026lt;th scope=\\\"col\\\"\u0026gt;Header\u0026lt;/th\u0026gt;\u003c/strong\u003e -\u003e Option D\u003c/li\u003e\u003cli\u003e\u003ch4\u003eQuick Check:\u003c/h4\u003e\u003ccode\u003e\u0026lt;th scope=\\\"col\\\"\u0026gt;\u003c/code\u003e = Column header [OK]\u003c/li\u003e\u003c/ol\u003e\u003c/div\u003e\",\"quick_trick\":\"Use \u003cth\u003e with scope=\\\"col\\\" for column headers [OK]\",\"common_mistakes\":[\"Using \u003ctd\u003e instead of \u003cth\u003e for headers\",\"Mixing scope=\\\"row\\\" with column headers\",\"Omitting the scope attribute\"],\"subject\":\"html\",\"pattern\":\"Table accessibility basics\",\"category\":\"Web Development\",\"question_format\":\"MCQ\",\"question_mode\":\"syntax\",\"difficulty\":\"easy\",\"topic\":\"Tables\",\"type\":\"Web Development\",\"question_type\":\"syntax\",\"level\":\"easy\",\"test_type\":\"puzzle\",\"pattern_id\":\"html_table_accessibility_basics\",\"subjectTitle\":\"HTML\",\"part\":\"part-1\",\"set_no\":1,\"usage_count\":2,\"last_used_at\":\"2026-08-21T13:04:44.454Z\",\"topic_id\":\"html_p1_t7\"},{\"_id\":\"69b1785045baa2b58545feb0\",\"question_number\":3,\"question\":\"Given the following table snippet, what will screen readers associate the header \\\"Name\\\" with?\\n\u003cpre\u003e\u0026lt;table\u0026gt;\\n \u0026lt;caption\u0026gt;User List\u0026lt;/caption\u0026gt;\\n \u0026lt;thead\u0026gt;\\n \u0026lt;tr\u0026gt;\\n \u0026lt;th scope=\\\"col\\\"\u0026gt;Name\u0026lt;/th\u0026gt;\\n \u0026lt;th scope=\\\"col\\\"\u0026gt;Age\u0026lt;/th\u0026gt;\\n \u0026lt;/tr\u0026gt;\\n \u0026lt;/thead\u0026gt;\\n \u0026lt;tbody\u0026gt;\\n \u0026lt;tr\u0026gt;\\n \u0026lt;td\u0026gt;Alice\u0026lt;/td\u0026gt;\\n \u0026lt;td\u0026gt;30\u0026lt;/td\u0026gt;\\n \u0026lt;/tr\u0026gt;\\n \u0026lt;/tbody\u0026gt;\\n\u0026lt;/table\u0026gt;\u003c/pre\u003e\",\"options\":{\"A\":\"The header \\\"Name\\\" is linked to the first column cells like \\\"Alice\\\".\",\"B\":\"The header \\\"Name\\\" is linked to the first row cells like \\\"Alice\\\" and \\\"30\\\".\",\"C\":\"The header \\\"Name\\\" is ignored by screen readers because it lacks an id.\",\"D\":\"The header \\\"Name\\\" is linked to the entire table caption.\"},\"correct_answer\":[\"A\"],\"solution_explanation\":\"\u003cdiv class='solution-box'\u003e\u003cspan class='solution-label'\u003e\u003cstrong\u003eSolution:\u003c/strong\u003e\u003c/span\u003e\u003col\u003e\u003cli\u003e\u003ch4\u003eStep 1: Understand scope=\\\"col\\\" usage\u003c/h4\u003eThe \u003ccode\u003escope=\\\"col\\\"\u003c/code\u003e attribute on the \u003ccode\u003e\u0026lt;th\u0026gt;\u003c/code\u003e means the header applies to the entire column below it.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eStep 2: Identify which cells belong to the \\\"Name\\\" column\u003c/h4\u003eThe first column cells, such as \\\"Alice\\\", are associated with the \\\"Name\\\" header for screen readers.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eFinal Answer:\u003c/h4\u003e\u003cstrong\u003eThe header \\\"Name\\\" is linked to the first column cells like \\\"Alice\\\".\u003c/strong\u003e -\u003e Option A\u003c/li\u003e\u003cli\u003e\u003ch4\u003eQuick Check:\u003c/h4\u003escope=\\\"col\\\" links header to column cells [OK]\u003c/li\u003e\u003c/ol\u003e\u003c/div\u003e\",\"quick_trick\":\"scope=\\\"col\\\" links header to column cells below [OK]\",\"common_mistakes\":[\"Confusing row and column scope\",\"Thinking headers need id attributes to link\",\"Assuming caption links headers\"],\"subject\":\"html\",\"pattern\":\"Table accessibility basics\",\"category\":\"Web Development\",\"question_format\":\"MCQ\",\"question_mode\":\"code_output\",\"difficulty\":\"medium\",\"topic\":\"Tables\",\"type\":\"Web Development\",\"question_type\":\"code_output\",\"level\":\"medium\",\"test_type\":\"puzzle\",\"pattern_id\":\"html_table_accessibility_basics\",\"subjectTitle\":\"HTML\",\"part\":\"part-1\",\"set_no\":1,\"usage_count\":1,\"last_used_at\":\"2026-08-09T08:36:44.093Z\",\"topic_id\":\"html_p1_t7\"},{\"_id\":\"69b1785045baa2b58545feb1\",\"question_number\":4,\"question\":\"What is wrong with this table snippet regarding accessibility?\\n\u003cpre\u003e\u0026lt;table\u0026gt;\\n \u0026lt;tr\u0026gt;\\n \u0026lt;td\u0026gt;Product\u0026lt;/td\u0026gt;\\n \u0026lt;td\u0026gt;Price\u0026lt;/td\u0026gt;\\n \u0026lt;/tr\u0026gt;\\n \u0026lt;tr\u0026gt;\\n \u0026lt;td\u0026gt;Book\u0026lt;/td\u0026gt;\\n \u0026lt;td\u0026gt;$10\u0026lt;/td\u0026gt;\\n \u0026lt;/tr\u0026gt;\\n\u0026lt;/table\u0026gt;\u003c/pre\u003e\",\"options\":{\"A\":\"The table is missing \u003ccode\u003e\u0026lt;caption\u0026gt;\u003c/code\u003e for description.\",\"B\":\"The header cells use \u003ccode\u003e\u0026lt;td\u0026gt;\u003c/code\u003e instead of \u003ccode\u003e\u0026lt;th\u0026gt;\u003c/code\u003e.\",\"C\":\"All of the above.\",\"D\":\"The \u003ccode\u003escope\u003c/code\u003e attribute is missing on header cells.\"},\"correct_answer\":[\"C\"],\"solution_explanation\":\"\u003cdiv class='solution-box'\u003e\u003cspan class='solution-label'\u003e\u003cstrong\u003eSolution:\u003c/strong\u003e\u003c/span\u003e\u003col\u003e\u003cli\u003e\u003ch4\u003eStep 1: Check for caption element\u003c/h4\u003eThe table lacks a \u003ccode\u003e\u0026lt;caption\u0026gt;\u003c/code\u003e, which helps describe the table for screen readers.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eStep 2: Check header cell tags and attributes\u003c/h4\u003eThe first row uses \u003ccode\u003e\u0026lt;td\u0026gt;\u003c/code\u003e instead of \u003ccode\u003e\u0026lt;th\u0026gt;\u003c/code\u003e for headers, and no \u003ccode\u003escope\u003c/code\u003e attributes are present.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eFinal Answer:\u003c/h4\u003e\u003cstrong\u003eAll of the above.\u003c/strong\u003e -\u003e Option C\u003c/li\u003e\u003cli\u003e\u003ch4\u003eQuick Check:\u003c/h4\u003eMissing caption, wrong header tags, and no scope = C [OK]\u003c/li\u003e\u003c/ol\u003e\u003c/div\u003e\",\"quick_trick\":\"Headers need \u003cth\u003e with scope and caption for full accessibility [OK]\",\"common_mistakes\":[\"Using \u003ctd\u003e for headers\",\"Skipping caption element\",\"Not adding scope attribute to headers\"],\"subject\":\"html\",\"pattern\":\"Table accessibility basics\",\"category\":\"Web Development\",\"question_format\":\"MCQ\",\"question_mode\":\"debug\",\"difficulty\":\"medium\",\"topic\":\"Tables\",\"type\":\"Web Development\",\"question_type\":\"debug\",\"level\":\"medium\",\"test_type\":\"puzzle\",\"pattern_id\":\"html_table_accessibility_basics\",\"subjectTitle\":\"HTML\",\"part\":\"part-1\",\"set_no\":1,\"usage_count\":1,\"last_used_at\":\"2026-07-06T07:05:26.889Z\",\"topic_id\":\"html_p1_t7\"},{\"_id\":\"69b1785045baa2b58545feb2\",\"question_number\":5,\"question\":\"You want to create an accessible table showing students and their scores. Which combination of elements and attributes is best practice?\",\"options\":{\"A\":\"Use \u003ccode\u003e\u0026lt;caption\u0026gt;\u003c/code\u003e for the title, \u003ccode\u003e\u0026lt;th scope=\\\"col\\\"\u0026gt;\u003c/code\u003e for column headers, and \u003ccode\u003e\u0026lt;th scope=\\\"row\\\"\u0026gt;\u003c/code\u003e for row headers.\",\"B\":\"Use \u003ccode\u003e\u0026lt;caption\u0026gt;\u003c/code\u003e for the title, \u003ccode\u003e\u0026lt;td\u0026gt;\u003c/code\u003e for all cells, and no scope attributes.\",\"C\":\"Use \u003ccode\u003e\u0026lt;thead\u0026gt;\u003c/code\u003e with \u003ccode\u003e\u0026lt;td\u0026gt;\u003c/code\u003e for headers and \u003ccode\u003e\u0026lt;tbody\u0026gt;\u003c/code\u003e for data rows.\",\"D\":\"Use \u003ccode\u003e\u0026lt;caption\u0026gt;\u003c/code\u003e for the title and \u003ccode\u003earia-label\u003c/code\u003e on each \u003ccode\u003e\u0026lt;td\u0026gt;\u003c/code\u003e cell.\"},\"correct_answer\":[\"A\"],\"solution_explanation\":\"\u003cdiv class='solution-box'\u003e\u003cspan class='solution-label'\u003e\u003cstrong\u003eSolution:\u003c/strong\u003e\u003c/span\u003e\u003col\u003e\u003cli\u003e\u003ch4\u003eStep 1: Use \u003ccode\u003e\u0026lt;caption\u0026gt;\u003c/code\u003e for table description\u003c/h4\u003eThis helps all users understand the table's purpose.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eStep 2: Use \u003ccode\u003e\u0026lt;th\u0026gt;\u003c/code\u003e with proper scope for headers\u003c/h4\u003eColumn headers get \u003ccode\u003escope=\\\"col\\\"\u003c/code\u003e, row headers get \u003ccode\u003escope=\\\"row\\\"\u003c/code\u003e. This clarifies relationships for screen readers.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eFinal Answer:\u003c/h4\u003e\u003cstrong\u003eUse \u0026lt;caption\u0026gt; for the title, \u0026lt;th scope=\\\"col\\\"\u0026gt; for column headers, and \u0026lt;th scope=\\\"row\\\"\u0026gt; for row headers.\u003c/strong\u003e -\u003e Option A\u003c/li\u003e\u003cli\u003e\u003ch4\u003eQuick Check:\u003c/h4\u003eCaption + th with scope col/row = best accessibility [OK]\u003c/li\u003e\u003c/ol\u003e\u003c/div\u003e\",\"quick_trick\":\"Caption plus \u003cth\u003e with scope=\\\"col\\\" and scope=\\\"row\\\" is best [OK]\",\"common_mistakes\":[\"Using \u003ctd\u003e for headers\",\"Skipping scope attributes\",\"Relying only on aria-labels on data cells\"],\"subject\":\"html\",\"pattern\":\"Table accessibility basics\",\"category\":\"Web Development\",\"question_format\":\"MCQ\",\"question_mode\":\"application\",\"difficulty\":\"hard\",\"topic\":\"Tables\",\"type\":\"Web Development\",\"question_type\":\"application\",\"level\":\"hard\",\"test_type\":\"puzzle\",\"pattern_id\":\"html_table_accessibility_basics\",\"subjectTitle\":\"HTML\",\"part\":\"part-1\",\"set_no\":1,\"usage_count\":2,\"last_used_at\":\"2026-07-27T07:22:44.712Z\",\"topic_id\":\"html_p1_t7\"}]},\"syllabusData\":{\"subject\":\"html\",\"part\":\"part-1\",\"difficulty\":\"beginner\",\"metadata\":{\"total_topics\":7,\"total_patterns\":43,\"patterns_with_content\":43,\"created_at\":\"2026-02-28T20:17:17.741100Z\",\"version\":\"4.2\",\"upload_tool\":\"upload_to_mongo.py v2.0\"},\"part_title\":\"Core Structure \u0026 Content\",\"subjectTitle\":\"HTML\",\"topics\":[{\"topic_id\":\"html_p1_t1\",\"title\":\"HTML Basics \u0026 Web Fundamentals\",\"order\":1,\"pattern_count\":7,\"patterns\":[{\"pattern_id\":\"html_what_is_html\",\"title\":\"What is HTML\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"html_role_of_html_in_web_development\",\"title\":\"Role of HTML in web development\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"html_how_browsers_read_html\",\"title\":\"How browsers read HTML\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"html_html_document_structure\",\"title\":\"HTML document structure\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"html_doctype_declaration\",\"title\":\"DOCTYPE declaration\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"html_head_and_body_sections\",\"title\":\"Head and body sections\",\"order\":6,\"has_content\":true},{\"pattern_id\":\"html_first_html_page\",\"title\":\"First HTML page\",\"order\":7,\"has_content\":true}]},{\"topic_id\":\"html_p1_t2\",\"title\":\"HTML Elements \u0026 Tags\",\"order\":2,\"pattern_count\":7,\"patterns\":[{\"pattern_id\":\"html_what_is_an_html_element\",\"title\":\"What is an HTML element\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"html_opening_and_closing_tags\",\"title\":\"Opening and closing tags\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"html_selfclosing_tags\",\"title\":\"Self-closing tags\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"html_nested_elements\",\"title\":\"Nested elements\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"html_blocklevel_elements\",\"title\":\"Block-level elements\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"html_inline_elements\",\"title\":\"Inline elements\",\"order\":6,\"has_content\":true},{\"pattern_id\":\"html_common_html_mistakes\",\"title\":\"Common HTML mistakes\",\"order\":7,\"has_content\":true}]},{\"topic_id\":\"html_p1_t3\",\"title\":\"Text Content \u0026 Formatting\",\"order\":3,\"pattern_count\":7,\"patterns\":[{\"pattern_id\":\"html_headings_h1h6\",\"title\":\"Headings (h1–h6)\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"html_paragraphs\",\"title\":\"Paragraphs\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"html_line_breaks_and_horizontal_rules\",\"title\":\"Line breaks and horizontal rules\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"html_bold_and_italic_text\",\"title\":\"Bold and italic text\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"html_strong_vs_b_tag\",\"title\":\"Strong vs b tag\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"html_em_vs_i_tag\",\"title\":\"Em vs i tag\",\"order\":6,\"has_content\":true},{\"pattern_id\":\"html_preformatted_text\",\"title\":\"Preformatted text\",\"order\":7,\"has_content\":true}]},{\"topic_id\":\"html_p1_t4\",\"title\":\"Links \u0026 Navigation\",\"order\":4,\"pattern_count\":6,\"patterns\":[{\"pattern_id\":\"html_anchor_tag_basics\",\"title\":\"Anchor tag basics\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"html_absolute_vs_relative_urls\",\"title\":\"Absolute vs relative URLs\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"html_opening_links_in_new_tab\",\"title\":\"Opening links in new tab\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"html_linking_to_sections_using_ids\",\"title\":\"Linking to sections using IDs\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"html_email_and_phone_links\",\"title\":\"Email and phone links\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"html_navigation_structure_basics\",\"title\":\"Navigation structure basics\",\"order\":6,\"has_content\":true}]},{\"topic_id\":\"html_p1_t5\",\"title\":\"Images \u0026 Media\",\"order\":5,\"pattern_count\":6,\"patterns\":[{\"pattern_id\":\"html_image_tag_usage\",\"title\":\"Image tag usage\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"html_image_source_and_alt_attribute\",\"title\":\"Image source and alt attribute\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"html_image_sizing_basics\",\"title\":\"Image sizing basics\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"html_audio_tag_basics\",\"title\":\"Audio tag basics\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"html_video_tag_basics\",\"title\":\"Video tag basics\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"html_media_formats_overview\",\"title\":\"Media formats overview\",\"order\":6,\"has_content\":true}]},{\"topic_id\":\"html_p1_t6\",\"title\":\"Lists\",\"order\":6,\"pattern_count\":5,\"patterns\":[{\"pattern_id\":\"html_ordered_lists\",\"title\":\"Ordered lists\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"html_unordered_lists\",\"title\":\"Unordered lists\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"html_nested_lists\",\"title\":\"Nested lists\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"html_description_lists\",\"title\":\"Description lists\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"html_list_use_cases_in_layout\",\"title\":\"List use cases in layout\",\"order\":5,\"has_content\":true}]},{\"topic_id\":\"html_p1_t7\",\"title\":\"Tables\",\"order\":7,\"pattern_count\":5,\"patterns\":[{\"pattern_id\":\"html_table_structure\",\"title\":\"Table structure\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"html_table_rows_and_columns\",\"title\":\"Table rows and columns\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"html_table_headers\",\"title\":\"Table headers\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"html_cell_merging\",\"title\":\"Cell merging\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"html_table_accessibility_basics\",\"title\":\"Table accessibility basics\",\"order\":5,\"has_content\":true}]}]},\"modeCode\":\"TMC\",\"productId\":\"codefly\"}]]\n"])</script></body></html>