CSS nth-of-typeセレクタの使い方
2024-04-02
CSS を使った代替テーブル行の色付け
このチュートリアルでは、CSS を使って HTML テーブルの代替行に色を付けする方法を学びます。これは、テーブルの見やすさを向上させ、データを読みやすくするための効果的な方法です。
必要なもの
- HTML ファイル
- CSS ファイル
- テキストエディタ
手順
- HTML ファイルを作成し、以下のコードを追加します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>代替行の色付け</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<table>
<tr>
<th>名前</th>
<th>年齢</th>
<th>出身地</th>
</tr>
<tr>
<td>山田太郎</td>
<td>20</td>
<td>東京</td>
</tr>
<tr>
<td>佐藤花子</td>
<td>25</td>
<td>大阪</td>
</tr>
<tr>
<td>田中一郎</td>
<td>30</td>
<td>京都</td>
</tr>
</table>
</body>
</html>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 5px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
- ファイルを保存し、ブラウザで開きます。
解説
tableセレクタは、テーブル全体にスタイルを適用します。widthプロパティは、テーブルの幅を設定します。border-collapseプロパティは、テーブルの境界線を隣接するセルの境界線と結合します。thおよびtdセレクタは、テーブルの見出しとデータセルにスタイルを適用します。borderプロパティは、セルの境界線のスタイルを設定します。paddingプロパティは、セルの内側の余白を設定します。tr:nth-child(even)セレクタは、偶数番目の行を選択します。background-colorプロパティは、行の背景色を設定します。
応用
- さまざまな色を使用して、奇数行と偶数行を区別できます。
- ストライプ模様を作成するために、背景画像を使用できます。
- ホバー効果を使用して、行が選択されたときに色を変えることができます。
注意
このチュートリアルは、CSS を使った代替テーブル行の色付けの基本的な方法を紹介しています。より複雑なスタイルを作成するには、さらに CSS の知識が必要となります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>代替行の色付け</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<table>
<tr>
<th>名前</th>
<th>年齢</th>
<th>出身地</th>
</tr>
<tr>
<td>山田太郎</td>
<td>20</td>
<td>東京</td>
</tr>
<tr>
<td>佐藤花子</td>
<td>25</td>
<td>大阪</td>
</tr>
<tr>
<td>田中一郎</td>
<td>30</td>
<td>京都</td>
</tr>
</table>
</body>
</html>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 5px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
このコードを保存し、ブラウザで開くと、以下のようになります。
改良点
- 表の幅を調整しました。
- 奇数行と偶数行の背景色を異なる色にしました。
このコードはサンプルであり、必要に応じて変更する必要があります。
代替行の色付けの他の方法
JavaScript を使用して、テーブルの各行をループ処理し、偶数番目の行の背景色を設定することができます。
const table = document.querySelector('table');
for (let i = 1; i < table.rows.length; i++) {
if (i % 2 === 0) {
table.rows[i].style.backgroundColor = '#f2f2f2';
}
}
HTML 属性
bgcolor 属性を使用して、個々の行の背景色を設定することができます。
<tr>
<td bgcolor="#f2f2f2">山田太郎</td>
<td>20</td>
<td>東京</td>
</tr>
CSS クラス
even という CSS クラスを作成し、偶数番目の行に適用することができます。
<tr>
<td class="even">山田太郎</td>
<td>20</td>
<td>東京</td>
</tr>
CSS nth-of-type セレクタ
nth-of-type セレクタを使用して、偶数番目の行を選択することができます。
tr:nth-of-type(even) {
background-color: #f2f2f2;
}
これらの方法はすべて、代替行に色を付けるための有効な手段です。どの方法を使用するかは、プロジェクトの要件と個人的な好みによって異なります。
これらの方法は、ブラウザの互換性を考慮する必要があります。古いブラウザでは、すべての方法がサポートされない場合があります。
html css html-table
