表格中的子标题：可访问性和模板

Question

这很难解释，所以这里有一个pen，所有的例子都可以看到。

哪个更便于访问？

选项 1

<table>
  <thead>
    <tr>
      <th>Thing 1</th>
      <th>Thing 2</th>
      <th colspan=2>Thing 3</th>
      <th>Thing 4</th>
      <th colspan=2>Thing 5</th>
      <th>Thing 6</th>
      <th>Thing 7</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan=2>40</td>
      <td rowspan=2>30</td>
      <th>Right</th>
      <th>Left</th>
      <td rowspan=2>50</td>
      <th>Right</th>
      <th>Left</th>
      <td rowspan=2>25</td>
      <td rowspan=2>30</td>
    </tr>
    <tr>
      <td>10</td>
      <td>20</td>
      <td>15</td>
      <td>40</td>
    </tr>
  </tbody>
</table>

选项 2

<table>
  <thead>
    <tr>
      <th>Thing 1</th>
      <th>Thing 2</th>
      <th colspan=2>Thing 3</th>
      <th>Thing 4</th>
      <th colspan=2>Thing 5</th>
      <th>Thing 6</th>
      <th>Thing 7</th>
    </tr>
    <tr>
      <th colspan=2></th>
      <th>Right</th>
      <th>Left</th>
      <th></th>
      <th>Right</th>
      <th>Left</th>
      <th colspan=2></th>   
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>40</td>
      <td>30</td>
      <td>10</td>
      <td>20</td>
      <td>50</td>
      <td>15</td>
      <td>40</td>
      <td>25</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

如果子值（右和左）相等，则应显示如下：

<table>
  <thead>
    <tr>
      <th>Thing 1</th>
      <th>Thing 2</th>
      <th>Thing 3s</th>
      <th>Thing 4</th>
      <th>Thing 5s</th>
      <th>Thing 6</th>
      <th>Thing 7</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>40</td>
      <td>30</td>
      <td>10</td>
      <td>50</td>
      <td>15</td>
      <td>25</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

或这个：

<table>
  <thead>
    <tr>
      <th>Thing 1</th>
      <th>Thing 2</th>
      <th colspan=2>Thing 3</th>
      <th>Thing 4</th>
      <th>Thing 5s</th>
      <th>Thing 6</th>
      <th>Thing 7</th>
    </tr>
    <tr>
      <th colspan=2></th>
      <th>Right</th>
      <th>Left</th>
      <th colspan=5></th>  
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>40</td>
      <td>30</td>
      <td>10</td>
      <td>20</td>
      <td>50</td>
      <td>15</td>
      <td>25</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

或这个：

<table>
  <thead>
    <tr>
      <th>Thing 1</th>
      <th>Thing 2</th>
      <th>Thing 3s</th>
      <th>Thing 4</th>
      <th colspan=2>Thing 5</th>
      <th>Thing 6</th>
      <th>Thing 7</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan=2>40</td>
      <td rowspan=2>30</td>
      <td rowspan=2>10</td>
      <td rowspan=2>50</td>
      <th>Right</th>
      <th>Left</th>
      <td rowspan=2>25</td>
      <td rowspan=2>30</td>
    </tr>
    <tr>
      <td>15</td>
      <td>40</td>
    </tr>
  </tbody>
</table>

等等。

如何有效地进行模板化？

由于表格是由标记中的水平行定义的，因此需要在所有trs 中散布更改列的逻辑：

伪代码ERB

thing3() 和 thing5() 如果 thing3right != thing3left 则返回 true

％桌子 %thead %tr 第 % 件事 1 %th 东西 2 - 如果事物 3() %th 东西 3 - 别的 %th{:colspan => "2"} 东西 3s %th 东西 4 - 如果事物 5() %th 东西 5 - 别的 %th{:colspan => "2"} 东西 5s %th 东西 6 %th 东西 7 - 如果 !thing3() 或 !thing5() %tr.subcategory - 如果 !thing3() && !thing5() %th{:colspan => "2"} %th 对 左 %th %th %th 对 左 %th %th{:colspan => "2"} - elsif thing3() && !thing5() %th{:colspan => "4"} %th 对 左 %th %th{:colspan => "2"} - elsif !thing3() && thing5() %th{:colspan => "2"} %th 对 左 %th %th{:colspan => "4"} %t 正文 %tr %td=@whatever.thing1 %td=@whatever.thing2 %td= @whatever.thing3right - 如果 !thing3() %td= @whatever.thing3left %td=@whatever.thing4 %td= @whatever.thing5right - 如果 !thing5() %td= @whatever.thing5left %td= @whatever.thing6 %td=@whatever.thing7

这可行，但很难使用和更新。每列都有子类别，它变得指数级地复杂。

如何以可访问的方式显示这些数据，同时也可以以可扩展且易于更新的方式进行模板化？

Answer 1

如果我理解正确，您将要在表头上使用colspan 和rowspan；这将使它们可以访问，并且应该承担一些动态生成它们的痛苦。就模板而言，您对将要返回的数据有所了解，因此请查看是否可以将一些更常见的数据制作成故事板，然后从中构建您的模板。我用一个例子修改了你的codepen，一直在底部。

http://codepen.io/jalbertbowden/pen/epgxs