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

HTML DOM TableData rowSpanプロパティとは？構文と使い方をわかりやすく解説

HTML DOMのTableData rowSpanプロパティは、HTMLドキュメント内のテーブルセル（<td>要素）に対して、rowspan属性の値を取得・変更するためのプロパティです。rowspan属性を利用すると、1つのセルを複数の行にまたがって表示でき、複雑なテーブルレイアウトも簡単に実現できます。

構文

rowSpanプロパティの基本的な構文は以下のとおりです。

1. rowSpanの値を取得する場合

object.rowSpan

2. rowSpanの値を設定する場合

object.rowSpan = "number"

設定できる値は正の整数です。たとえば「2」を指定すると、そのセルは2行分の高さを持つようになります。

それでは、rowSpanプロパティの具体的な使用例を見ていきましょう。

使用例

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        background: lightblue;
        height: 100vh;
        text-align: center;
    }
    table {
        margin: 2rem auto;
        width: 400px;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
        margin: 1rem auto;
    }
</style>
<body>
<h1>DOM TableData rowSpan プロパティ デモ</h1>
<table border="2">
<thead>
<tr>
<th>名前</th>
<th>言語</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>英語</td>
</tr>
<tr>
<td id="elon">Elon</td>
<td>ドイツ語</td>
</tr>
<tr>
<td>フランス語</td>
</tr>
</tbody>
</table>
<button onclick="get()" class="btn">Elonを結合</button>
<script>
    function get() {
        document.querySelector('#elon').rowSpan = "2";
    }
</script>
</body>
</html>

このコードをブラウザで実行すると、次のような画面が表示されます。

HTML DOM TableData rowSpanプロパティとは？構文と使い方をわかりやすく解説

「Elonを結合」ボタンをクリックすると、JavaScriptによってid="elon"のセルのrowSpanが「2」に設定され、Elonの名前セルが2行にまたがって表示されます。

HTML DOM TableData rowSpanプロパティとは？構文と使い方をわかりやすく解説

押さえておきたいポイント

  • rowSpanプロパティは、<td>要素だけでなく<th>要素にも適用できます。
  • 値の取得・設定どちらの場合も、数値（文字列形式）として扱われます。
  • ボタン操作などのイベントに応じてrowSpanを動的に変更すれば、インタラクティブなテーブルを作成できます。
  • Chrome、Firefox、Safari、Edgeなど、主要なブラウザすべてで問題なく動作します。
  1. HTML DOM textContentプロパティの使い方を徹底解説

    HTML DOMのtextContentプロパティは、ノードおよびそのすべての子ノードが持つテキスト（空白文字を含む）に対応する文字列を、取得・設定できるプロパティです。JavaScriptでDOM操作を行う際に、要素内のテキストを簡単に扱うために広く利用されています。textContentプロパティの構文文字列値の取得Node.textContent戻り値は以下のいずれかになります。documentノードの場合は「null」指定したノードとそのすべての子ノードのテキスト文字列値の設定Node.textContent = string注意： textContentプロパティに値を設定すると、ノ

  2. HTML DOM Ol typeプロパティとは？順序付きリストのマーカー種類を変更する方法

    HTML DOM の Ol type プロパティは、順序付きリスト（<ol> 要素）で使用されるマーカーの種類に対応する type 属性の値を、取得または設定するためのプロパティです。このプロパティを使うことで、JavaScript から動的にリストの番号スタイル（数字、アルファベット、ローマ数字など）を変更できます。 Ol type プロパティの構文 type プロパティの値を取得する場合 olObject.type type プロパティに値を設定する場合 olObject.type = 1|a|A|i|I; type 属性には以下の5種類の値を指定できます。 1 … 数字（1