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()次の場合はtrueをthing5()返しますthing3right != thing3left

％テーブル
  ％広告
    ％tr
      ％th Thing 1
      ％th Thing 2
      --thing3（）の場合
        ％th Thing 3
      - そうしないと
        ％th {：colspan => "2"} Thing 3s
      ％th Thing 4
      --thing5（）の場合
        ％th Thing 5
      - そうしないと
        ％th {：colspan => "2"} Thing 5s
      ％th Thing 6
      ％th Thing 7
    --！thing3（）または！thing5（）の場合
      ％tr.subcategory
        --if！thing3（）&&！thing5（）
          ％th {：colspan => "2"}
          ％番目の右
          左％
          ％th
          ％番目の右
          左％
          ％th {：colspan => "2"}
        --elsif things3（）&&！thing5（）
          ％th {：colspan => "4"}
          ％番目の右
          左％
          ％th {：colspan => "2"}
        --elsif！thing3（）&& things5（）
          ％th {：colspan => "2"}
          ％番目の右
          左％
          ％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

これは機能しますが、使用と更新が非常に困難です。サブカテゴリを持つすべての列で、指数関数的に複雑になります。

このデータをアクセス可能な方法で表示し、拡張可能で更新しやすい方法でテンプレート化することもできますか？

4

1 に答える 1

6

私が正しく理解していれば、テーブルヘッダーで使用colspanしたいと思うでしょう。rowspanこれにより、それらにアクセスできるようになり、動的に生成する際の手間がかかるはずです。テンプレートを作成する限り、どのデータが返されるかがわかっているので、より一般的なデータをいくつかストーリーボード化できるかどうかを確認し、そこからテンプレートを作成します。私はあなたのcodepenを例で修正しました、それはずっと一番下にあります。

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

于 2013-03-11T04:45:23.907 に答える