HTMLTableCellElement: rowSpan プロパティ

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

もっと詳しく
完全な互換性情報を見る

rowSpan は HTMLTableCellElement インターフェイスのプロパティで、このセルがまたがる行の数を表します。これにより、セルは表の複数の行にまたがって空間を占めることができるようになります。これは rowspan 属性に対応しています。

値

行の数を表す正の値。0の場合は、その列の残りすべての行です。

メモ: 新しい値を設定する際、0 以外の値は、最も近い正の数値に丸められます。

例

この例では、本文の最初のセルがまたがる行の数を変更するための 2 つのボタンが提供されています。

HTML

html

<table>
  <thead>
    <tr>
      <th>列 1</th>
      <th>列 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td rowspan="2">2</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>4</td>
    </tr>
  </tbody>
</table>
<button id="increase">rowspan を増やす</button>
<button id="decrease">rowspan を減らす</button>
<div>1 列目の 2 つ目のセルは <output>2</output> 行にまたがります。</div>

table {
  border-collapse: collapse;
}

th,
td,
table {
  border: 1px solid black;
}

button {
  margin: 1em 1em 1em 0;
}

JavaScript

// 要素に関連するインターフェイスを取得する
const row = document.querySelectorAll("tbody tr")[1];
const cell = row.cells[0];
const output = document.querySelectorAll("output")[0];

const increaseButton = document.getElementById("increase");
const decreaseButton = document.getElementById("decrease");

increaseButton.addEventListener("click", () => {
  cell.rowSpan += 1;

  // 表示を更新
  output.textContent = cell.rowSpan;
});

decreaseButton.addEventListener("click", () => {
  cell.rowSpan -= 1;

  // 表示を更新
  output.textContent = `${cell.rowSpan === 0 ? "all remaining" : cell.rowSpan}`;
});

結果

仕様書

仕様書
HTML # dom-tdth-rowspan

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって 2026年8月19日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告