CSS 表格の枠線設定
この記事では、CSS を使用して表の枠線を設定する方法について詳しく説明します。表にさまざまなスタイルの枠線を設定したり、枠線の太さ、色、およびセル枠線の結合を制御したりするテクニックを紹介します。
1. 表に枠線を設定する
内容:
border プロパティを使用して、表、セル、および見出しに枠線のスタイル、太さ、および色を設定します。border プロパティは、border-width、border-style、および border-color を同時に設定できる省略形です。
例:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Border Example</title>
<style>
table {
border: 2px solid black;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>見出し1</th>
<th>見出し2</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ1</td>
<td>データ2</td>
</tr>
</tbody>
</table>
</body>
</html>2. 枠線の太さ、スタイル、および色を制御する
内容:
border-width、border-style、および border-color プロパティを使用して、枠線の太さ、スタイル、および色をそれぞれ制御します。border-style プロパティで設定できるスタイルには、solid、dotted、dashed、double、groove、ridge、inset、および outset があります。
例:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Border Style Example</title>
<style>
table {
border: 3px dashed red;
border-collapse: collapse;
}
th, td {
border: 2px dotted blue;
padding: 10px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>見出し1</th>
<th>見出し2</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ1</td>
<td>データ2</td>
</tr>
</tbody>
</table>
</body>
</html>
3. 表の異なる辺に異なるスタイルを設定する
内容:
border-top、border-right、border-bottom、および border-left プロパティを使用して、表の異なる辺に異なる枠線のスタイルを設定します。これらのプロパティは、border-top: 1px solid red; などの省略形もサポートしています。
例:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Different Border Example</title>
<style>
table {
border-top: 3px solid green;
border-right: 3px dashed orange;
border-bottom: 3px dotted purple;
border-left: 3px double gray;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>見出し1</th>
<th>見出し2</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ1</td>
<td>データ2</td>
</tr>
</tbody>
</table>
</body>
</html>
4. 隣接するセルの枠線を結合する
内容:
border-collapse プロパティを使用して、表の枠線を単一の枠線に結合します。border-collapse プロパティには、collapse（枠線を結合する）と separate（枠線を分離する、デフォルト値）の 2 つの値があります。
例:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Border Collapse Example</title>
<style>
table {
border: 2px solid black;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>見出し1</th>
<th>見出し2</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ1</td>
<td>データ2</td>
</tr>
</tbody>
</table>
</body>
</html>
5. セル間隔を設定する
内容:
border-spacing プロパティを使用して、隣接するセル枠線間の距離を設定します。このプロパティは、border-collapse プロパティが separate に設定されている場合にのみ有効です。
例:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Border Spacing Example</title>
<style>
table {
border: 2px solid black;
border-spacing: 10px;
border-collapse: separate;
}
th, td {
border: 1px solid black;
padding: 8px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>見出し1</th>
<th>見出し2</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ1</td>
<td>データ2</td>
</tr>
</tbody>
</table>
</body>
</html>
よくある質問
Q1: border-collapse: collapse; を設定しても、セルの間に隙間ができてしまいます。
A1: セル間に隙間ができる場合は、セル自身にパディングが設定されている可能性があります。td { padding: 0; } のように、セルにパディングを設定しないようにしてください。
Q2: 特定のセルの枠線だけスタイルを変更するにはどうすればよいですか？
A2: 特定のセルを選択するために、クラスや ID を使用します。例えば、<td class="special"> のようにクラスを設定し、CSS で .special { border: 2px dashed red; } のように指定します。
Q3: border-style で設定できるスタイルには、他にどのようなものがありますか？
A3: solid、dotted、dashed、double、groove、ridge、inset、outset の他に、hidden、none も設定可能です。 hidden は枠線を非表示にしますが、border-collapse が collapse の場合は隣接する枠線に影響を与えます。none は枠線を完全に削除します。