HTML Tables A11y: column index in conjuction with column spanning

Question

I'm trying to implement an accessible grid table and I'm having a problem understanding the indexing columns that span multiple columns.

Lemme give you an example. Consider the following table:

th, td {
  border: 1px solid black;
  padding: 0.5ch;
}

<table role="grid">
  <thead>
    <tr>
      <td colspan="2" rowspan="2" />
      <th scope="colgroup" colspan="3">Clothes</th>
      <th scope="colgroup" colspan="2">Accessories</th>
    </tr>
    <tr>
      <th scope="col">Trousers</th>
      <th scope="col">Skirts</th>
      <th scope="col">Dresses</th>
      <th scope="col">Bracelets</th>
      <th scope="col">Rings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
     <th scope="rowgroup" rowspan="3">Belgium</th>
     <th scope="row">Antwerp</th>
     <td>d1</td>
     <td>d2</td>
     <td>d3</td>
     <td>d4</td>
     <td>d5</td>
    </tr>
    <tr>
     <th scope="row">Gent</th>
     <td>d1</td>
     <td>d2</td>
     <td>d3</td>
     <td>d4</td>
     <td>d5</td>
    </tr>
    <tr>
     <th scope="row">Brussels</th>
     <td>d1</td>
     <td>d2</td>
     <td>d3</td>
     <td>d4</td>
     <td>d5</td>
    </tr>
  </tbody>
</table>

How would you index the columns using aria-colindex?

This is a direct quote from the docs:

If a cell or gridcell spans multiple columns, set aria-colspan to the number of columns it spans if not using <td> and <th> HTML elements, and set aria-colindex to the value of the start of the span; the value it would have had if it was only one column wide spanning only the first of its columns.

I don't quite get this!

Does it mean:

<td colspan="2" rowspan="2" aria-colindex="1" />
<th scope="colgroup" colspan="3" aria-colindex="3">Clothes</th>
<th scope="colgroup" colspan="2" aria-colindex="6">Accessories</th>

Or:

<td colspan="2" rowspan="2" aria-colindex="1" />
<th scope="colgroup" colspan="3" aria-colindex="2">Clothes</th>
<th scope="colgroup" colspan="2" aria-colindex="3">Accessories</th>

And also how to index the cells in the body?

Is it this?

<tr>
 <th scope="rowgroup" rowspan="3" aria-colindex="1">Belgium</th>
 <th scope="row" aria-colindex="2">Antwerp</th>
 <td aria-colindex="3">d1</td>
 <td aria-colindex="4">d2</td>
 <td aria-colindex="5">d3</td>
 <td aria-colindex="6">d4</td>
 <td aria-colindex="7">d5</td>
</tr>