How to make complex tables with multiple levels of headers accessible for screen readers

[CrystalD2]

Is it possible to designate multiple rows and columns in a table as headers in order to make the table accessible for screen readers? What is the step-by-step process for doing so (see reference image of table with multiple levels of headers)?

[Chris_Hofer]

Hello @CrystalD2 ...

Would this website help to answer your question?

HTML Table Headers (w3schools.com)

Please keep us posted here in the Community...thanks!

[CrystalD2]

Thanks, Chris. This addresses the spanned headers aspect of my question.

I still would like to know if it's possible to designate 2 rows as a header rows. For example, in the image I shared, the row "Type of Hits" would be the first level of header and is a spanned header. I also want the second row, with column labels "Single", "Double", "Triple", "Home Run", & "Total", to be designated as a header row.

In experimenting in Canvas, I designated "Types of Hits" as a header row. Then when I tried to designate the row with "Single", "Double", "Triple", "Home Run", & "Total" as an additional header row, the two rows swapped positions in the table and the row "Types of Hits" lost its designation as a header row.

[Chris_Hofer]

Hello again, @CrystalD2 ...

In my own testing within my sandbox course, it appears that this is possible. I created a table that looks like this:

Here is what the HTML code looks like:

<table style="border-collapse: collapse; width: 50%;" border="1">
    <tbody>
        <tr>
            <th style="width: 33.3091%;" scope="col">Color</th>
            <th style="width: 33.3091%;" scope="col">Shape</th>
            <th style="width: 33.3113%;" scope="col">Size</th>
        </tr>
        <tr>
            <th style="width: 33.3091%;" scope="col">blue</th>
            <th style="width: 33.3091%;" scope="col">square</th>
            <th style="width: 33.3113%;" scope="col">medium</th>
        </tr>
        <tr>
            <td style="width: 33.3091%;">green</td>
            <td style="width: 33.3091%;">circle</td>
            <td style="width: 33.3113%;">large</td>
        </tr>
    </tbody>
</table>

Hopefully this might help you with your own table. Keep us posted here in the Community.