--- title: 表のスタイリング slug: Learn/CSS/Building_blocks/Styling_tables tags: - Article - Beginner - CSS - CodingScripting - Guide - Styling - Tables translation_of: Learn/CSS/Building_blocks/Styling_tables ---

{{LearnSidebar}}

{{PreviousMenuNext("Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}

HTML 表を装飾することは、世界で最も魅力的な仕事ではありませんが、時にはそれをしなければならないこともあります。 この記事では、これまでに説明した機能のいくつかとともに、HTML 表を見栄え良くするためのガイドを提供します。

前提条件: HTML の基本（HTML 入門）と HTML 表 および CSS に関するアイデア（CSS の第一歩）に関する基本的な知識を得ている。
目的: HTML 表を効果的に装飾する方法を学ぶ。

典型的な HTML 表

典型的な HTML 表を見ることから始めましょう。 まあ、典型的な言い方ですが、ほとんどの HTML 表の例は、靴、天気、あるいは従業員に関するものです。 私達はイギリスの有名なパンクバンドについてそれを作ることで、もっと面白くすることにしました。 マークアップはこんな感じです。

<table>
  <caption>A summary of the UK's most famous punk bands</caption>
  <thead>
    <tr>
      <th scope="col">Band</th>
      <th scope="col">Year formed</th>
      <th scope="col">No. of Albums</th>
      <th scope="col">Most famous song</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Buzzcocks</th>
      <td>1976</td>
      <td>9</td>
      <td>Ever fallen in love (with someone you shouldn't've)</td>
    </tr>
    <tr>
      <th scope="row">The Clash</th>
      <td>1976</td>
      <td>6</td>
      <td>London Calling</td>
    </tr>

      ... 簡潔にするためにいくつかの行を削除

    <tr>
      <th scope="row">The Stranglers</th>
      <td>1974</td>
      <td>17</td>
      <td>No More Heroes</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="2">Total albums</th>
      <td colspan="2">77</td>
    </tr>
  </tfoot>
</table>

{{htmlattrxref("scope","th")}}、{{htmlelement("caption")}}、{{htmlelement("thead")}}、{{htmlelement("tbody")}} などの機能のおかげで、表はうまくマークアップされ、簡単に装飾を整えられ、アクセスしやすくなりました。 残念なことに、画面に表示したときは見栄えがよくありません（punk-bands-unstyled.html でライブを見る）。

それは窮屈に見え、読みにくく、そして退屈です。 これを修正するために CSS を使用する必要があります。

テーブルのスタイリング

テーブルの例を一緒にスタイリングしてみましょう。

  1. まず始めに、サンプルマークアップのローカルコピーを作成し、noise と leopardskin の両方の画像をダウンロードして、3つのファイルをローカルコンピュータのどこかの作業ディレクトリに配置します。
  2. 次に、style.css という名前の新しいファイルを作成し、他のファイルと同じディレクトリに保存します。
  3. {{htmlelement("head")}} の内側に次の HTML 行を配置して、CSS を HTML にリンクします。 
    <link href="style.css" rel="stylesheet" type="text/css">

スペーシングとレイアウト

最初にすべきことは、スペーシングやレイアウトを整理することです — デフォルトの表の装飾はとても窮屈です！ これを行うには、style.css ファイルに次の CSS を追加します。

/* spacing */

table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border: 3px solid purple;
}

thead th:nth-child(1) {
  width: 30%;
}

thead th:nth-child(2) {
  width: 20%;
}

thead th:nth-child(3) {
  width: 15%;
}

thead th:nth-child(4) {
  width: 35%;
}

th, td {
  padding: 20px;
}

注意すべき最も重要な部分は次のとおりです。

この時点で、表はすでにずっと良く見えています。

簡単なタイポグラフィ

それでは、テキストを少し整理しましょう。

まず第一に、パンクバンドについての表にふさわしいフォントを Google Fonts で見つけてあります。 望むならそこに行って、別なものを探すことができます。私たちが提供する {{htmlelement("link")}} 要素とカスタムの {{cssxref("font-family")}} 宣言を Google Fonts が与えるものと置き換えるだけです。

まず、HTML head の既存の {{htmlelement("link")}} 要素のすぐ上に、次の <link> 要素を追加します。

<link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>

そして、style.css ファイルの以前の追加の下に、次の CSS を追加します。

/* typography */

html {
  font-family: 'helvetica neue', helvetica, arial, sans-serif;
}

thead th, tfoot th {
  font-family: 'Rock Salt', cursive;
}

th {
  letter-spacing: 2px;
}

td {
  letter-spacing: 1px;
}

tbody td {
  text-align: center;
}

tfoot th {
  text-align: right;
}

ここに表に固有のものは何もありません。 読みやすくするために、次のようにフォントの装飾を調整しています。

結果は少しきれいに見えます。

グラフィックスと色

今度はグラフィックと色です！ 表はパンクとその態度でいっぱいですので、それに合わせていくつかの明るい印象的な装飾を与える必要があります。 心配しないで、表をそんなに騒々しくする必要はありません — もっと微妙で上品な何かを選ぶことができます。

次の CSS を style.css ファイルの一番下に再び追加してください。

thead, tfoot {
  background: url(leopardskin.jpg);
  color: white;
  text-shadow: 1px 1px 1px black;
}

thead th, tfoot th, tfoot td {
  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
  border: 3px solid purple;
}

繰り返しますが、ここでは表に固有のものは何もありませんが、いくつか注意することは価値があります。

{{htmlelement("thead")}} と {{htmlelement("tfoot")}} に {{cssxref("background-image")}} を追加し、ヘッダー内とフッター内のすべてのテキストの {{cssxref("color")}} を白に変更して（そして {{cssxref("text-shadow")}} を指定して）読みやすくしています。 読みやすいように、テキストが背景と比べてコントラストがあるようにしてください。

また、ヘッダー内とフッター内の {{htmlelement("th")}} 要素と {{htmlelement("td")}} 要素に線形グラデーションを追加して、テクスチャをきれいにし、それらの要素に明るい紫色の境界線を付けました。 複数のネストした要素を使用できるようにしておくと、スタイルを重ね合わせることができます。 はい、複数の背景画像を使用して {{htmlelement("thead")}} 要素と {{htmlelement("tfoot")}} 要素に背景画像と線形グラデーションの両方を配置することもできましたが、複数の背景画像や線形グラデーションをサポートしない古いブラウザーの利点のために別々に行うことにしました。

ゼブラストライピング

ゼブラストライプ（zebra stripes）を実装する方法を示すために別のセクションを捧げたいと思います — 表のさまざまなデータ行を解析して読みやすくするために、行の色を交互に並べます。 style.css ファイルの一番下に次の CSS を追加します。

tbody tr:nth-child(odd) {
  background-color: #ff33cc;
}

tbody tr:nth-child(even) {
  background-color: #e495e4;
}

tbody tr {
  background-image: url(noise.png);
}

table {
  background-color: #ff33cc;
}

この色の爆発により、以下のような見た目になります。

さて、これはあなたの好みではなく、少々限度を超えているかもしれませんが、ここで主張しようとしているのは、表が退屈で学術的である必要はないということです。

キャプションの装飾

表でやるべきことがもう一つあります — キャプションの装飾です。 これを行うには、style.css ファイルの一番下に次のコードを追加します。

caption {
  font-family: 'Rock Salt', cursive;
  padding: 20px;
  font-style: italic;
  caption-side: bottom;
  color: #666;
  text-align: right;
  letter-spacing: 1px;
}

{{cssxref("caption-side")}} プロパティに、bottom の値が与えられている以外に、ここで注目に値するものは何もありません。 これにより、キャプションは表の下に配置され、他の宣言と共にこの最終的な外観が得られます（punk-bands-complete.html でライブで見る）。

表の装飾のちょっとした助言

先に進む前に、上に示した最も有用なポイントの簡単なリストをお送りします。

あなたのスキルをテストしてください！

この記事では多くの情報を取り上げましたが、最も重要な情報を覚えていますか？先に進む前に、この情報を保持しているかどうかを確認するためのテストをいくつか見つけることができます。Test your skills: tables を参照してください。

まとめ

テーブルのスタイリングも終わりに近づいてきたので、他にも何か時間を割くものが必要になってきました。次の記事では、CSS をデバッグする方法を探ります。レイアウトが思うように見えない、プロパティが適用されないなどの問題を解決する方法です。これには、ブラウザの DevTools を使用して問題を解決する方法についての情報も含まれています。

{{PreviousMenuNext("Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}

このモジュール

  1. カスケードと継承
  2. CSS セレクター
  3. ボックスモデル
  4. 背景と枠線
  5. テキスト方向の操作
  6. 要素のはみ出し（オーバーフロー）
  7. CSS の値と単位
  8. CSS によるサイズ設定
  9. 画像・メディア・フォーム要素
  10. 表のスタイリング
  11. CSS のデバッグ
  12. CSS の整理