====== 9.1.1. Ensure the correct reading order of formatting tables ======

When a person uses a screen reader to access a table used for formatting, the content is read line by line. This means that the table content is read cell after cell, from left to right, and row after row. 

Therefore, you need to make sure that the reading order is logical for each formatting table.

For example, if the following source code is used, the reading order is: 
  - First name.
  - Surname.
  - Age.
  - “First name” field.
  - “Surname” field.
  - “Age” field.

<code html>
<table>
    <tr>
        <td>
            <label for="first-name">First name</label>
        </td>
        <td>
            <label for="surname">Surname</label>
        </td>
        <td>
            <label for="age">Age</label>
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" name="first-name" id="first-name" />
        </td>
        <td>
            <input type="text" name="surname" id="surname" />
        </td>
        <td>
            <input type="text" name="age" id="age" />
        </td>
    </tr>
</table>
</code>

{{:notices:html-css:ordre-tableau-01-en.jpg?direct|}}

To obtain a logical reading order while still using a formatting table, it is preferable to use the following code: 

<code html>
<table>
    <tr>
        <td>
            <label for="first-name">First name</label>
            <input type="text" name="first-name" id="first-name" />
        </td>
        <td>
            <label for="name">Surname</label>
            <input type="text" name="name" id="name" />
        </td>
        <td>
            <label for="age">Age</label>
            <input type="text" name="age" id="age" />
        </td>
    </tr>
</table>
</code>

{{:notices:html-css:ordre-tableau-02-en.jpg?direct|}}

<note attention>**Warning**

In order to facilitate reading by assistive devices and to ensure a consistent reading order, you are strongly advised to limit the nesting of formatting tables.
</note>


===== Related recommendations =====

<note bulle>
  * Previous recommendation: [[notices:html-css:baliser-les-blocs-de-citations-avec-blockquote]]
  * Next recommendation: [[notices:html-css:ne-pas-utiliser-de-balises-ou-d-attributs-propres-aux-tableaux-de-donnees-dans-les-tableaux-de-presentation]]
</note>