HTML 網掛け＆hover テーブルの作り方

HTML 網掛け＆hover テーブル

今回は「網掛け＆hover テーブル」の作り方をご紹介します。

table header 1	table header 2	table header 3
table data 1A	table data 1B	table data 1C
table data 2A	table data 2B	table data 2C
table data 3A	table data 3B	table data 3C
table data 4A	table data 4B	table data 4C
table data 5A	table data 5B	table data 5C

これは先日ご紹介した「シンプルなテーブル」の作り方の装飾版となります。
somegoro.hatenablog.com

網掛け、hoverとは

網掛けとは、一行毎にセルの色が変更されることを表しています。網目のような模様なので、このようなテーブルを網掛けテーブルと言います。

hoverとは、マウスオーバー（マウスを上に乗せること）したときの処理を表しています。今回はhoverでセルの色が変わるようにしました。

ソースコードのご紹介

さて、それではソースコードをご紹介しましょう。もちろんコピー＆ペーストして使用していただいて結構です。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table.shade_table {
	font-size:11px;/* テーブルセルの高さを調整したいときにはここを編集してください */
	border-collapse: collapse;
	background-color: white;
}

table.shade_table th {
	border: 1px solid black;
	padding: 8px;
	background-color: #DDDDDD;
}

table.shade_table td {
	border: 1px solid black;
	padding: 8px;
}

#table_body tr:nth-child(even) {
	background: #EEEEEE;
}

#table_body tr:hover {
  background-color: #FFCC99;
}

</style>
</head>
<body>
  <table class="shade_table">
    <thead>
      <tr><th>table header 1</th><th>table header 2</th><th>table header 3</th></tr>
    </thead>
    <tbody id="table_body">
      <tr><td>table data 1A</td><td>table data 1B</td><td>table data 1C</td></tr>
      <tr><td>table data 2A</td><td>table data 2B</td><td>table data 2C</td></tr>
      <tr><td>table data 3A</td><td>table data 3B</td><td>table data 3C</td></tr>
      <tr><td>table data 4A</td><td>table data 4B</td><td>table data 4C</td></tr>
      <tr><td>table data 5A</td><td>table data 5B</td><td>table data 5C</td></tr>
    </tbody>
  </table>
</body>
</html>