【HTML Living Standard】col要素の使い方
col要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
col要素は、HTMLのテーブル内で列グループの共通のプロパティを定義するために使用される要素です。主に<table>要素の内部で、<caption>、<thead>、<tbody>、<tfoot>、<tr>の前に配置されるcolgroup要素の子要素として使用されます。この要素を用いることで、一つまたは複数の列に対して、幅やスタイルといった共通の属性を一括で設定することができます。
col要素自体は内容を持たない空要素であり、視覚的なコンテンツを直接表示することはありません。その主な役割は、テーブルの構造をセマンティックに定義し、スタイルシート（CSS）による装飾を容易にすることです。例えば、特定の列の幅を統一したい場合や、背景色などのスタイルを複数の列に適用したい場合にcol要素を利用すると、各セル（<td>や<th>）に個別にスタイルを適用するよりも、コードの管理がしやすくなります。
span属性を指定することで、col要素が適用される列の数を定義できます。この属性のデフォルト値は1であり、指定がない場合は単一の列にのみ効果があります。複数の列にわたる設定を行う場合は、span="2"のように数値を指定します。これにより、テーブルのレイアウトにおける柔軟性が向上し、保守性の高いHTML構造を実現できます。
構文(syntax)
1<col span="数値">
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML col要素でテーブル列をカラーリングする
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>col要素を使ったテーブルの列のカラーリング例</title> 7 <style> 8 /* CSSでテーブルの列にスタイルを適用するためのクラス定義 */ 9 /* 1列目の背景色 */ 10 .column-primary { 11 background-color: #e0f2f7; /* 薄い水色 */ 12 } 13 /* 2列目の背景色 */ 14 .column-secondary { 15 background-color: #fce4ec; /* 薄いピンク */ 16 } 17 /* 3列目の背景色 */ 18 .column-tertiary { 19 background-color: #e8f5e9; /* 薄い緑色 */ 20 } 21 22 /* テーブルの基本スタイル */ 23 table { 24 width: 80%; /* テーブルの幅を80%に設定 */ 25 border-collapse: collapse; /* セルの境界線を結合 */ 26 margin: 20px auto; /* 上下20px、左右中央揃え */ 27 border: 1px solid #ccc; /* テーブル全体の外枠 */ 28 } 29 30 /* ヘッダとデータセルの基本スタイル */ 31 th, td { 32 border: 1px solid #ddd; /* セルの境界線 */ 33 padding: 8px 12px; /* セル内の余白 */ 34 text-align: left; /* テキストを左寄せ */ 35 } 36 37 /* ヘッダのスタイル */ 38 th { 39 background-color: #f2f2f2; /* ヘッダの背景色 */ 40 font-weight: bold; /* フォントを太字に */ 41 } 42 </style> 43</head> 44<body> 45 <h1>製品データ一覧</h1> 46 47 <table> 48 <!-- colgroup要素で列のグループを定義し、その中にcol要素を配置します --> 49 <!-- col要素は、テーブルの列にCSSクラスやスタイルを適用するために使用されます。 --> 50 <colgroup> 51 <!-- 1列目に適用されるスタイル --> 52 <col class="column-primary"> 53 <!-- 2列目に適用されるスタイル --> 54 <col class="column-secondary"> 55 <!-- 3列目に適用されるスタイル --> 56 <col class="column-tertiary"> 57 <!-- 4列目には特定のスタイルは適用しません --> 58 <col> 59 </colgroup> 60 <thead> 61 <tr> 62 <th>ID</th> 63 <th>製品名</th> 64 <th>価格</th> 65 <th>在庫数</th> 66 </tr> 67 </thead> 68 <tbody> 69 <tr> 70 <td>101</td> 71 <td>ノートPC A</td> 72 <td>120,000円</td> 73 <td>50</td> 74 </tr> 75 <tr> 76 <td>102</td> 77 <td>スマートフォン B</td> 78 <td>80,000円</td> 79 <td>120</td> 80 </tr> 81 <tr> 82 <td>103</td> 83 <td>タブレット C</td> 84 <td>50,000円</td> 85 <td>75</td> 86 </tr> 87 <tr> 88 <td>104</td> 89 <td>スマートウォッチ D</td> 90 <td>30,000円</td> 91 <td>200</td> 92 </tr> 93 </tbody> 94 </table> 95</body> 96</html>
HTMLのcol要素は、テーブルの特定の列全体にスタイルを適用するために使用される要素です。この要素は単独では使用されず、必ず親要素である<colgroup>要素の中に配置されます。<colgroup>はテーブルの列をグループ化する役割を持ち、その中のcol要素を通じて、CSSで定義したスタイルを特定の列に一括で適用することができます。
このサンプルコードでは、<colgroup>要素内に複数のcol要素を配置し、それぞれのcol要素に異なるCSSクラス（column-primary、column-secondary、column-tertiary）を指定しています。これにより、1列目には薄い水色、2列目には薄いピンク、3列目には薄い緑色といった具合に、テーブルの各列に異なる背景色が適用されています。col要素自体はコンテンツを持たず、引数や戻り値も存在しません。これは、col要素がプログラミング言語の関数とは異なり、HTML文書の構造の一部として、テーブルの列にスタイルを適用するための「マーカー」として機能するためです。システムエンジニアを目指す方にとって、テーブルの見た目を効率的に制御し、HTMLの構造とCSSの装飾を分離する原則を学ぶ上で重要な要素となります。
col要素はテーブルの列全体にスタイルを適用する目的で、<table>タグ直下のcolgroup要素内に配置する必要があります。<thead>や<tbody>よりも前に記述する点が重要です。この要素が直接サポートするCSSプロパティはwidthなどに限定されており、background-colorのようなプロパティはcol要素自体には適用されません。サンプルコードではcol要素にクラスを付与し、CSSで背景色を設定していますが、これはブラウザの解釈により列全体に色が適用されたように見えるものです。より厳密に、または確実に列のスタイルを制御したい場合は、各セル（<th>や<td>）にスタイルを適用したり、JavaScriptを用いて動的にスタイルを設定したりする方法も検討すると良いでしょう。
col要素で列スタイル指定とcolspanでセル結合する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>col要素とcolspan属性のサンプル</title> 7 <style> 8 /* テーブル全体の基本的なスタイルを設定 */ 9 table { 10 width: 80%; /* テーブルの幅 */ 11 border-collapse: collapse; /* セルの境界線を結合 */ 12 margin: 20px 0; /* テーブルの上下に余白 */ 13 } 14 /* ヘッダーセルとデータセルのスタイル設定 */ 15 th, td { 16 border: 1px solid #ccc; /* セルの境界線 */ 17 padding: 8px; /* セル内の余白 */ 18 text-align: left; /* テキストを左寄せ */ 19 } 20 /* ヘッダーセルの背景色 */ 21 th { 22 background-color: #f2f2f2; 23 } 24 /* col要素によって特定の列に適用されるスタイル */ 25 /* このクラスが適用された列の背景色を変更 */ 26 .highlight-col { 27 background-color: #e0f7fa; 28 } 29 </style> 30</head> 31<body> 32 33 <table> 34 <!-- colgroup要素でテーブルの列のグループを定義 --> 35 <!-- col要素を使用して、各列にスタイルを適用したり、構造を定義したりします --> 36 <!-- このテーブルは合計3列を持つことを想定しています --> 37 <colgroup> 38 <!-- 1列目: 特別なスタイルは適用しない --> 39 <col> 40 <!-- 2列目: 'highlight-col' クラスを適用し、背景色を変更 --> 41 <col class="highlight-col"> 42 <!-- 3列目: 特別なスタイルは適用しない --> 43 <col> 44 </colgroup> 45 <thead> 46 <tr> 47 <th>地域</th> 48 <th>製品A</th> 49 <th>製品B</th> 50 </tr> 51 </thead> 52 <tbody> 53 <tr> 54 <td>東日本</td> 55 <td>100</td> 56 <td>50</td> 57 </tr> 58 <tr> 59 <!-- colspan="2" を使用して、このセルが2つの列を結合するように指定 --> 60 <!-- このセルは「製品A」と「製品B」の列を結合して「合計」を表示 --> 61 <td colspan="2">西日本 (製品Aと製品Bの合計)</td> 62 <td>120</td> 63 </tr> 64 <tr> 65 <td>九州</td> 66 <td>70</td> 67 <!-- colspan="2" を使用して、このセルが2つの列を結合するように指定 --> 68 <!-- このセルは「製品A」と「製品B」の列を結合して「未定」を表示 --> 69 <td colspan="2">データ未定</td> 70 </tr> 71 </tbody> 72 </table> 73 74</body> 75</html>
HTMLのcol要素とcolspan属性について説明します。
col要素は、HTMLのテーブルにおいて、特定の列（カラム）全体に対してスタイルを適用したり、構造的な定義を行うために使用される要素です。この要素自体は直接画面に表示されるわけではなく、<table>要素内に配置されるcolgroup要素の中に記述します。col要素には引数や戻り値はありません。サンプルコードでは、2番目のcol要素にclass="highlight-col"を指定することで、その列全体の背景色を薄い水色に設定しています。このように、特定の列全体にまとめてスタイルを適用したい場合に、col要素を使うことで簡潔に設定できます。
一方、colspan属性は、テーブルのデータセル<td>やヘッダーセル<th>に指定する属性です。この属性を使用すると、そのセルが指定した数の列にまたがって表示されるように（複数の列を結合して）設定できます。属性値には、結合したい列の数を数値で指定します。サンプルコードでは、「西日本 (製品Aと製品Bの合計)」や「データ未定」のセルにcolspan="2"が指定されており、それぞれ2つの列を結合して表示しています。
col要素とcolspan属性を適切に組み合わせることで、テーブルの視覚的な整理やレイアウトの調整を柔軟に行い、ユーザーにとって見やすい情報を提供できます。
col要素はcolgroup要素内に配置し、テーブルの列全体に対してスタイルを適用したり、構造を定義したりするために用います。これはテーブルの列の見た目や振る舞いを一括で設定したい場合に便利です。一方、colspan属性は<td>や<th>要素に記述し、そのセルが水平方向に複数の列を結合する際に使用します。例えば、サンプルコードのように「合計」などの情報を複数の製品列にまたがって表示したい場合に活用できます。これら二つは名前が似ていますが、colは列の定義、colspanはセルの結合と役割が明確に異なりますので、混同しないよう注意してください。colspanでセルを結合した場合、その行の列数が変わるため、他の行と列数を合わせるには、結合した分のセルを省略する必要があります。テーブルの構造を複雑にしすぎると、アクセシビリティが低下する可能性もあるため、シンプルで意味の通じる設計を心がけましょう。