html - 表: Accessibility and Templating中的子标题

这很难解释，因此这里是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:

伪码ERB

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

％ table
％thead
％tr
％th事物1
％th Thing 2
-如果thing3()
％th Thing 3
- 别的
％th {:colspan =>“2”}事物3秒钟
％th事物4
-如果thing5()
％th事物5
- 别的
％th {:colspan =>“2”} 5秒钟
％th事物6
％th事物7
-如果!thing3()或!thing5()
％tr.subcategory
-如果!thing3()&&!thing5()
％th {:colspan =>“2”}
第％个权利
还剩％th
％th
第％个权利
还剩％th
％th {:colspan =>“2”}
-elsif something3()&&!thing5()
％th {:colspan =>“4”}
第％个权利
还剩％th
％th {:colspan =>“2”}
-elsif!thing3()&& something5()
％th {:colspan =>“2”}
第％个权利
还剩％th
％th {:colspan =>“4”}
％tbody
％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

这可行，但是很难使用和更新。对于具有子类别的每个列，它的指数复杂度将成倍增加。

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

最佳答案

如果我理解正确，您将要在表头上使用colspan和rowspan；这将使它们易于访问，并且应该减轻您动态生成它们的痛苦。就模板而言，您已经知道将要返回哪些数据，因此请查看是否可以对一些较常见的故事进行演示，然后从中构造模板。我用一个示例修改了Codepen，它一直在底部。

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

关于html - 表: Accessibility and Templating中的子标题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15328208/