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

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>

等等。

如何有效地模仿这个？

由于表是由标记中的水平行定义的，因此需要在所有tr s中填充更改列的逻辑：

Psuedo-code ERB

如果thing3()

，

thing5()和thing3right != thing3left会返回true

%table
  %thead
    %tr
      %th Thing 1
      %th Thing 2
      - if thing3()
        %th Thing 3
      - else
        %th{:colspan => "2"} Thing 3s
      %th Thing 4
      - if thing5()
        %th Thing 5
      - else
        %th{:colspan => "2"} Thing 5s
      %th Thing 6
      %th Thing 7
    - if !thing3() or !thing5()
      %tr.subcategory
        - if !thing3() && !thing5()
          %th{:colspan => "2"}
          %th Right
          %th Left
          %th
          %th Right
          %th Left
          %th{:colspan => "2"}
        - elsif thing3() && !thing5()
          %th{:colspan => "4"}
          %th Right
          %th Left
          %th{:colspan => "2"}
        - elsif !thing3() && thing5()
          %th{:colspan => "2"}
          %th Right
          %th Left
          %th{:colspan => "4"}
  %tbody
    %tr
      %td= @whatever.thing1
      %td= @whatever.thing2
      %td= @whatever.thing3right
      - if !thing3()
        %td= @whatever.thing3left
      %td= @whatever.thing4
      %td= @whatever.thing5right
      - if !thing5()
        %td= @whatever.thing5left
      %td= @whatever.thing6
      %td= @whatever.thing7

这有效，但很难使用和更新。对于每个具有子类别的列，它都会在指数上变得更加复杂。

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

Answer 1

如果我理解正确，您将要在表格标题上使用colspan和rowspan;这将使它们可访问，并应该采取动态生成它们的一些痛苦。就模板而言，你已经了解了将要返回的数据，所以看看你是否可以在一些更常见的数据板上进行故事板，然后从中构建模板。我用一个例子修改了你的codepen，它一直在底部。

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