CSSでテーブル(表)をデザインする方法【基礎編】

    • このページをはてなブックマークに追加

    公開日:2017年03月15日 最終更新日:2019年09月26日

    HTML入門【<table>タグ】~テーブル(表)を作成してみよう~」では、テーブル作成の基本について解説しましたが、本コラムでは、CSSを用いてテーブルをデザインする方法について、サンプルコードを見ながら説明します。

    【関連記事】CSSでテーブル(表)をデザインする方法【応用編】
    【関連記事】CSSでシンプルなテーブルをデザインする

    目次

    1. テーブル(表)に色を付ける方法

    テーブルを作成するHTMLコードについては、既にマスターしている前提で解説します。
    HTMLでテーブルを作成する方法については「HTML入門【<table>タグ】~テーブル(表)を作成してみよう~」をご参考下さい。以下「table-sample1.html」ファイルをPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。

    ●table-sample1.html

    <!DOCTYPE html>
    <html lang="ja">
    <head><title>HTMLの基礎</title></head>
    <style>
    table {
    border-collapse: collapse; /* 隣接するセルの罫線を重ねて表示する */
    font-family: "メイリオ", sans-serif;/* フォントのスタイルを指定する */
    color: #000000; /* フォントの色を指定する */
    width: 80%; /* テーブルの横幅を指定する */
    }
    td, th {
    border: 1px solid #000000; /* 境界線を実線で指定する */
    background-color: rgba(0,0,0,0.3);/* 背景色を指定する */
    text-align: center; /* インライン要素の位置を指定する */
    padding: 3px; /* 要素の余白を指定する(上下左右) */
    }
    th {
    background-color: #31A9EE; /* 見出しの背景色を指定する */
    }
    </style>
    <body>
    <table border="1">
    <caption>テーブルのタイトル</caption>
    <tr>
    <th>見出し1</th>
    <th>見出し2</th>
    <th>見出し3</th>
    </tr>
    <tr>
    <td>1行目(左の列)</td>
    <td>1行目(真中の列)</td>
    <td>1行目(右の列)</td>
    </tr>
    <tr>
    <td>2行目(左の列)</td>
    <td>2行目(真中の列)</td>
    <td>2行目(右の列)</td>
    </tr>
    <tr>
    <td>3行目(左の列)</td>
    <td>3行目(真中の列)</td>
    <td>3行目(右の列)</td>
    </tr>
    </table>
    </body>
    </html>

    HTMLテーブルの線の種類や色の指定は<style>~</style>の中に記述しているCSSで指定しています。解説用に同一ファイル内にHTMLとCSSのコードを書いていますが、スタイルを指定するCSSファイルはHTML文書とは別に作成して管理する事をおすすめします。 参考URL:「CSSの書き方の基本 ~2.2 外部ファイルに記述する~

    ●ブラウザーの表示(table-sample1.html)

    table3-0

    「table-sample1.html」では、テーブルの背景色に加えて、境界線やフォントのスタイル、位置を指定しています。

    ▲ページトップへ戻る

    1.1. 「table」セレクタでテーブル全体のスタイルを指定する

    「table-sample1.html」ファイルのCSSの部分を小分けに見てゆきましょう。

    ●table-sample1.html

    <style>
    table {
    border-collapse: collapse; /* 隣接するセルの罫線を重ねて表示する */
    font-family: "メイリオ", sans-serif;/* フォントのスタイルを指定する */
    color: #000000; /* フォントの色を指定する */
    width: 80%; /* テーブルの横幅を指定する */
    }
    ・・・省略・・・
    </style>

    「table」セレクタでは基本的なテーブルの罫線、フォントスタイル、幅などを指定しています。

    ●ブラウザーの表示(table-sample1.html)

    table4

    「table」セレクタのみでの表示です。

    ▲ページトップへ戻る

    1.2. 「td, th」セレクタで行と見出しのスタイルを指定する

    「table」セレクタに、行のスタイルを指定する「td, th」セレクタを追加してみましょう。

    ●table-sample1.html

    <style>
    ・・・省略・・・
    td, th {
    border: 1px solid #000000; /* 境界線を実線で指定する */
    background-color: rgba(0,0,0,0.3);/* 背景色を指定する */
    text-align: center; /* インライン要素の位置を指定する */
    padding: 3px; /* 要素の余白を指定する(上下左右) */
    }
    ・・・省略・・・
    </style>

    行全体の背景色と罫線、それからフォントの位置を中央に指定しセル内に余白をつけています。

    ●ブラウザーの表示(table-sample1.html)

    table5

    ▲ページトップへ戻る

    1.3. 見出しの背景色を指定する

    最後に見出しの背景色を指定する「th」セレクターを追加します。

    ●table-sample1.html

    <style>
    ・・・省略・・・
    th {
    background-color: #31A9EE; /* 見出しの背景色を指定する */
    }
    </style>

    「background-color」プロパティで見出しの背景色を設定してテーブルのスタイルを適用します。

    ●ブラウザーの表示(table-sample1.html)

    table3-0

    ▲ページトップへ戻る

    2. テーブルの背景色を交互に変える方法

    CSSのスタイルを追加して、もう少し実用的なテーブルを作成してみましょう。
    テーブル行の背景色を交互に変えて、マウスオーバーした時に行の色が変わるCSSです。「table-sample2.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。

    ●table-sample2.html

    <!DOCTYPE html>
    <html lang="ja">
    <head><title>テーブルのデザイン</title></head>
    <style>
    table {
    font-family: "メイリオ", sans-serif;/* フォントのスタイルを指定する */
    border-spacing: 3px; /* 隣接するセルの境界線の間隔を指定する */
    width: auto; /* テーブルの横幅を指定する */
    }
    th {
    color: #fff; /* 見出しのフォントの色を指定する */
    padding: 3px 5px; /* 見出し内側の余白を指定する(上下:左右) */
    background: #326693; /* 見出しの背景色を指定する */
    font-weight: bold; /* フォントの太さを指定する */
    border-left:1px solid #326693; /* 境界線左側のスタイルを指定する */
    border-top:1px solid #326693; /* 境界線上部のスタイルを指定する */
    border-bottom:1px solid #326693;/* 境界線下部のスタイルを指定する */
    text-align: center; /* 見出し文字のセンタリングを指定する */
    box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;/* ボックスの内側に影を作成する */
    }
    td {
    padding: 3px 5px; /* セル内の余白を指定する(上下:左右) */
    text-align: center; /* セル内文字のセンタリングを指定する */
    border-left: 1px solid #006DD9; /* 境界線左側のスタイルを指定する */
    border-bottom: 1px solid #006DD9; /* 境界線下部のスタイルを指定する */
    }
    tr {
    background: #fff; /* 行全体の背景色を指定する */
    }
    tr:nth-child(odd) {
    background: #31A9EE; /* 奇数行の背景色を指定する */
    }
    tr:hover {
    background: rgba(0,0,0,0.2);/* マウスオーバー時の背景の色を指定する */
    cursor:pointer; /* マウスカーソルの形(リンクカーソル)を指定する */
    }
    </style>
    <body>
    <table border="1">
    <caption>テーブルのタイトル</caption>
    <tr>
    <th>見出し1</th>
    <th>見出し2</th>
    <th>見出し3</th>
    </tr>
    <tr>
    <td>1行目(左の列)</td>
    <td>1行目(真中の列)</td>
    <td>1行目(右の列)</td>
    </tr>
    <tr>
    <td>2行目(左の列)</td>
    <td>2行目(真中の列)</td>
    <td>2行目(右の列)</td>
    </tr>
    <tr>
    <td>3行目(左の列)</td>
    <td>3行目(真中の列)</td>
    <td>3行目(右の列)</td>
    </tr>
    <tr>
    <td>4行目(左の列)</td>
    <td>4行目(真中の列)</td>
    <td>4行目(右の列)</td>
    </tr>
    <tr>
    <td>5行目(左の列)</td>
    <td>5行目(真中の列)</td>
    <td>5行目(右の列)</td>
    </tr>
    </table>
    </body>
    </html>

    ●ブラウザーの表示(table-sample2.html)

    table10

    セレクタごとにどのように表示されるか確認してみましょう。

    ▲ページトップへ戻る

    2.1. 「table」セレクタでテーブル全体のスタイルを指定する

    「table」セレクタでは、全体に共通するスタイルを指定します。

    ●table-sample2.html

    <style>
    table {
    font-family: "メイリオ", sans-serif;/* フォントのスタイルを指定する */
    border-spacing: 3px; /* 隣接するセル(上下左右)の境界線の間隔を指定する */
    width: auto; /* テーブルの横幅を指定する */
    }
    ・・・省略・・・
    </style>

    今回はテーブルの罫線を使ったスタイルを適用していきます。「border-spacing」プロパティで罫線と罫線の間にスペースをもうけます。

    ●ブラウザーの表示(table-sample2.html)

    table6

    ▲ページトップへ戻る

    2.2. 「th」セレクタでテーブル見出しのスタイルを指定する

    「th」セレクタで見出しのスタイルを指定します。

    ●table-sample2.html

    <style>
    ・・・省略・・・
    th {
    color: #fff; /* 見出しのフォントの色を指定する */
    padding: 3px 5px; /* 見出し内側の余白を指定する(上下:左右) */
    background: #326693; /* 見出しの背景色を指定する */
    font-weight: bold; /* フォントの太さを指定する */
    border-left:1px solid #326693; /* 境界線左側のスタイルを指定する */
    border-top:1px solid #326693; /* 境界線上部のスタイルを指定する */
    border-bottom:1px solid #326693;/* 境界線下部のスタイルを指定する */
    text-align: center; /* 見出し文字のセンタリングを指定する */
    box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;/* ボックスの内側に影を作成する */
    }
    ・・・省略・・・
    </style>

    見出しのテキストの色(color)、太さ(font-weight)、位置(text-align)とセルの余白(padding)と背景色(background)、それからテーブル罫線のスタイル(border)と影(box-shadow)を指定しています。

    ●ブラウザーの表示(table-sample2.html)

    table7

    ▲ページトップへ戻る

    2.3. 「td」「tr」セレクタでテーブル行のスタイルを指定する

    行とセルのスタイルを設定します。

    ●table-sample2.html

    <style>
    ・・・省略・・・
    td {
    padding: 3px 5px; /* セル内の余白を指定する(上下:左右) */
    text-align: center; /* セル内文字のセンタリングを指定する */
    border-left: 1px solid #006DD9; /* 境界線左側のスタイルを指定する */
    border-bottom: 1px solid #006DD9; /* 境界線下部のスタイルを指定する */
    }
    tr {
    background: #fff; /* 行全体の背景色を指定する */
    }
    ・・・省略・・・
    </style>

    「td」セレクタでセルの余白と罫線のスタイルを指定し、「tr」セレクタで背景の色を指定しています。サンプルの背景は白くしています。

    ●ブラウザーの表示(table-sample2.html)

    table8

    ▲ページトップへ戻る

    2.4. 「nth-child(n)」疑似クラスで行の背景色を交互に指定する

    「tr」セレクタに疑似クラス(nth-child)を使うことで奇数行や偶数行だけに背景色を指定する事ができます。

    ●table-sample2.html

    <style>
    ・・・省略・・・
    tr:nth-child(odd) {
    background: #31A9EE; /* 奇数行の背景色を指定する */
    }
    tr:hover {
    background: rgba(0,0,0,0.2);/* マウスオーバー時の背景の色を指定する */
    cursor:pointer; /* マウスカーソルの形(リンクカーソル)を指定する */
    }
    </style>

    サンプルでは、「tr:nth-child」に”(odd)”を指定し、奇数行の背景色を付けていますが、”even”を指定すると偶数行に色を付けることができます。

    ●ブラウザーの表示(table-sample2.html)

    table10

    また、「:hover」疑似クラスを指定しているので、マウスオーバーした時に行の色が変わります。

    ●ブラウザーの表示(table-sample2.html)

    table11

    ▲ページトップへ戻る

    【関連記事】 HTML入門【<table>タグ】~テーブル(表)を作成してみよう~

    HTML・CSSを活かした最新求人情報をチェック!

    年収400万円〜650万円
    勤務地 東京都 港区
    月額単価70万円〜80万円
    勤務地 東京都 千代田区
    月額単価50万円〜60万円
    勤務地 東京都 渋谷区
    • このページをはてなブックマークに追加

    おすすめ記事

  • ピックアップ

    正社員

    【PHP/Javascripts】フロントエンジニア|システム設計から製造・テストまで NEW

    年収 :350万円〜

    【フェーズ】 設計~製造・テストまでご本人様希望に合わせたフェーズをご担当頂く形となります。 ...

    株式会社ファーンリッジ・ジャパン

    正社員

    【C#/C++】システムエンジニア|Webアプリケーションの設計・開発 NEW

    年収 :400万円〜650万円

    【職務内容】 オープン系・Webアプリケーション設計開発、プロジェクトリーダー、プロジェクトマネージ...

    株式会社ボールド

    フリーランス

    【Vue.js/Nuxt.js】フロントエンドエンジニア★配送マッチングプラットフォームの開発 NEW

    月額単価 :70万円〜80万円

    下記2つのサービスを展開している企業で、フロントエンド開発を担当して頂きます。 ・荷主とドライバー...

    フリーランス

    【PHP】Webエンジニア★BtoB向け顧客情報分析システム開発 NEW

    月額単価 :50万円〜60万円

    BtoB向けのBIGデータを利用した来店者計測ツールの開発をお任せします。 また、そのデータを元にインタ...