HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのcolspan属性とは？td・th要素での使い方をわかりやすく解説

HTMLのcolspan属性は、テーブル内で1つのセルが横方向にまたぐ列数を指定するための属性です。<td>要素または<th>要素に対して使用することができます。

<td>要素のcolspan属性

<td>要素のcolspan属性は、データセルがまたぐ列数を定義します。例えば「colspan="2"」と指定すると、そのセルは2列分の幅を持つようになります。合計金額の行など、複数列をひとつにまとめたい場合に活用できます。

構文は以下の通りです。

<td colspan="num">

上記の「num」には、セルがまたぐ列数を指定します。それでは、<td>要素のcolspan属性を実装した具体例を見てみましょう。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
   border: 2px solid blue;
}
</style>
</head>
<body>
<h2>Product Expenses</h2>
<table>
   <tr>
      <th>Domains</th>
      <th>Cost</th>
   </tr>
   <tr>
      <td>Product Development</td>
      <td>500000</td>
   </tr>
   <tr>
      <td>Marketing</td>
      <td>500000</td>
   </tr>
   <tr>
      <td>Services</td>
      <td>100000</td>
   </tr>
   <tr>
      <td>Support</td>
      <td>100000</td>
   </tr>
   <tr>
      <td>Maintenance</td>
      <td>100000</td>
   </tr>
   <tr>
      <td colspan="2">Total Budget = INR 1300000</td>
   </tr>
</table>
</body>
</html>

実行結果

HTMLのcolspan属性とは？td・th要素での使い方をわかりやすく解説

この例では、最終行の「Total Budget」セルにcolspan="2"を指定しているため、「Domains」と「Cost」の2列分にまたがって表示されています。

<th>要素のcolspan属性

<th>要素のcolspan属性は、見出しセル（ヘッダーセル）がまたぐ列数を設定するために使用します。表全体のタイトルやカテゴリ名など、複数列にまたがる見出しを作成したい場合に特に便利です。

構文は以下の通りです。

<th colspan="num">

上記の「num」には、見出しセルがまたぐ列数を指定します。

続いて、<th>要素のcolspan属性を実装した具体例を見てみましょう。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
   border: 2px solid green;
}
</style>
</head>
<body>
<h2>Product Expenses</h2>
<table>
   <tr>
      <th colspan="2">Expenses</th>
   </tr>
   <tr>
      <td>Product Development</td>
      <td>500000</td>
   </tr>
   <tr>
      <td>Marketing</td>
      <td>500000</td>
   </tr>
   <tr>
      <td>Services</td>
      <td>100000</td>
   </tr>
   <tr>
      <td>Support</td>
      <td>100000</td>
   </tr>
   <tr>
      <td>Maintenance</td>
      <td>100000</td>
   </tr>
   <tr>
      <td colspan="2">Total Budget = INR 1300000</td>
   </tr>
</table>
</body>
</html>

実行結果

HTMLのcolspan属性とは？td・th要素での使い方をわかりやすく解説

この例では、先頭行の見出し「Expenses」にcolspan="2"を指定することで、下の2列（項目名と金額）にまたがる見出しとして表示されています。

まとめ

colspan属性を使いこなすことで、合計行やグループ見出しなど、レイアウトの自由度が高いテーブルを作成できます。なお、縦方向（行）にセルをまたぎたい場合は、同じ要領でrowspan属性を使用します。両者を組み合わせれば、より複雑な表組みも柔軟に表現できるので、ぜひ覚えておきましょう。


  1. HTMLのhidden属性とは？要素を非表示にする方法とサンプルコード

    HTMLのhidden属性は、その属性が付与された要素が現時点ではドキュメントに関連していないこと、つまりユーザーに表示すべきではないことをブラウザへ伝えるための属性です。hidden属性が指定された要素は、画面上に表示されなくなります。 hidden属性は論理型（ブーリアン）の属性なので、「hidden」と記述するだけで機能します。また、JavaScriptから element.hidden = false のように値を操作することで、条件に応じて動的に表示・非表示を切り替えることも可能です。 それでは、hidden属性を使った具体例を見ていきましょう。次のサンプルでは、テキストボックスに

  2. HTMLのlang属性とは？使い方と言語コードの指定方法を解説

    HTMLのlang属性は、そのHTML要素の内容がどの言語で書かれているかを定義するための属性です。lang属性はグローバル属性に分類されるため、すべてのHTML要素に対して自由に指定することができます。検索エンジン最適化（SEO）やスクリーンリーダーによる音声読み上げの正確性向上にも役立つ重要な属性なので、適切な言語コードを設定しておきましょう。基本構文lang属性の基本的な記述方法は以下のとおりです。<タグ名 lang=言語コード></タグ名>「言語コード」の部分には、ISO 639-1で規定されている言語コードを指定します。代表的な例としては、日本語ならja、英語