CONTENTS
  1. HOME
  2. CSS
  3. CSS基礎
  4. Tableを装飾しよう（罫線・背景色・nth-child）

Tableを装飾しよう（罫線・背景色・nth-child）

Tableを装飾しよう（罫線・背景色・nth-child）

テーブル（<table>）の見た目をCSSで装飾し、枠線・背景色・行の区切り・整列などの基本的な表デザインを学びます。また、行ごとのスタイル分けに使える :nth-child() セレクターの使い方も体験します。

作成ファイル・保存場所

  • html-basic フォルダの中に以下の2つのファイルを用意してください
    • HTMLファイル：06.htmlHTMLファイルはコピーして使用可
    • CSSファイル：style06.css（今回新たに作成）
htmlは下記からコピー
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>課題06</title>
</head>

<body>
    <h1>1週間の予定表</h1>

    <table>
        <tr>
            <th>日付</th>
            <th>予定</th>
        </tr>
        <tr>
            <td>月曜日</td>
            <td>HTMLの復習（基本構造・タグの確認）</td>
        </tr>
        <tr>
            <td>火曜日</td>
            <td>CSSの基礎（文字や背景のスタイル指定）</td>
        </tr>
        <tr>
            <td>水曜日</td>
            <td>レイアウト練習（余白・位置調整・リスト）</td>
        </tr>
        <tr>
            <td>木曜日</td>
            <td>画像とリンクの活用、figureタグの復習</td>
        </tr>
        <tr>
            <td>金曜日</td>
            <td>ミニ作品づくり（自己紹介ページをアレンジ）</td>
        </tr>
    </table>
</body>

</html>

指示

以下の条件に従って、CSSファイルを作成・適用してください。

  1. 06.html に style06.css を外部CSSとして読み込んでください。
  2. 表全体に枠線と余白を設定してください。
  3. 見出し（<th>）に背景色や中央揃えなどを設定してください。
  4. 偶数行の <tr> に薄い背景色を設定してください（tr:nth-child(even) を使用）
  5. リセット、<body>, <h1> 要素は従来通りの内容で、任意の指定とします。

チェックポイント

  • テーブルの罫線（border）が正しく表示されているか
  • ヘッダー（th）の背景色・整列が適切か
  • 偶数行に背景色が適用されて読みやすくなっているか
  • セレクター（nth-child）が正しく使われているか
  • 表のレイアウト全体が見やすく整っているか

今回使うCSSプロパティのポイント

テーブル構造・装飾

プロパティよく使う値説明
border-collapsecollapseセルの枠線を重ねてスッキリ表示
border1px solid #333セルの線の太さ・色・スタイルを指定
padding0.8emセル内の余白を調整
letter-spacing0.15rem文字間のスペースを広げて見やすくする

擬似クラス

擬似クラス説明例
:nth-child(even)偶数番目の要素にスタイルを適用tr:nth-child(even) td { background-color: #e1e1e1; }
:nth-child(odd)奇数番目の要素にスタイルを適用tr:nth-child(odd) td { background-color: #ffffff; }
:nth-child(3)指定した番号の要素にだけ適用tr:nth-child(3) td { background-color: #ffcccc; }
:first-child最初の子要素だけに適用td:first-child { text-align: center; }

スタイルの指定内容

  1. table に指定するスタイル
    • 幅：80%
    • 枠線結合：border-collapse: collapse
    • 上下余白：margin: 1em auto;（中央揃え）
    • 外枠：2px solid #000000
    • 文字の間隔を広げる：letter-spacing: 0.15rem
  2. th, td に共通で指定するスタイル
    • 枠線：1px solid #3b3b3b
    • 内側余白：0.8em
  3. th に追加指定
    • 背景色：#c7c7c7
    • 中央揃え（text-align: center）
    • フォント太字（font-weight: bold）
  4. 左側（曜日）列に指定
    • td:first-child { text-align: center; } を使用して中央揃えにする
  5. tr:nth-child(even) に指定するスタイル
    • 偶数行の td に背景色：#e1e1e1

解答例（CSS）

この課題を通じて、表の整列と視認性の高いデザインの基本を習得しましょう！
/* --- 必要に応じてリセットCSS（省略可能） --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* --- body や h1 は従来通りの任意指定 --- */
body {
    font-family: sans-serif;
    font-size: 16px;
    line-height: 1.8;
    padding: 20px;
    background-color: #fafafa;
}

h1 {
    text-align: center;
    margin-bottom: 1.5em;
    color: #333;
}

/* --- テーブル全体 --- */
table {
    width: 80%;
    border-collapse: collapse;
    margin: 1em auto;
    border: 2px solid #000000;
    letter-spacing: 0.15rem;
}

/* --- 表の見出しセルとデータセル --- */
th,
td {
    border: 1px solid #3b3b3b;
    padding: 0.8em;
}

/* --- ヘッダーセル（th） --- */
th {
    background-color: #c7c7c7;
    text-align: center;
    font-weight: bold;
}

/* --- 偶数行に薄い背景色をつけてストライプ化 --- */
tr:nth-child(even) td {
    background-color: #e1e1e1;
}

td:first-child {
    text-align: center;
}

表示例（画面イメージ）