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

HTMLのタグで使うcolspan属性とは？使い方をサンプルコード付きで解説

HTMLの<td>要素に設定できるcolspan属性は、テーブル内の1つのセルが横方向に何列分またがって表示されるか（セルを結合するか）を指定するための属性です。

例えば、表の最終行に「合計」行を作りたい場合など、複数の列をまとめて1つのセルとして表示したいときに非常に便利です。

colspan属性の基本構文

<td colspan="num">

上記の「num」には、セルがまたがる列の数を整数で指定します。たとえば「2」を指定すれば、そのセルは2列分の幅を持つことになります。

colspan属性の実装例

それでは、<td>要素のcolspan属性を使った具体的なコード例を見てみましょう。以下は、プロダクトの経費一覧表の最後に、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>

コードのポイント

  • 最後の行では、<td colspan="2">と指定することで、「Domains」と「Cost」の2つの列をまたいだ1つのセルを作成しています。
  • これにより、合計金額の情報が表の幅全体にわたって自然に表示され、見やすいレイアウトになります。

表示結果

HTMLの td タグで使うcolspan属性とは？使い方をサンプルコード付きで解説

このように、colspan属性を使うことで、表のセルを柔軟に結合でき、合計行や見出し行など、より読みやすく整理されたテーブルを作成できます。

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

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

  2. HTMLのreversed属性とは？ol要素でリストを降順に表示する方法

    HTMLのreversed属性は、<ol>（順序付きリスト）要素に指定することで、リスト項目の番号を降順（大きい数字から小さい数字へ）で表示させるためのブール型属性です。通常、順序付きリストは「1」から始まる昇順で番号が振られますが、reversed属性を追加するだけで、マークアップをほとんど変更せずに逆順のリストを簡単に作成できます。 構文 reversed属性の基本的な構文は以下のとおりです。 <ol reversed></ol> 値を指定する必要はなく、属性名だけを記述すれば有効になります。それでは、実際にreversed属性を使用した具体例を見てみま