著者は、 Diversity in Tech Fund を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。

序章

テーブルには、Web上で長く複雑な歴史があります。 CSSが存在する前は、<table>要素は、Web上でリッチなデザインレイアウトを作成するための唯一の可能な手段でした。 しかし、<table>を使用してレイアウトを作成することは、意図された、または理想的な使用法ではありませんでした。 より優れたレイアウトオプションが利用できるようになったため、開発者は<table>要素を使用して、スプレッドシートのように、意図したとおりに表形式のデータを表示できます。 これにより、セマンティックHTML を使用したり、意図した意味に合わせてHTML要素を使用したりできます。

適切にフォーマットされたHTMLは、ブラウザーに情報を提供し、ブラウザーがユーザーに最適なインターフェースを提供できるようにします。 このチュートリアルでは、テーブルのスタイル設定の視覚的な側面に焦点を当てますが、効果的なテーブルHTMLにより、視力のあるユーザー、視力のないユーザー、およびその他の状況のユーザーを含むすべてのユーザーが、表の情報をナビゲートして理解できるようになります。 <table>要素を意図したとおりに使用すると、CSSデザインのアクセシビリティを大幅に向上させることができます。

このチュートリアルでは、<table>要素のスタイル設定の例を実行します。 このチュートリアルの前半では、テーブル要素にブラウザのデフォルトスタイルを主に使用する一般的なテーブルレイアウトに焦点を当てます。 ブラウザのデフォルトはCSSを操作するための開始点であるため、それらが何であるかを知ることが重要です。 後半では、セクションごとに固有のスタイルを使用するようにテーブルをリファクタリングします。 チュートリアルの終わりまでに、次の画像に示すように、x軸とy軸のテーブル見出し、交互の行の色、テーブルの明確なキャプション、および強調表示されたデータポイントの異なるスタイルを持つテーブルを作成します。 ：

Table of financial information with custom style that renders a sans-serif font, a black header row, blue row headers, and different shading values for each row.

前提条件

<table>HTMLの設定

<table>のスタイルを設定する前に、操作するものが必要です。 <table>要素内に存在する可能性のある要素はたくさんあります。 <table>要素は、テーブル関連の子孫要素が含まれている場合にのみ機能するため、HTMLセマンティクスの最良の例の1つです。 このステップでは、<table>要素を作成し、サンプルデータを入力します。

まず、テキストエディタでindex.htmlを開き、次のコードブロックにHTMLを追加します。

index.html
<!doctype>
<html>
  <head>
    <title>2019 Fourth Quarter Report</title>
    <link href="styles.css" rel="stylesheet" media="all" />
  </head>
  <body>
    <table>
    </table>
  </body>
</html>

この時点から追加するすべてのHTMLは、<table>要素内に入ります。 <table>要素自体は、表形式のコンテンツ領域のみを定義し、正しく機能するには、その中に特定の要素が含まれている必要があります。 <link>要素は、後で追加するstyles.cssファイルを参照し、CSSをページにロードしてスタイルを生成します。 media属性は、コンテンツの対象となるデバイスを指定します。 この場合、これはすべてのデバイスタイプに適用されるため、allに設定しました。

まず、<table>要素内に<caption>要素を追加し、その中に2019第4四半期レポートのテキストを追加します。 テキストエディタのindex.htmlファイルで、次のコードブロックから強調表示されたHTMLを追加します。

index.html
...
<table>
  <caption>2019 Fourth Quarter Report</caption>
</table>
...

<caption>には、テーブルの名前または説明が含まれています。 この要素は、スクリーンリーダーなどの支援技術を使用するユーザーに役立つ情報を提供するため、必ずテーブルに含めてください。 <caption>要素を<table>の<title>と考えると役立つ場合があります。

次に、次のコードブロックで強調表示されているHTMLに示すように、<thead>に続いて<tbody>要素を兄弟として<caption>要素に追加します。

index.html
...
<table>
  <caption>2019 Fourth Quarter Report</caption>
  <thead></thead>
  <tbody></tbody>
</table>

<thead>要素は、<header>と同等の<table>であり、見出し情報のコンテキストを定義します。 <thead>と同様に、<tbody>要素は、表形式のコンテンツが存在する領域を定義します。 どちらの場合も、エリアを定義しますが、それ自体ではコンテンツを表示しません。 この例では使用されていませんが、<tfoot>要素は、合計などの要約情報を提供するために存在します。

HTMLのテーブルは、列ではなく行で作成されます。 テーブルの各セルは、<tr>要素内に含まれています。 これらの要素は通常、<thead>、<tbody>、および<tfoot>の子孫ですが、area要素が使用されていない場合は、<table>の直接の子孫になることもできます。

次のコードブロックで強調表示されているように、テキストエディタのindex.htmlに戻り、本文に1行の見出し行と3行のコンテンツを追加します。

index.html
...
<table>
  <caption>2019 Fourth Quarter Report</caption>
  <thead>
    <tr></tr>
  </thead>
  <tbody>
    <tr></tr>
    <tr></tr>
    <tr></tr>
  </tbody>
</table>
...

最後の2つの要素は機能的に類似しており、どちらも<table> HTML構造の最後の要素です。つまり、前の要素とは異なり、これらにはテーブル以外の要素を含めることができます。

<td>要素には、個々のテーブルデータポイントが含まれます。 <th>は、コンテンツを行または列の見出しとして定義します。 テーブル要素は、マークアップ構造が視覚的構造と直接相関するため、HTMLに固有のものです。 テーブルをスプレッドシートと見なす場合、<th>および<td>要素はセルとして動作します。 このテーブルに4つの列を含めるには、各<tr>に4つ以上の<td>または<th>要素が必要です。 データの内容によっては、これは空白の<th>または<td>要素があることを意味する場合があります。 HTMLコメントを使用して、要素が意図的に空白になっている場合を説明すると役立つ場合があります。

次のコードブロックから強調表示されたHTMLをindex.htmlファイルに追加します。

index.html
...
<table>
  <caption>2019 Fourth Quarter Report</caption>
  <thead>
    <tr>
      <th><!-- Intentionally Blank --></th>
      <th>October</th>
      <th>November</th>
      <th>December</th>
    <tr>
  </thead>
  <tbody>
    <tr>
      <th>Projected</th>
      <td>$820,180</td>
      <td>$841,640</td>
      <td>$732,270</td>
    </tr>
    <tr>
      <th>Actual</th>
      <td>$850,730</td>
      <td>$892,580</td>
      <td>$801,240</td>
    </tr>
    <tr>
      <th>Utilization</th>
      <td>83%</td>
      <td>90%</td>
      <td>75%</td>
    </tr>
  </tbody>
</table>
...

注：スプレッドシートソフトウェアと同様に、1つのセルが2つの列を占める場合など、セルを結合する必要がある場合があります。 これは可能ですが、CSSではなくセルでHTML属性を使用する場合にのみ可能です。 より複雑なテーブルを扱う場合は、このことに留意することが重要です。

テーブルを書き留めたので、ファイルを保存します。 次に、Webブラウザでindex.htmlを開きます。 次の画像は、FirefoxWebブラウザにロードされたときにこのテーブルのブラウザのデフォルトスタイルがどのように表示されるかを示しています。

Information arranged into a table, but with no dividing lines and with default serif font.

このセクションでは、表形式データのHTMLを設定します。 アクセス可能なデータセットを作成するために、テーブルが一連の要素を異なる順序で組み合わせて作成される方法について学習しました。 次に、borderプロパティとborder-collapseプロパティを使用して、テーブルへのスタイルの適用を開始します。

borderおよびborder-collapseを使用して初期テーブルスタイルを作成する

テーブルのスタイルを設定するための最初のステップは、ブラウザのデフォルトのスタイルと動作のいくつかを理解することです。 このセクションでは、borderプロパティとborder-collapseプロパティについて説明し、セル間に境界線を作成する方法を示します。

テーブルのスタイル設定を開始するには、テキストエディタでindex.htmlと同じフォルダにstyles.cssという名前のファイルを作成して開きます。 th要素セレクターとtd要素セレクターで構成されるセレクターグループを追加します。 次に、セレクターブロックで、次のコードブロックに示すように、値が1px solid blackのborderプロパティを追加します。

styles.css
th, td {
  border: 1px solid black;
}

変更内容をstyles.cssに保存し、Webブラウザでindex.htmlを開きます。 凝集グリッドの代わりに、独自の境界線を持ついくつかのボックスがあります。 次の画像は、テーブルがWebブラウザでどのように表示されるかを示しています。

Default borders separated table with borders style of 1px black solid.

このデフォルトを変更するには、テキストエディタでstyles.cssに戻り、ファイルの先頭にtable要素セレクタを追加します。 次に、セレクターブロックで、border-collapseプロパティを適用します。 このプロパティのデフォルトはseparateですが、ここではcollapseの値に変更します。 これにより、テーブルセル間の間隔が削除され、境界線がオーバーラップします。 次のコードブロックで強調表示されているCSSは、styles.cssファイルに何を追加するかを示しています。

styles.css
table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid black;
}

Webブラウザーを開き、index.htmlを更新します。 これで、テーブルに複数の交差する黒い線で定義されたグリッドが作成されます。 次の画像は、ブラウザで境界線がどのように表示されるかを示しています。

Table with no space between cells and a border style of 1px black solid.

このセクションでは、borderプロパティを使用して、thおよびtd要素セレクターを使用して各テーブルセルに境界線を適用しました。 また、デフォルトではテーブルセルがスペースで区切られていることも学びました。 table要素セレクターにborder-collapseプロパティを適用し、collapseプロパティを使用して、テーブルセル間のスペースを削除しました。 次のセクションでは、paddingおよびwidthプロパティを使用して、テーブルのサイズを定義します。

テーブルのサイズの設定

次に、データを読みやすくするために、テーブルセルに間隔を追加します。 テーブルセルへの空白の追加とテーブルのバランスの改善に対処するために、このセクションではwidthおよびpaddingプロパティに焦点を当てます。

現在のところ、各セルのコンテンツは、コンテンツの真上に境界線が表示されてまとめられています。 また、テーブルの幅がその内容と同じであることに気付いたかもしれません。 <table>には、display: tableという独自の表示プロパティがあります。 テーブルを親コンテナの全幅に移動させるために、width: 100%をtableセレクターに追加できます。

これは比較的小さなテーブルであるため、widthプロパティを<table>要素に追加する必要はありません。 代わりに、テキストエディタでstyles.cssを開き、thead thで構成されるコンビネータセレクタを追加します。これにより、<thead>要素内の<th>要素にスタイルのスコープが設定されます。 次に、次のコードブロックの強調表示された部分に示されているように、値が25%のwidthプロパティを追加します。

styles.css
...
th, td {
  border: 1px solid black;
}

thead th {
  width: 25%;
}

このテーブルには4つの列があるため、width: 25%を適用することで、各列に同じ幅を与えることができます。 各列の最初のセルのみを設定する必要があるため、thead thセレクターを設定します。 1つのセルの幅によって、その列のすべてのセルの幅が決まります。

変更内容をstyles.cssに保存したら、ブラウザに戻ってindex.htmlを更新してください。 次の画像に示すように、テーブルには同じ幅の4つの列があります。

Set equal column widths

注：列ごとに幅を変えたい場合は、列の各thに特定のクラスを適用してください。 次に、それらのクラスを使用して、希望の幅を設定します。

列の幅が同じになったので、paddingプロパティを使用して、各セルのコンテンツで内部のスペースをさらに使用できます。 widthプロパティとは異なり、セル内にスペースを適用するには、すべてのthおよびtdセル要素をターゲットにする必要があります。

テキストエディタでstyles.cssを開き、paddingプロパティをth, tdのグループセレクタに追加してから、8pxの値を指定します。 次のコードブロックで強調表示されている行は、必要な変更を示しています。

styles.css
...
th, td {
	border: 1px solid black;
	padding: 8px;
}

thead th {
  width: 25%;
}

変更内容をstyles.cssに保存し、ブラウザでindex.htmlを更新してください。 8pxパディングが各セルの両側に追加され、表形式のデータを読みやすくするためのスペースが提供されます。 次の画像は、これがブラウザにどのように表示されるかを示しています。

Adding space within cells.

注：テーブルセルのボックスモデルは通常のモデルからの外れ値であり、marginプロパティを認識しません。

このセクションでは、各列のwidthプロパティを等しく設定し、paddingプロパティを使用して各セルに間隔を追加して、データを読みやすくしました。 次のセクションでは、クラスを使用して特定のテーブルセルをターゲットにしてスタイルを設定します。

特定のテーブルセルをターゲットにする

このステップの目標は、テーブル内のセルの1つを視覚的に強調表示することです。 HTMLでクラス名を適用してから、クラスセレクターとbackground-colorプロパティを使用してハイライト効果を作成します。

まず、テキストエディタでindex.htmlを開き、[X11X] 90％