rspec/rules/S5260/why.adoc

== Why is this an issue?

If a ``++<td>++`` cell has a ``++headers++`` attribute, it should reference only IDs of headers in the same column and row.


Note that it is usually better to use ``++scope++`` attributes of ``++<th>++`` headers instead of ``++headers++`` attribute. ``++headers++`` attribute requires you to list every corresponding ``++<th>++`` header's ``++id++``, which is error-prone and makes the code less maintainable. See https://www.w3.org/WAI/tutorials/tables/tips/[W3C WAI Web Accessibility Tutorials] for more information.


If your table is too complex, it might be better to split it into multiple small tables as it improves both readability and maintainability.


This rule raises an issue when the ``++headers++`` attribute of a ``++<td>++`` cell contains IDs which don't belong to a header in the same row or column.


=== Noncompliant code example

[source,html]
----
<table border="1">
<caption>
    Rental price
</caption>
<thead>
    <tr>
        <td></td>
        <th id="small" scope="col">
            Small car
        </th>
        <th id="big" scope="col">
            Big Car
        </th>
    </tr>
</thead>
<tbody>
    <tr>
        <th id="paris" class="span" colspan="3" scope="colgroup">
            Paris
        </th>
        </tr>
        <tr>
        <th headers="paris" id="day1">
            1 day
        </th>
        <td headers="paris day1 big"> <!-- Noncompliant, referencing the column "big" instead of "small" -->
            11 euros
        </td>
        <td headers="berlin day1 big"> <!-- Noncompliant, there is no header with id "berlin" -->
            50 euros
        </td>
        </tr>
    </tr>
</tbody>
</table>
----