CSSを使用してテーブルのスタイルを設定する方法
著者は、 Diversity in Tech Fund を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。
序章
テーブルには、Web上で長く複雑な歴史があります。 CSSが存在する前は、<table>要素は、Web上でリッチなデザインレイアウトを作成するための唯一の可能な手段でした。 しかし、<table>を使用してレイアウトを作成することは、意図された、または理想的な使用法ではありませんでした。 より優れたレイアウトオプションが利用できるようになったため、開発者は<table>要素を使用して、スプレッドシートのように、意図したとおりに表形式のデータを表示できます。 これにより、セマンティックHTML を使用したり、意図した意味に合わせてHTML要素を使用したりできます。
適切にフォーマットされたHTMLは、ブラウザーに情報を提供し、ブラウザーがユーザーに最適なインターフェースを提供できるようにします。 このチュートリアルでは、テーブルのスタイル設定の視覚的な側面に焦点を当てますが、効果的なテーブルHTMLにより、視力のあるユーザー、視力のないユーザー、およびその他の状況のユーザーを含むすべてのユーザーが、表の情報をナビゲートして理解できるようになります。 <table>要素を意図したとおりに使用すると、CSSデザインのアクセシビリティを大幅に向上させることができます。
このチュートリアルでは、<table>要素のスタイル設定の例を実行します。 このチュートリアルの前半では、テーブル要素にブラウザのデフォルトスタイルを主に使用する一般的なテーブルレイアウトに焦点を当てます。 ブラウザのデフォルトはCSSを操作するための開始点であるため、それらが何であるかを知ることが重要です。 後半では、セクションごとに固有のスタイルを使用するようにテーブルをリファクタリングします。 チュートリアルの終わりまでに、次の画像に示すように、x軸とy軸のテーブル見出し、交互の行の色、テーブルの明確なキャプション、および強調表示されたデータポイントの異なるスタイルを持つテーブルを作成します。 ：
前提条件
- カスケードと特異性を使用してCSSスタイルをHTMLに適用する方法を読むことで得られるCSSのカスケードと特異性の機能の理解。
- タイプセレクター、コンビネーターセレクター、セレクターグループに関する知識。これらはCSSでスタイル設定するHTML要素を選択する方法にあります。
- ローカルマシンに
index.htmlとして保存された空のHTMLファイルで、選択したテキストエディタとWebブラウザからアクセスできます。 開始するには、 HTMLプロジェクトの設定方法チュートリアルを確認し、HTML要素の使用方法と理解方法に従ってブラウザでHTMLを表示する方法を確認してください。 HTMLを初めて使用する場合は、HTMLシリーズでWebサイトを構築する方法全体を試してください。
<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ブラウザにロードされたときにこのテーブルのブラウザのデフォルトスタイルがどのように表示されるかを示しています。
このセクションでは、表形式データの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ブラウザでどのように表示されるかを示しています。
このデフォルトを変更するには、テキストエディタで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を更新します。 これで、テーブルに複数の交差する黒い線で定義されたグリッドが作成されます。 次の画像は、ブラウザで境界線がどのように表示されるかを示しています。
このセクションでは、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つの列があります。
注：列ごとに幅を変えたい場合は、列の各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パディングが各セルの両側に追加され、表形式のデータを読みやすくするためのスペースが提供されます。 次の画像は、これがブラウザにどのように表示されるかを示しています。
注：テーブルセルのボックスモデルは通常のモデルからの外れ値であり、marginプロパティを認識しません。
このセクションでは、各列のwidthプロパティを等しく設定し、paddingプロパティを使用して各セルに間隔を追加して、データを読みやすくしました。 次のセクションでは、クラスを使用して特定のテーブルセルをターゲットにしてスタイルを設定します。
特定のテーブルセルをターゲットにする
このステップの目標は、テーブル内のセルの1つを視覚的に強調表示することです。 HTMLでクラス名を適用してから、クラスセレクターとbackground-colorプロパティを使用してハイライト効果を作成します。
まず、テキストエディタでindex.htmlを開き、[X11X] 90％を含む<td>要素にclass属性を追加します。 次のコードブロックの強調表示されたHTMLに示されているように、class属性にcell-highlightの値を指定します。
index.html
<table>
...
<tr>
<th>Utilization</th>
<td>83%</td>
<td class="cell-highlight">90%</td>
<td>75%</td>
</tr>
...
</table>
変更内容をindex.htmlに保存し、テキストエディタでstyles.cssを開きます。 ファイルの最後に.cell-hightlightのクラスセレクターを追加します。 セレクターブロック内に、goldの値を持つbackground-colorプロパティを追加します。 次に、値をboldに設定してfont-weightプロパティを追加します。 次のコードブロックで強調表示されているCSSは、これがどのようにフォーマットされているかを示しています。
styles.css
...
thead th {
width: 25%;
}
.cell-highlight {
background-color: gold;
font-weight: bold;
}
変更内容をstyles.cssに保存してから、Webブラウザーに戻り、index.htmlを更新してください。 次の画像が示すように、 90％のコンテンツを持つテーブルセルの背景は濃い黄色で、フォントの太さは太字になっています。
これで、特定のテーブルセルでクラスセレクターを使用し、background-colorおよびfont-weightプロパティを使用してハイライトスタイルを適用しました。 次に、境界線の配置、フォント、およびテキストの配置を変更して、スタイルをテーブルの最終的な外観に向けて移動します。
テーブルのフォントファミリの設定
テーブルの最終的なスタイルに向かって移動を開始するには、個々のセルではなく、テーブル全体の周りに境界線を移動します。 次に、ページに新しいデフォルトのfont-familyを設定し、個々のセルのデフォルトのテキスト配置を調整します。
境界線を更新するには、テキストエディタでstyles.cssを開きます。 次に、border: 1px solid black;プロパティと値を削除して、既存のグループセレクターth, trを編集します。 これにより、セルの境界線がテーブルから削除されます。 パディングは、テーブルスタイルの第2段階でも同じままです。 次に、tableタイプセレクターで、1px solid blackの値を持つborderプロパティを追加します。 次のコードブロックは、これがコードにどのように表示されるかを示しています。
styles.css
table {
border-collapse: collapse;
border: 1px solid black;
}
th, td {
padding: 8px;
}
...
変更内容をstyles.cssに保存し、ブラウザに戻ってindex.htmlを更新します。 次の画像に示すように、境界線は個々のテーブルセルではなく、テーブル全体を囲みます。
ドキュメント全体のフォントを変更するには、テキストエディタでstyles.cssに戻ります。 tableセレクターブロックの前に、bodyタイプセレクターを追加します。 bodyセレクターブロック内に、sans-serifの値でfont-familyプロパティを追加します。 これにより、ページのフォントがブラウザのデフォルトのsans-serifフォント（HelveticaやArialなど）に設定されます。 次のコードブロックで強調表示されているCSSは、styles.cssへの変更を示しています。
styles.css
body {
font-family: sans-serif;
}
table {
border-collapse: collapse;
border: 1px solid black;
}
...
これらの変更をstyles.cssに保存し、ブラウザでindex.htmlをリロードします。 次の画像に示すように、テーブル全体のフォントは、ブラウザのデフォルトのsans-serifフォントになります。
最後に、テーブルの内容の配置を調整するには、テキストエディタでstyles.cssに戻ります。 ブラウザは通常、コンテンツの配置をデフォルトで左上の位置にします。 スプレッドシートアプリケーションでコンテンツを整列するのと同様に、テーブルでは、行の高さに関係なく、コンテンツをテーブルセルの中央に整列させることができます。
水平方向の中央揃えを設定するには、tableタイプセレクターに移動し、text-alignプロパティにcenterの値を追加します。 次に、垂直方向の中央揃えを設定するには、vertical-alignプロパティにmiddleの値を追加します。 次のコードブロックの強調表示されたセクションは、これをstyles.cssに追加する方法を示しています。
styles.css
body {
font-family: sans-serif;
}
table {
border-collapse: collapse;
border: 1px solid black;
text-align: center;
vertical-align: middle;
}
...
変更内容をstyles.cssに保存し、Webブラウザに戻ってindex.htmlをリロードします。 これで、セルの内容がセル内で水平方向と垂直方向の中央に配置されます。 <th>セルの間隔は変更されていないことに注意してください。 これは、テーブルヘッダーのデフォルトでテキストが中央に配置されているためです。
垂直方向の中央揃えは、コンテンツがそのままではすぐにはわかりませんが、1つのセルのコンテンツが2行目に折り返されている場合、行の残りのセルはコンテンツを垂直方向に揃えます。
次の画像は、これがブラウザにどのように表示されるかを示しています。
このセクションでは、borderプロパティをテーブルセルからテーブル全体に移動しました。 また、ページに新しいフォントファミリを設定し、テーブルセルのコンテンツのデフォルトの配置を変更しました。 次のセクションでは、テーブルの<caption>要素にスタイルを追加し、その目的について詳しく説明します。
テーブルキャプションのスタイリング
<caption>要素は、<caption>が<table>要素内のどこにあるかに関係なく、テーブルの視力のあるリーダーと視力のないリーダーの両方にコンテキストを提供し、テーブルの上に表示されます。 スクリーンリーダーと点字のユーザーの場合、<caption>は、特にページに複数のテーブルがある場合に、テーブルの目的の明確なコンテキストを提供します。
<caption>は、<table>要素の内部でのみ発生する要素であるため、captionタイプセレクターを使用してスタイルを設定できます。 captionのデフォルトは中央揃えのテキストで、継承されたサイズ、ファミリ、および通常の重みがあります。
<caption>要素のスタイルの変更を開始するには、テキストエディタでstyles.cssを開きます。 CSSを論理的なフローの順序に保つために、tableセレクターの後にcaptionセレクターを追加します。 次に、font-weight、font-size、text-align、およびcolorプロパティを使用して、大きく、太字で、左揃えで、濃い灰色のキャプションを作成します。 。 次のコードブロックで強調表示されているCSSは、これがどのようにフォーマットされるかを示しています。
styles.css
table {
border-collapse: collapse;
}
caption {
font-weight: bold;
font-size: 24px;
text-align: left;
color: #333;
}
th, td {
border: 1px solid black;
padding: 8px;
}
...
変更内容をstyles.cssに保存し、ブラウザにindex.htmlをリロードします。 次の画像に示すように、キャプションの内容がはるかに大きく太字になり、テーブルの見出しが作成されます。
次に、captionとtableの視覚部分の間にいくらかのスペースが必要です。 テキストエディタでstyles.cssに戻り、captionに間隔を追加します。
captionは、marginおよびpaddingの間隔プロパティを受け入れることができます。 間隔はcaptionの下にのみ必要なので、margin-bottomプロパティを16pxの値でセレクターブロックに追加します。 次のコードブロックの強調表示された行は、これを適用する方法を示しています。
styles.css
caption {
font-weight: bold;
font-size: 24px;
text-align: left;
color: #333;
margin-bottom: 16px;
}
変更内容をstyles.cssに保存し、Webブラウザでindex.htmlを更新します。 次の画像に示すように、captionのテキストとテーブルの間にスペースが追加されました。
このセクションでは、テーブルの<caption>要素のカスタムスタイルを作成しました。 また、<caption>は、支援技術を使用して表を読む人々に情報コンテキストを提供するための重要な要素であることも学びました。 次のセクションでは、最上位の見出しテーブルの行にスタイルを適用します。
一番上の行のヘッダーセルのスタイリング
次に、一番上の行の見出しにスタイルを適用します。 <thead>要素には一番上の行が含まれるため、この要素のすべてのスタイルをその要素に直接適用できます。 目的は、すべて大文字の白のテキストで濃い灰色の背景を作成することです。
まず、テキストエディタでstyles.cssを開きます。 新しいtheadタイプセレクターを作成します。 セレクターブロックで、値が#333のbackground-colorプロパティを追加します。これにより、濃い灰色が作成されます。 次に、whiteの値を持つcolorプロパティを追加します。
styles.css
...
caption {
font-weight: bold;
font-size: 24px;
text-align: left;
color: #333;
margin-bottom: 16px;
}
thead {
background-color: #333;
color: white;
}
...
styles.cssへの変更を保存し、ブラウザでindex.htmlを更新します。 一番上の見出し行は、黒一色の背景と太字の白のテキストで視覚的に区別できるようになりました。 次の画像は、これがブラウザにどのように表示されるかを示しています。
次に、トップヘッダーの美しさをもう少し追加するには、テキストエディタのstyles.cssに戻ります。 font-sizeプロパティに0.875remの値を追加して、テキストのサイズを変更します。これにより、フォントサイズが少し小さくなります。 次に、すべての文字を大文字にするには、uppercaseを値としてtext-transformプロパティを追加します。 最後に、文字の間にスペースを空けるには、letter-spacingプロパティを使用して、値を2%に設定します。 これにより、大文字の文字の間に十分なスペースが作成されるため、大文字の文字がまとまらないようになり、読みやすくなります。
次のコードブロックで強調表示されているCSSは、これらのスタイルをフォーマットする方法を示しています。
styles.css
thead {
background-color: #333;
color: white;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 2%;
}
変更内容をstyles.cssに保存し、ブラウザに戻ってindex.htmlを更新します。 次の画像に示すように、テキストは大文字になり、セルの内容よりもサイズが少し小さくなりますが、見出しとして階層的に明確になります。
このステップでは、いくつかのプロパティを使用して、一番上の見出し行に識別可能なスタイルを提供しました。 表のこの部分のHTMLは、目の不自由で断定的なテクノロジーユーザーがすでにアクセスできました。 現在、視覚スタイルはより多くのコンテキスト情報を提供します。 次に、行の色を交互に追加して、視覚補助を引き続き使用します。
テーブルへのストライプ行スタイルの追加
次に、交互のストライプカラーを作成するには、疑似クラスセレクターと呼ばれるものを使用する必要があります。 疑似クラスにはさまざまな種類がありますが、この場合は:nth-child()疑似クラスを使用します。 :nth-childの後の括弧は、oddとevenの値を含む交互のスタイルを作成するために、さまざまな数字と単語の値を取ることができます。
まず、テキストエディタでstyles.cssを開きます。 :nth-child()疑似クラスは、兄弟要素に適用することで機能します。 この場合、それは<tbody>内の<tr>要素になります。 最初の値を作成するには、tbody trコンビネーターセレクターを記述し、その直後に:nth-child(odd)疑似クラスを記述します。 このセレクターブロックで、background-colorプロパティを#fffに設定します。これは、白の16進数の省略形です。 次に、同じ形式で別のセレクターを作成しますが、oddの代わりにevenを使用し、そのbackground-colorプロパティをライトグレーの#eee値に設定します。
次のコードブロックで強調表示されているCSSは、これがテキストエディタでどのように表示されるかを示しています。
styles.css
...
.cell-highlight {
background-color: gold;
font-weight: bold;
}
tbody tr:nth-child(odd) {
background-color: #fff;
}
tbody tr:nth-child(even) {
background-color: #eee;
}
変更内容をstyles.cssに保存してから、ブラウザのindex.htmlに戻り、ページを更新してください。 2番目の行の背景は明るい灰色になり、見た目は変わりませんが、奇数の行には、デフォルトの透明ではなく、定義された白い背景が表示されます。 行を追加すると、これらのスタイルは白からライトグレーに変わります。 次の画像は、これがブラウザにどのように表示されるかを示しています。
このセクションでは、:nth-child()疑似クラスを使用して、テーブルの本文セクションに交互の行の色を作成しました。 このチュートリアルの最後のセクションでは、前の2つのセクションで学習した内容を組み合わせて、テーブルの左側にある行見出しのカスタムスタイルを作成します。
左側のヘッダーセルのスタイリング
このテーブルの最後のスタイルは、テーブルの左側にあるy軸ヘッダーに青い背景を追加することです。 これは2つの部分で発生します。最初の部分は、各行のthセルをターゲットにして、一番上の見出し行をスタイリングするセクションに似ています。 次に、前のセクションと同じ:nth-child()疑似クラスアプローチを使用してカラーシフトを作成します。
プライマリブルーの背景を適用するには、テキストエディタでstyles.cssファイルを開きます。 <tbody>の<th>要素をターゲットにして、<thead>の<th>要素がこれらのスタイルを取得しないようにする必要があります。 tbody thのコンビネーターセレクターを作成し、background-colorプロパティと#36cの値を指定します。 colorプロパティを#fffまたはwhiteの値で適用します。 最後に、テキストを左揃えに設定するには、text-alignプロパティをleftの値に設定します。
styles.css
...
tbody tr:nth-child(even) {
background-color: #eee;
}
tbody th {
background-color: #36c;
color: #fff;
text-align: left;
}
変更内容をstyles.cssに保存し、ブラウザでindex.htmlを更新してください。 次の画像に示すように、行見出しは、白いテキストで独特の青い色になりました。
最後に、交互の行の色を行ヘッダーに引き継ぐには、テキストエディタでstyles.cssに戻ります。 データ行と同じ効果を得るには、:nth-child()疑似クラスセレクターが必要です。 tbody thコンビネーターセレクターにはすでに青色の背景が設定されているため、:nth-child(even)のみで濃い青色に調整できます。 ただし、:nth-child()疑似クラスセレクターの動作により、行（[ X166X] ）カウントは、効果がどのように達成されるかです。 これには、background-colorプロパティが#25cに設定されたtbody tr:nth-child(even) thのより複雑なコンビネーターセレクターが必要になります。
次のコードブロックは、このCSSがどのようにフォーマットされているかを示しています。
styles.css
...
tbody th {
background-color: #36c;
color: #fff;
text-align: left;
}
tbody tr:nth-child(even) th {
background-color: #25c;
}
変更内容をstyles.cssに保存し、最後にもう一度ブラウザに戻ってindex.htmlを更新します。 これで、次の画像に示すように、行ヘッダーとデータ全体で行の色が交互に変わるスタイリングが完了しました。
このセクションでは、スタイルを行見出しにスコープし、前のセクションで学習した内容を引き継いで、交互の背景色を正確にターゲットにします。
結論
これで、テーブルの作成に成功し、表形式データに適用するためのいくつかの実用的なCSSプロパティとセレクタータイプを学習しました。 今後は、これらの概念をさらに発展させた、より複雑なテーブルを作成できます。 nth-childセレクターを使用して、箇条書きリストまたはナビゲーションリンクに交互のスタイルを作成することもできます。 HTMLテーブルは、さまざまな種類の表形式データを表示するのに非常に役立ちます。HTMLおよびCSSの機能により、さまざまな種類のテーブルが可能になります。
CSSチュートリアルをもっと読みたい場合は、CSSシリーズでHTMLのスタイルを設定する方法の他のチュートリアルを試してください。
