多级标题和屏幕阅读器响应

问题描述

我有一个带有多个级别标题的表。我需要了解标题属性是如何编写的？我们如何将参数传递给headers属性？写下我的代码作为示例，以便您可以更好地理解它。请建议它是否可以正常使用屏幕阅读器读取。

  <table class="records">
    <caption>NAME : Polar</caption>
    <tr>
        <th id="school" rowspan="2" colspan="2" scope="col">School</th>
        <th id="class" rowspan="2" colspan="2" scope="col">Class</th>
        <th id="marks" colspan="4" scope="col">Marks</th>
    </tr>
    <tr>
        <th id="maths" headers="marks" scope="col">Maths</th>
        <th id="science" headers="marks" scope="col">Science</th>
        <th id="history" headers="marks" scope="col">History</th>
        <th id="english" headers="marks" scope="col">English</th>
    </tr>
    <tr>
        <td headers="school" colspan="2">International School</td>
        <td headers="class" colspan="2">10</td>
        <td headers="marks maths">80</td>
        <td headers="marks science">90</td>
        <td headers="marks history">70</td>
        <td headers="marks english">70</td>
    </tr>
    <tr>
        <th id="dates" colspan="8" scope="col">DATES</th>
    </tr>
    <tr>
        <th id="january" headers="dates" scope="col">Date in january</th>
        <th id="february" headers="dates" scope="col">Date in february</th>
        <th id="march" headers="dates" scope="col">Date in march</th>
        <th id="april" headers="dates" scope="col">Date in april</th>
        <th id="may" headers="dates" scope="col">Date in may</th>
        <th id="june" headers="dates" scope="col">Date in june</th>
        <th id="july" headers="dates" scope="col">Date in july</th>
        <th id="august" headers="dates" scope="col">Date in august</th>
    </tr>
    <tr>
        <td headers="dates january">Jan 10,2020</td>
        <td headers="dates february">Feb 07,2020</td>
        <td headers="dates march">Mar 16,2020</td>
        <td headers="dates april"></td>
        <td headers="dates may">May 15,2020</td>
        <td headers="dates june"></td>
        <td headers="dates july"></td>
        <td headers="dates august">Aug 10,2020</td>                         
    </tr>
</table>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）