HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

【HTML】scope属性でヘッダーセルが列・行のヘッダーであることを指定する方法

HTMLのテーブルでは、scope属性を使うことで、ヘッダーセル（<th>要素）が「列」「行」、あるいは「列や行のグループ」のいずれに対するヘッダーなのかを明示的に指定できます。

scope属性とは？

scope属性は、テーブルの見出しセルがどの範囲のデータに関連しているのかをブラウザやスクリーンリーダーに伝えるための属性です。特に支援技術を利用するユーザーにとって、テーブルの構造を正しく理解してもらうために重要な役割を果たします。アクセシビリティの観点からも、ヘッダーセルには積極的に設定しましょう。

scope属性に指定できる値

  • col：そのセルが列のヘッダーであることを示します
  • row：そのセルが行のヘッダーであることを示します
  • colgroup：そのセルが列のグループのヘッダーであることを示します
  • rowgroup：そのセルが行のグループのヘッダーであることを示します

コード例

以下は、scope="col"を指定して、見出しセルが列のヘッダーであることを宣言した例です。

<!DOCTYPE html>
<html>
   <head>
      <style>
         table, th, td {
            border: 1px solid black;
         }
      </style>
   </head>

   <body>
      <h2>クリケット選手一覧</h2>

      <table style="width:100%">
         <caption>インドのクリケット選手</caption>
         <tr>
            <th></th>
            <th scope="col">名前</th>
         </tr>
         <tr>
            <td>1</td>
            <td>Sachin Tendulkar</td>
         </tr>
         <tr>
            <td>2</td>
            <td>Virat Kohli</td>
         </tr>
      </table>
   </body>

</html>

コードのポイント

  • <caption>要素でテーブル全体のタイトル（キャプション）を設定しています。
  • 1行目の見出しセル「名前」にscope="col"を指定することで、その下にある各セル（Sachin Tendulkar、Virat Kohliなど）が同じ列のデータであることが明確になります。
  • 先頭の空の<th>要素は、行番号の列との対応を保つために配置しています。

このようにscope属性を適切に使うことで、テーブルの意味的な構造が明確になり、検索エンジンや支援技術にとっても理解しやすい、アクセシブルなマークアップを実現できます。

  1. HTMLのcaptionタグとは？表にキャプション（表題）を付ける方法を解説

    HTMLのcaptionタグとは HTMLの<caption>タグは、表（テーブル）にキャプション（表題）を付けるための要素です。キャプションを設定することで、その表が何を示しているのかを読み手にひと目で伝えることができます。 captionタグを利用する際の主なルールは以下のとおりです。 1つの表に指定できるcaptionは1つだけ <table>タグの直後（最初の子要素として）に記述する デフォルトでは表の上部中央にセンタリングされて表示される それでは、HTMLでcaptionタグを実装する具体例を見ていきましょう。 コード例 <!DOCTYPE ht

  2. 【Excel】行と列を固定（ウィンドウ枠の固定）する方法をわかりやすく解説

    Microsoft Excelは、大量のデータを整理・分析できる表計算ソフトウェアです。小規模な事業から大規模な企業まで幅広く活用されており、財務分析などの業務にも欠かせないツールとなっています。ビジネス分析、人材管理、プロジェクト管理、戦略分析、運営管理、パフォーマンスレポート作成など、さまざまな用途に対応できる多機能性が魅力です。しかし、Excelが最もよく使われる場面は、やはりデータの保存と並べ替えによる効率的な分析です。 Microsoft Excel 2016および2019には、行や列を固定（フリーズ）する機能が搭載されています。この機能を使うと、シートを上下にスクロールしても、固定