|
HTML HTML5 HTMLタグ スマートフォン |
CSS CSSプロパティ CSS・HTML便利ツール |
HTML色見本 配色組み合わせツール 特殊文字 |
JAVA Android |
PHP Smarty修飾子 EXCEL |
縞々の表(TABLE)、選択時のセル・列の色の反転
縞々の表、選択時のセル・列の色の反転のサンプル
普通の表(テーブル)
| 番号 | 氏名 | 得点 |
|---|---|---|
| 1 | 山田 | 75点 |
| 2 | 田中 | 80点 |
| 3 | 広瀬 | 70点 |
| 4 | 尾崎 | 85点 |
| 5 | 吉村 | 100点 |
.tbl_demo1 {
border: 1px solid #83acd0;
border-collapse: collapse;
background-color:#fff;
}
.tbl_demo1 th {
color: #393939;
border: 1px solid #83acd0;
padding: 5px;
background-color: #eaf1f7;
}
.tbl_demo1 td {
border: 1px solid #83acd0;
padding: 3px 10px;
}
<table class="tbl_demo1"> <tr><th>番号</th><th>氏名</th><th>得点</th></tr> <tr><th>1</th><td>山田</td><td>75点</td></tr> <tr><th>2</th><td>田中</td><td>80点</td></tr> <tr><th>3</th><td>広瀬</td><td>70点</td></tr> <tr><th>4</th><td>尾崎</td><td>85点</td></tr> <tr><th>5</th><td>吉村</td><td>100点</td></tr> </table>
+行を縞々に
| 番号 | 氏名 | 得点 |
|---|---|---|
| 1 | 山田 | 75点 |
| 2 | 田中 | 80点 |
| 3 | 広瀬 | 70点 |
| 4 | 尾崎 | 85点 |
| 5 | 吉村 | 100点 |
.tbl_demo2 {
border: 1px solid #83acd0;
border-collapse: collapse;
background-color:#fff;
}
.tbl_demo2 th {
color: #393939;
border: 1px solid #83acd0;
padding: 5px;
background-color: #eaf1f7;
}
.tbl_demo2 td {
border: 1px solid #83acd0;
padding: 3px 10px;
}
.tbl_demo2 tr:nth-child(odd) {
background-color: #eaf4ff;
}
<table class="tbl_demo2"> <tr><th>番号</th><th>氏名</th><th>得点</th></tr> <tr><th>1</th><td>山田</td><td>75点</td></tr> <tr><th>2</th><td>田中</td><td>80点</td></tr> <tr><th>3</th><td>広瀬</td><td>70点</td></tr> <tr><th>4</th><td>尾崎</td><td>85点</td></tr> <tr><th>5</th><td>吉村</td><td>100点</td></tr> </table>
+フォーカス時にセルの色を変更
| 番号 | 氏名 | 得点 |
|---|---|---|
| 1 | 山田 | 75点 |
| 2 | 田中 | 80点 |
| 3 | 広瀬 | 70点 |
| 4 | 尾崎 | 85点 |
| 5 | 吉村 | 100点 |
.tbl_demo3 {
border: 1px solid #83acd0;
border-collapse: collapse;
background-color:#fff;
}
.tbl_demo3 th {
color: #393939;
border: 1px solid #83acd0;
padding: 5px;
background-color: #eaf1f7;
}
.tbl_demo3 td {
border: 1px solid #83acd0;
padding: 3px 10px;
}
.tbl_demo3 tr:nth-child(odd) {
background-color: #eaf4ff;
}
.tbl_demo3 td:hover, .tbl_demo3 th:hover {
background: #83acd0;
}
<table class="tbl_demo3"> <tr><th>番号</th><th>氏名</th><th>得点</th></tr> <tr><th>1</th><td>山田</td><td>75点</td></tr> <tr><th>2</th><td>田中</td><td>80点</td></tr> <tr><th>3</th><td>広瀬</td><td>70点</td></tr> <tr><th>4</th><td>尾崎</td><td>85点</td></tr> <tr><th>5</th><td>吉村</td><td>100点</td></tr> </table>
+フォーカス時に行全体の色を変更
| 番号 | 氏名 | 得点 |
|---|---|---|
| 1 | 山田 | 75点 |
| 2 | 田中 | 80点 |
| 3 | 広瀬 | 70点 |
| 4 | 尾崎 | 85点 |
| 5 | 吉村 | 100点 |
.tbl_demo4 {
border: 1px solid #83acd0;
border-collapse: collapse;
background-color:#fff;
}
.tbl_demo4 th {
color: #393939;
border: 1px solid #83acd0;
padding: 5px;
background-color: #eaf1f7;
}
.tbl_demo4 td {
border: 1px solid #83acd0;
padding: 3px 10px;
}
.tbl_demo4 tr:nth-child(odd) {
background-color: #eaf4ff;
}
.tbl_demo4 tr:hover {
background: #83acd0;
}
<table class="tbl_demo4"> <tr><th>番号</th><th>氏名</th><th>得点</th></tr> <tr><th>1</th><td>山田</td><td>75点</td></tr> <tr><th>2</th><td>田中</td><td>80点</td></tr> <tr><th>3</th><td>広瀬</td><td>70点</td></tr> <tr><th>4</th><td>尾崎</td><td>85点</td></tr> <tr><th>5</th><td>吉村</td><td>100点</td></tr> </table>
+影をつける
| 番号 | 氏名 | 得点 |
|---|---|---|
| 1 | 山田 | 75点 |
| 2 | 田中 | 80点 |
| 3 | 広瀬 | 70点 |
| 4 | 尾崎 | 85点 |
| 5 | 吉村 | 100点 |
.tbl_demo4 {
border: 1px solid #83acd0;
border-collapse: collapse;
background-color:#fff;
}
.tbl_demo4 th {
color: #393939;
border: 1px solid #83acd0;
padding: 5px;
background-color: #eaf1f7;
}
.tbl_demo4 td {
border: 1px solid #83acd0;
padding: 3px 10px;
}
.tbl_demo4 tr:nth-child(odd) {
background-color: #eaf4ff;
}
.tbl_demo4 tr:hover {
background: #83acd0;
}
.tbl_shadow {
box-shadow:0px 0px 5px #ddd;
}
<table class="tbl_demo4 tbl_shadow"> <tr><th>番号</th><th>氏名</th><th>得点</th></tr> <tr><th>1</th><td>山田</td><td>75点</td></tr> <tr><th>2</th><td>田中</td><td>80点</td></tr> <tr><th>3</th><td>広瀬</td><td>70点</td></tr> <tr><th>4</th><td>尾崎</td><td>85点</td></tr> <tr><th>5</th><td>吉村</td><td>100点</td></tr> </table>