CSSでテーブル（表）をデザインする方法【応用編】

公開日：2017年03月20日最終更新日：2021年12月23日

「HTML入門【<table>タグ】～テーブル（表）を作成してみよう～」と「CSSでテーブル（表）をデザインする方法【基礎編】」では、テーブル作成の基本について解説しました。本コラムでは、CSSを用いてもう少しデザイン性のあるテーブルを作成する方法について説明します。

【関連記事】CSSでシンプルなテーブルをデザインする

1. テーブル（表）のスタイルを作成する

テーブルを作成するHTMLコードについては、既にマスターしている前提で解説します。
HTMLでテーブルを作成する方法については「HTML入門【<table>タグ】～テーブル（表）を作成してみよう～」を、CSSでテーブルスタイルをデザインする基本的な方法については、「CSSでテーブル（表）をデザインする方法【基礎編】」をご参考下さい。

まずは、本コラムで使用するHTML/CSSのサンプルコード「table1.html」ファイルをPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。
テーブル見出しにグラデーションをつけて、テーブルとセルに角丸を適用しています。またセル内に画像を挿入する方法についても解説します。少しコードが長いので小分けに説明します。

●table1.html

<!DOCTYPE html>
<html>
<head><title>テーブルのデザイン</title></head>
<style>
table.table1{
width: 90%; /* 要素の横幅を指定する */
line-height: 1.5em; /* 行の高さを指定する */
border-collapse: separate; /* 隣接するセルの罫線を重離して表示する */
font-family: "メイリオ", sans-serif;/* フォントのスタイルを指定する */
font-size: 12.5px; /* フォントのサイズを指定する */
font-weight: bold; /* フォントの太さを指定する */
}
.table1 thead th{
color:#fff; /* フォントの色を指定する */
padding:15px; /* セルの余白を指定する */
border:1px solid #006DD9; /* 罫線のスタイルを指定する */
border-bottom:3px solid #006DD9; /* 罫線（下部）のスタイルを指定する */
border-top-left-radius:5px; /* 罫線（左上）の角丸を指定する */
border-top-right-radius:5px; /* 罫線（右上）の角丸を指定する */
text-shadow:1px 1px 1px #666666; /* テキストフォントの影を指定する */
background-color:#006DD9; /* 背景色を指定する */
background: linear-gradient(#326693, #31A9EE); /* 背景色のグラデーションを指定する */
}
.table1 tbody th{
color:#fff; /* フォントの色を指定する */
padding:0px 10px; /* セルの余白を指定する(上下:左右) */
border:1px solid #006DD9; /* 罫線のスタイルを指定する */
border-right:3px solid #006DD9; /* 罫線（右）のスタイルを指定する */
border-top-left-radius:5px; /* 罫線（左上）の角丸を指定する */
border-bottom-left-radius:5px; /* 罫線（左下）の角丸を指定する */
text-shadow:1px 1px 1px #666666;/* テキストフォントの影を指定する */
background-color:#006DD9; /* 背景色を指定する */
background: linear-gradient(to right, #326693, #31A9EE); /* 背景色のグラデーションを指定する */
}
.table1 tbody td{
padding:10px; /* セルの余白を指定する(上下:左右) */
color:#666; /* フォントの色を指定する */
text-align:center; /* テキストの位置を指定する */
text-shadow:1px 1px 1px #fff; /* テキストフォントの影を指定する */
background-color:rgba(49,169,238,0.3);
border: 1px solid #aaa; /* 罫線のスタイルを指定する */
border-radius: 3px; /* 罫線の角丸を指定する */
}
.table1 tbody span.check1::before{
content : url(../images/check1.png) /* 画像コンテンツの指定 */
}
.table1 tbody span.check2::before{
content : url(../images/check2.png) /* 画像コンテンツの指定 */
}
</style>
<body>

<table class="table1">
<thead>
<tr>
<th></th>
<th scope="col">項目１</th>
<th scope="col">項目２</th>
<th scope="col">項目３</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">行見出し１</th>
<td>データ１</td>
<td>データ２</td>
<td>データ３</td>
</tr>
<tr>
<th scope="row">行見出し２</th>
<td>データ１</td>
<td>データ２</td>
<td>データ３</td>
</tr>
<tr>
<th scope="row">行見出し３</th>
<td>データ１</td>
<td>データ２</td>
<td>データ３</td>
</tr>
<tr>
<th scope="row">行見出し４</th>
<td><span class="check1"></span></td>
<td><span class="check1"></span></td>
<td><span class="check1"></span></td>
</tr>
<tr>
<th scope="row">行見出し５</th>
<td><span class="check2"></span></td>
<td><span class="check2"></span></td>
<td><span class="check2"></span></td>
</tr>
</tbody>
</table>

</body>
</html>