こんにちは。All About ホームページ作成ガイドの西村文宏です。
ウェブサイトでは、table要素を使って「表」を作ることが多々ありますよね。特にアフィリエイトサイトでは、紹介する商品・サービスの仕様を掲載する際など、「表」をよく活用されるのではないでしょうか。
今回は、表を見やすく掲載するために、表の体裁を整える（装飾する）方法をご紹介いたします。従来からCSS（スタイルシート）を使えば自由に表を装飾できましたが、CSS3で追加された機能を使えば、もっと便利に装飾できます。
ここでは、以下のサンプルページにあるような表を作ることを例にして、HTMLとCSSの記述方法を紹介します。
Contents
表を作るHTML
表を作るHTMLソースの基本は、以下の通りです。
- table要素 <table>〜</table> で全体を囲む
- tr要素 <tr>〜</tr> で「1行」を作る
- 必要に応じて、th要素 <th>〜</th> でヘッダ（見出し）セルを作る
- td要素 <td>〜</td> で1つ1つのセル（枠）を作る
- 表のヘッダを示す行は、thead要素で囲む
- それ以外の行（表の内容）は、tbody要素で囲む
<table> <thead> <tr> <th>No.</th> <th>商品名</th> <th>商品型番</th> </tr> </thead> <tbody> <tr> <th>1</th> <td>真空断熱フードコンテナ</td> <td>SDFC1245-L</td> </tr> <tr> <th>2</th> <td>ポット型浄水器</td> <td>WPPD5567-K</td> </tr> </tbody> </table>
上記のソースでは、ヘッダ（見出し）が1行、内容が2行の合計3行の表を作っています。
階層構造をわかりやすくするインデント活用をおすすめ！
表を作る際には、「行を作るtr要素」や「各セルを作るtd要素」など、複数の要素を同時に使います。そのため、ソースが見づらくなりがちです。少しでもソースを見やすくして、後から修正しやすいように、「インデント」（字下げ）を使って記述することをおすすめします。
以下のように、HTMLタグごとに行を変え、先頭に空白を入れることで、HTMLの階層構造をわかりやすくします。このように記述しておくと、「タグの閉じ忘れ」も簡単に防げます。
<tag1> <tag2> <tag3> 階層構造をわかりやすいように先頭に空白を入れて記述。 </tag3> </tag2> </tag1>
コメントを入れてよりわかりやすくできる
HTMLソース中で「どの部分に何を書いているのか」を表示できるコメント機能を活用すると、もっとわかりやすくなります。HTMLでは「<!--」と「-->」で挟んだ部分は、ブラウザ上には表示されませんので、何でも自由にメモを記述しておけます。
<table> <!-- ======================== ▼ここから表のヘッダ部分 ======================== --> <thead> <tr> <th>No.</th> <th>商品名</th> <th>商品型番</th> </tr> </thead> <!-- ======================== ▲ここまで表のヘッダ部分 ======================== --> <!-- ======================== ▼ここから表の中身(内容) ======================== --> <tbody> <tr> <!-- ………………… ▼第１位の商品 ………………… --> <th>1</th> <td>真空断熱フードコンテナ</td> <td>SDFC1245-L</td> </tr> <tr> <!-- ………………… ▼第２位の商品 ………………… --> <th>2</th> <td>ポット型浄水器</td> <td>WPPD5567-K</td> </tr> </tbody> <!-- ======================== ▲ここまで表の中身(内容) ======================== --> </table>
このように、どの部分に何を書いているのかが、わかりやすくなります。冒頭に紹介したサンプルページのHTMLソースにも、詳しくコメントを加えてあるのでご覧ください。
表を装飾するCSS
ここからは先ほどのHTMLに、スタイルシート（CSS）を加えて、表を自由自在に装飾していく方法について紹介していきます。
最終的には以下のサンプルページにあるような表を作ることを例にしています。
表を装飾する基本は、「枠線」・「配色」・「余白量」の3点です。
装飾したい部分に応じて、以下の要素に対してスタイルを記述します。
- 表全体の体裁や外側の枠線 → table要素
- 内側の枠線や枠線と文字(中身)の間の余白量 → th・td要素
- 行単位の装飾 → tr要素（や、thead・tbody要素など）
表全体の体裁や外側の枠線を指定する方法
まずは、table要素に対して以下のようにスタイルを記述します。
「太さ2px」の「実線(solid)」を「緑色」で引く指定、最後の「border-collapse: collapse」は、セルとセルの隙間をなくす指定です。表を装飾する際には必須の指定なのでそのまま記述してください。
table {
border-width: 2px; /* 枠線の太さ */
border-style: solid; /* 枠線の種類 */
border-color: green; /* 枠線の配色 */
border-collapse: collapse;
}上記の装飾を前回のHTMLソースに適用してみると、以下のページのように見えます。
内側に点線を引く方法
次に、縦横に点線を引いてみましょう。先ほどの装飾との違いをわかりやすいように、線の色を青色にしてあります。
th,td {
border-width: 1px; /* 枠線の太さ */
border-style: dotted; /* 枠線の種類 */
border-color: blue; /* 枠線の配色 */
}上記の装飾を実際に適用してみると、以下のページのように見えます。
ちなみに枠線に関しては、他にも以下のような装飾も可能です（実際のCSSは後述します）。
- 横線を実線にし、縦線を点線にして、項目の関係をわかりやすくする
- 縦線をなくして、横線だけを表示してスッキリ見せる
- 表の内側だけに線を引き、外枠はなくしてスリムに見せる
セルの内側に余白をつける方法
標準の状態ではセルの間隔が詰まりすぎているので、セルの内側（文字と枠線の間）に余白を設けましょう。セルの内側に「0.3文字分」の余白を設けてみます。
th,td {
padding: 0.3em;
}このように記述すると、枠線の内側（＝文字の上下左右）に0.3文字分の空間ができます。実際に適用してみると、以下のページのように見えます。
表のヘッダ行だけ異なる装飾にする方法
表のヘッダ部分（見出し行の部分）は、他とは異なる配色にしておくと、わかりやすい表になります。
ヘッダ行にだけ背景色を指定し、さらに下側の枠線を二重線にしてみましょう。ヘッダ部分（thead要素）に、淡い緑色の背景色を指定し、下側の枠線を「緑色の二重線」にしてみます。
thead {
background-color: #ccffcc;
border-bottom: 3px double green;
}実際に適用してみると、以下のページのように見えます。
横線を実線・縦線を点線にする方法
横線と縦線の線種を別々に指定することもできます。例えば、以下のように記述すると、横線は「緑色の実線」で、縦線は「灰色の点線」で描かれるようになります。
th,td {
border-width: 1px; /* 枠線の太さ */
border-style: solid dotted; /* 枠線の種類 */
border-color: green gray; /* 枠線の色 */
}実際に適用してみると、以下のページのように見えます。
横線だけを表示してスッキリ見せる方法
縦横すべての線を引くのではなく、例えば横線だけに限って引くと、スッキリ見える場合もあります。以下のように記述すると、横線（上下の線）は引かれますが、縦線（左右の線）は引かれません。
th,td {
border-width: 1px 0px; /* 枠線の太さ */
border-style: solid; /* 枠線の種類 */
border-color: green; /* 枠線の色 */
}実際に適用してみると、以下のページのように見えます。
内側だけに縦横に線を引く方法
外枠をなくすことで、表全体をスリムに見せても良いでしょう。
外枠は、table要素に対する装飾で指定します。外枠を消す方法はいくつかありますが、以下では「白色の枠線」を引く方法で実現しています。（単に記述を省略するだけでは、td要素などに対する枠線が外側にも表示されてしまうため、表の外枠は消えません。）
table {
border-width: 1px; /* 枠線の太さ */
border-style: solid; /* 枠線の種類 */
border-color: white; /* 枠線の色 */
}実際に適用してみると、以下のページのように見えます。
マウスが載った行だけを装飾する方法
閲覧者がマウスを載せている行だけをハイライト表示できるようにすると、より見やすい表になります。以下のように記述すると、マウスが載った行だけに背景色が付加されます。
tr:hover {
background-color: #ffff80;
}CSS3でさらに自由に装飾できる
これまでに紹介してきた装飾は従来のCSSだけで実現可能な装飾でしたが、CSS3で追加された記述方法を組み合わせて使うと、より自由自在に表を装飾できるようになります。
1行おきに背景色を加える方法
表の縦が長くなると、ほんの一瞬、表から目を逸らしただけで「今までどこを見ていたのか」がわからなくなってしまうことがありますよね。 そのような表を作る場合には、1行おきに背景色を付けておくと見やすくなります。
偶数行にだけ、淡い灰色の背景色を付けてみます。以下は表の「行」を作るtr要素の中で、偶数番目に登場するものだけを対象にして装飾を指定する記述です。
「3つおき」に装飾したい場合は「nth-child(3n)」のように記述します。
tr:nth-child(2n) {
background-color: #eeeeee;
}実際に適用してみると、以下のページのように見えます。
特定の列だけを装飾する方法
HTMLでは「表の行」をtr要素で作るので、「行」を装飾するにはtr要素に対してスタイルを指定します。
「列」を装飾する場合は以下のように記述すると、「右端の列だけ」を装飾したり、「左から4番目の列」だけを装飾したりできます。
/* ▼右端の列だけを装飾 */
td:last-child {
font-size: smaller; /* 文字を小さめに */
}
/* ▼左から4番目の内容セルだけを装飾 */
td:nth-child(4) {
color: blue; /* 文字を青色に */
font-size: 90%; /* 文字を1割小さく */
}「td:last-child」と記述すると、「最後に登場するtd要素」を対象にして装飾を指定できます。親要素（tr要素）の中に登場する「最後のtd要素」とはつまり「右端の列」ということです。
また、「td:nth-child(4)」と記述すると、「4番目に登場するtd要素」を対象にして装飾を指定できます。親要素（tr要素）の中に登場する「4番目の要素」がtd要素だった場合に、指定の装飾が適用されます。
上記の装飾を加えると、以下のページのように見えます。
今回は、見やすい表を作る方法を紹介しました。プロパティの値をいろいろ改変して、どう表示が変化するのかを試してみるのもおすすめです。これらの記述を活用して、ぜひ、見やすい表を作ってみてください。
ご注意ください
- 本記事の内容は、2025/01/23更新時点の情報です。更新日より期間が経過している場合など、状況により現在の情報とは異なる可能性があります。
- 一部、体験談などの執筆者の個人的な意見、株式会社インタースペース(アクセストレード)以外が提供するサービスの紹介が含まれる場合もあります。情報の内容には十分に注意しておりますが、万が一、損害やトラブルが生じた場合も責任を負いかねますので、内容をご確認の上ご自身の判断のもとでご利用ください。
- 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載等を禁じます。
関連記事
カテゴリーから探す
タグから探す
- アフィリエイトをはじめよう！
- 無料新規パートナー登録
- 広告出稿を希望のかたはこちら
- 無料資料請求はこちら