6

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

哪个更便于访问？

选项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()返回 truething3right != thing3left

％桌子
  %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

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

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

4

1 回答 1

6

If I understand correctly, you are going to want to use colspan and rowspan on the table headers; this will make them accessible and should take some of the pains you having generating them dynamically. As far as templating goes, you have an idea of what data is going to be coming back, so see if you can storyboard a few of the more common ones, then construct your template(s) from that. I modified your codepen with an example, it's all the way at the bottom.

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

于 2013-03-11T04:45:23.907 回答