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

HTMLのrowspan属性とは？テーブルセルの行結合の使い方を解説

HTMLのrowspan属性は、表（テーブル）のセルが縦方向にまたぐ行数を指定するための属性です。この属性を使用することで、複数の行にまたがるセルを作成でき、より柔軟なテーブルレイアウトを実現できます。

rowspan属性を適用できるのは、td要素またはth要素のみです。それ以外のHTML要素には使用できない点に注意しましょう。

rowspan属性の構文

rowspan属性の基本的な構文は以下のとおりです。

<タグ名 rowspan="数値"></タグ名>

「数値」には、セルがまたぐ行数を整数で指定します。たとえば「rowspan="2"」と指定すると、そのセルは2行分の高さを持つことになります。

rowspan属性の使用例

ここでは、実際にrowspan属性を使ったHTMLのサンプルコードを見てみましょう。以下の例では、「Elon」という名前のセルが2行にまたがって表示されます。

サンプルコード

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        background: lightblue;
        height: 100vh;
        text-align: center;
    }
    table {
        margin: 2rem auto;
        width: 400px;
    }
</style>
<body>
<h1>HTML rowspan Attribute Demo</h1>
<table border="2">
<thead>
<tr>
<th>Name</th>
<th>Language</th>
</tr>
<thead>
<tbody>
<tr>
<td>John</td>
<td>English</td>
</tr>
<tr>
<td rowspan="2">Elon</td>
<td>Germany</td>
</tr>
<tr>
<td>French</td>
</tr>
</tbody>
</table>
</body>
</html>

出力結果

上記のコードをブラウザで表示すると、次のようなテーブルが出力されます。

HTMLのrowspan属性とは？テーブルセルの行結合の使い方を解説

この例では、2行目の「Elon」セルに「rowspan="2"」が指定されているため、「Germany」と「French」の2行にまたがって表示されています。これにより、同じ人物が複数の言語を話す場合などに、名前を繰り返し記述せずに済み、テーブルがすっきりと整理されます。

まとめ

rowspan属性は、テーブルのセルを縦方向に結合したいときに便利な属性です。td要素・th要素でのみ使用可能であり、またぐ行数を数値で指定します。横方向にセルを結合したい場合はcolspan属性を使用するので、両者を上手に組み合わせると、複雑な表も見やすく作成できます。

  1. HTMLのwrap属性とは？textareaのテキスト折り返し設定を解説

    wrap属性とは HTMLのwrap属性は、<textarea>要素内のテキストを、フォーム送信時にどのように折り返すかを定義する属性です。画面上での見た目だけでなく、サーバーへ送信されるデータに改行コードを含めるかどうかを制御できる点が特徴です。 指定できる値 soft：画面上では自動的に折り返して表示されますが、送信されるテキストには改行コードが挿入されません（デフォルト値）。 hard：画面上の折り返し位置に基づいて、フォーム送信時に改行コードが挿入されます。この値を使用する場合はcols属性の指定が必須です。 構文 wrap属性の基本的な書き方は以下のとおりです。

  2. HTMLのdraggable属性とは？使い方とサンプルコードを解説

    HTMLのdraggable属性とはHTML DOMのdraggable属性は、要素がドラッグ可能かどうかを示す真偽値（boolean）を取得・設定するための属性です。この属性を活用することで、ドラッグ＆ドロップ操作に対応したインタラクティブなWebページを簡単に実装できます。注意：リンク（<a>タグ）や画像（<img>タグ）は、デフォルトでドラッグ可能に設定されています。draggable属性に指定できる値true … 要素をドラッグ可能にするfalse … 要素をドラッグ不可にするauto … ブラウザのデフォルト動作に従うHTML draggable属性の使用例以