211215 TIL-table,ie 7クロスブラウズ

9181 ワード

IEクロスブラウズの情報については、ここをクリックしてください.
Tableラベルのscope属性
  • scopeは、スクリーンリーダーによるテーブルの読み取り方向を決定する.
  • 読み取り方向を決定するため、thにのみ属性を作成できます(thが列と行の読み取り方法を決定するため)
  • scope="col":column、すなわち縦
  • scope="row":row、すなわち横方向

    [ソース]https://medium.com/design-with-figma/the-ultimate-guide-to-designing-data-tables-7db29713a85a
    この画像を例にとると、名称→名称リスト→位置→位置リストなどの順に並べても構わないが、実際には、このテーブルを論理的に読み取るには、名称を読み取ってLogan Henderson→Chicago、IL→[email protected]→938-283-9277読んだのは一人に関するすべての情報なので、もっと論理的な構造だと思います.
  • では、この表をどのように表記すればいいのでしょうか.
      <table>
        <thead>
          <th scope="col">Name</th>
          <th>Location</th>
          <th>Email</th>
          <th>Phone number</th>
        </thead>
        <tbody>
          <tr>
            <th scope="row">Logan Henderson</th>
            <td>Chicago, IL</td>
            <td>[email protected]</td>
            <td>938-283-9277</td>
          </tr>
          <tr>
            <th scope="row">Susie Carlson</th>
            <td>New York, NY</td>
            <td>[email protected]</td>
            <td>394-938-9223</td>
          </tr>
          ...
        </tbody>
      </table>
  • location、email、phonenumberのスクリーンリーダーは閲覧しませんので、タイトルのデータが何を意味するかを教えてください.
  • ラベルのcolgroup
  • HTML要素は、テーブル内の列のグループを定義します.
    trクラスを与えるよりも、
  • を理解しやすいようです.
        <colgroup>
            <col>
            <col span="2" class="batman">
            <col span="2" class="flash">
        </colgroup>
    https://developer.mozilla.org/ko/docs/Web/HTML/Element/colgroup