CSSテーブルスタイル
テーブルパディング
表の境界線とコンテンツの間のスペースを制御するには、
padding<td>要素と<th>要素のプロパティを使用します。
例
th, td
{
padding: 15px;
text-align: left;
}
水平分周器
| ファーストネーム | 苗字 | 貯蓄 |
|---|---|---|
| ピーター | グリフィン | 100ドル |
| ロイス | グリフィン | 150ドル |
| ジョー | スワンソン | 300ドル |
border-bottom水平分割の<th>と<td>にプロパティを追加します。
例
th, td {
border-bottom: 1px solid #ddd;
}
ホバー可能なテーブル
:hover<tr>のセレクターを使用して、マウスオーバーでテーブルの行を強調表示します。
| ファーストネーム | 苗字 | 貯蓄 |
|---|---|---|
| ピーター | グリフィン | 100ドル |
| ロイス | グリフィン | 150ドル |
| ジョー | スワンソン | 300ドル |
例
tr:hover {background-color: yellow;}
縞模様のテーブル
| ファーストネーム | 苗字 | 貯蓄 |
|---|---|---|
| ピーター | グリフィン | 100ドル |
| ロイス | グリフィン | 150ドル |
| ジョー | スワンソン | 300ドル |
ゼブラストライプテーブルの場合は、nth-child()セレクターを使用してbackground-color、すべての偶数（または奇数）テーブル行にを追加します。
例
tr:nth-child(even) {background-color: #f2f2f2;}
テーブルの色
次の例では、<th>要素の背景色とテキスト色を指定しています。
| ファーストネーム | 苗字 | 貯蓄 |
|---|---|---|
| ピーター | グリフィン | 100ドル |
| ロイス | グリフィン | 150ドル |
| ジョー | スワンソン | 300ドル |
例
th {
background-color: #04AA6D;
color: white;
}