「HTML入門【<table>タグ】～テーブル（表）を作成してみよう～」では、テーブル作成の基本について解説しましたが、本コラムでは、CSSを用いてテーブルをデザインする方法について、サンプルコードを見ながら説明します。
【関連記事】CSSでテーブル（表）をデザインする方法【応用編】
【関連記事】CSSでシンプルなテーブルをデザインする
目次
1.1. 「table」セレクタでテーブル全体のスタイルを指定する
1.2. 「td, th」セレクタで行と見出しのスタイルを指定する
1.3. 見出しの背景色を指定する
2.1. 「table」セレクタでテーブル全体のスタイルを指定する
2.2. 「th」セレクタでテーブル見出しのスタイルを指定する
2.3. 「td」「tr」セレクタでテーブル行のスタイルを指定する
2.4. 「nth-child(n)」疑似クラスで行の背景色を交互に指定する
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>見出し１</th>
<th>見出し２</th>
<th>見出し３</th>
</tr>
<tr>
<td>１行目（左の列）</td>
<td>１行目（真中の列）</td>
<td>１行目（右の列）</td>
</tr>
<tr>
<td>２行目（左の列）</td>
<td>２行目（真中の列）</td>
<td>２行目（右の列）</td>
</tr>
<tr>
<td>３行目（左の列）</td>
<td>３行目（真中の列）</td>
<td>３行目（右の列）</td>
</tr>
</table>
</body>
</html>
HTMLテーブルの線の種類や色の指定は<style>～</style>の中に記述しているCSSで指定しています。解説用に同一ファイル内にHTMLとCSSのコードを書いていますが、スタイルを指定するCSSファイルはHTML文書とは別に作成して管理する事をおすすめします。 参考URL：「CSSの書き方の基本 ～2.2 外部ファイルに記述する～」
●ブラウザーの表示(table-sample1.html)
「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)
「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)
1.3. 見出しの背景色を指定する
最後に見出しの背景色を指定する「th」セレクターを追加します。
●table-sample1.html
<style>
・・・省略・・・
th {
background-color: #31A9EE; /* 見出しの背景色を指定する */
}
</style>
「background-color」プロパティで見出しの背景色を設定してテーブルのスタイルを適用します。
●ブラウザーの表示(table-sample1.html)
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>見出し１</th>
<th>見出し２</th>
<th>見出し３</th>
</tr>
<tr>
<td>１行目（左の列）</td>
<td>１行目（真中の列）</td>
<td>１行目（右の列）</td>
</tr>
<tr>
<td>２行目（左の列）</td>
<td>２行目（真中の列）</td>
<td>２行目（右の列）</td>
</tr>
<tr>
<td>３行目（左の列）</td>
<td>３行目（真中の列）</td>
<td>３行目（右の列）</td>
</tr>
<tr>
<td>４行目（左の列）</td>
<td>４行目（真中の列）</td>
<td>４行目（右の列）</td>
</tr>
<tr>
<td>５行目（左の列）</td>
<td>５行目（真中の列）</td>
<td>５行目（右の列）</td>
</tr>
</table>
</body>
</html>
●ブラウザーの表示(table-sample2.html)
セレクタごとにどのように表示されるか確認してみましょう。
2.1. 「table」セレクタでテーブル全体のスタイルを指定する
「table」セレクタでは、全体に共通するスタイルを指定します。
●table-sample2.html
<style>
table {
font-family: "メイリオ", sans-serif;/* フォントのスタイルを指定する */
border-spacing: 3px; /* 隣接するセル(上下左右)の境界線の間隔を指定する */
width: auto; /* テーブルの横幅を指定する */
}
・・・省略・・・
</style>
今回はテーブルの罫線を使ったスタイルを適用していきます。「border-spacing」プロパティで罫線と罫線の間にスペースをもうけます。
●ブラウザーの表示(table-sample2.html)
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)
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)
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)
また、「:hover」疑似クラスを指定しているので、マウスオーバーした時に行の色が変わります。
●ブラウザーの表示(table-sample2.html)
【関連記事】 HTML入門【<table>タグ】～テーブル（表）を作成してみよう～
