列サイズが異なる HTML テーブルの作成
この記事では、仕様に合わせて HTML と CSS で列の幅を変更する方法について説明します。 HTML5 ではさまざまなタグやプロパティが廃止されたため、必要な機能を実現するための代替戦略について説明します。
このチュートリアルでは、インラインおよび内部 CSS を使用して HTML テーブルをカスタマイズする方法について説明します。
HTML テーブルの列のサイズを設定する
Web ページ用に複数の列と行を含むテーブルを作成する必要があることがよくあります。 HTML テーブルの列ごとに異なる幅が必要になることがあります。
幅の異なる列を持つテーブルを作成する方法を見てみましょう。 HTML5 より前は、table タグとそれに関連する <th> などのタグには、開発者が列の必要な幅を設定できる width プロパティがありました。
<html>
<head>
<style>
table, th, td {
border:1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th width="15%">ID</th>
<th width="70%">Name</th>
<th width="15%">Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jackson</td>
<td>40</td>
</tr>
</table>
</body>
</html>
上記の HTML コードでは、<th> タグ内で width プロパティを使用しています。 表の幅は 100% に設定されています。
Name 列を他の列よりも広くしたい。 したがって、幅 70% を Name 列に割り当て、15% を他の 2つの列にそれぞれ割り当てます。
70 + 15 + 17 = 100 のすべての数値を合計すると、再び 100 になります。
必要に応じて、テーブルの幅を任意のパーセンテージに設定できます。 この幅のパーセンテージは、<table> の親タグ (この場合は <body> タグ) に依存します。
HTML5 では、width プロパティは非推奨です。 HTML は非推奨の属性とタグをサポートしなくなりました。
HTML5 でのこの変更により、開発者は必要なスタイル設定に CSS を使用することが推奨されます。 CSS を使用してテーブルとその列幅を設定する方法を見てみましょう。
インライン CSS を使用して表の列幅を設定する
<th>, 内で width プロパティを使用できないため、インライン スタイルと呼ばれるタグ内のスタイルを使用してテーブルのスタイルを設定できます。 各列に異なる幅のパーセンテージを指定できます。
以下のコードを確認して、明確に理解してください。
<html>
<head>
<style>
table, th, td {
border:1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th style="width:10%">ID</th>
<th style="width:40%">First Name</th>
<th style="width:40%">Last Name</th>
<th style="width:10%">Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>Doe</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jackson</td>
<td>Will</td>
<td>40</td>
</tr>
</table>
</body>
</html>
上記のコードでは、10、40、40、および 10 の幅をパーセンテージで各列に割り当てます。 これらの数字を足すと100になります。
表の幅を 100% に設定したため、各列を同じ範囲で分割する必要があります。
内部 CSS を使用して表の列幅を設定する
上記のコードでは、インライン CSS を使用して列幅を設定しています。 ただし、複数の Web ページ領域で同じ機能が必要な場合は、多くの書き換えを行う必要があるため、インライン CSS はお勧めできません。
HTML コードと CSS コードを分離しておくことは、専門的な慣行です。 それでは、内部 CSS を使用して表の列をスタイルする方法を見てみましょう。
内部 CSS は、HTML の head タグ内の style タグ内に記述されます。
方法 1: CSS クラスを使用する
最も簡単な方法の 1つは、各 <th> タグにクラスを割り当ててから、style タグでスタイルを適用することです。 方法は次のとおりです。
<html>
<head>
<style>
table{
width: 100%
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
.name {
width: 70%
}
.id, .age {
width: 15%
}
</style>
</head>
<body>
<table>
<tr>
<th class="id">ID</th>
<th class="name">Name</th>
<th class="age">Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jackson</td>
<td>40</td>
</tr>
</table>
</body>
</html>
ものすごく単純。 右？ ただし、列数が多い場合、この方法は効率的ではありません。
10 列または 20 列のテーブルがあり、それぞれに異なる幅が必要だとします。 各タグにクラスを割り当て、それらすべてをスタイリングするのは大変な作業です。
タグにクラスを与えて style タグで直接呼び出さずに、これを行う方法がいくつかあるはずです。 次のメソッドでこの手法を見てみましょう。
方法 2: CSS 疑似クラス セレクターを使用する
より優れた効率的なコードを使用して、期待される出力を達成する別の方法を見てみましょう。
<html>
<head>
<style>
table{
width: 100%
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th:nth-child(1) {
width: 5%
}
th:nth-child(2) {
width: 70%
}
th:nth-child(3) {
width: 25%
}
</style>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jackson</td>
<td>40</td>
</tr>
</table>
</body>
</html>
コードで何をしたかを理解しましょう。 CSS セレクターは、すべての親の nth child 要素に一致します。
CSS 疑似クラス セレクター :nth-child(n) は、要素が兄弟のペアのどこにあるかに基づいて要素を比較するために使用されます。 n は、奇数や偶数などの任意の数字またはキーワードにすることができます。
style タグ内の <th> タグを選択し、nth-child セレクターを呼び出します。 nth-chid(1) は ID 列を選択することを意味し、nth-child(2) は Name 列を選択する、というようになります。
このようにして、各タグにクラスを割り当てることなく、列の幅をカスタマイズできます。
ここでもう 1つ重要な点は、ID 列と Age 列の幅を指定する場合、残りの幅が自動的に割り当てられるため、Name 列の幅のパーセンテージを選択する必要がないことです。 同じ結果が得られます。
以下の例を確認してください。
<html>
<head>
<style>
table{
width: 100%
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th:nth-child(1) {
width: 5%
}
th:nth-child(3) {
width: 25%
}
</style>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jackson</td>
<td>40</td>
</tr>
</table>
</body>
</html>