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

HTMLでテーブルセルがまたがる行数を設定する方法（rowspan属性の使い方）

HTMLのテーブルでセルがまたがる行数を設定するには、rowspan属性を使用します。また、HTMLでセルを結合する場合には、colspan属性とrowspan属性を組み合わせて使います。

それぞれの属性の役割は以下のとおりです。

  • rowspan属性：セルが縦方向にまたがる行数を指定します。
  • colspan属性：セルが横方向にまたがる列数を指定します。

たとえば「rowspan="2"」と指定すると、そのセルは2行分の高さを占め、下の行の同じ位置にセルを記述する必要がなくなります。

コード例

以下の例では、1行目の見出しセルでcolspan="2"により2列分を結合し、2行目のデータセルでrowspan="2"により2行分を結合しています。

<!DOCTYPE html>
<html>
<head>
  <style>
    table, th, td {
      border: 1px solid black;
      width: 100px;
      height: 50px;
    }
  </style>
</head>

<body>
  <h1>見出し</h1>
  <table>
    <tr>
      <th colspan = "2"></th>
      <th></th>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td rowspan = "2"></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
    </tr>
  </table>
</body>
</html>

ポイント

  • rowspanやcolspanでセルを結合した場合は、結合された分だけ後続の行・列のセル数を調整しないと、表のレイアウトが崩れるので注意してください。
  • rowspan属性とcolspan属性は、<td>要素だけでなく<th>要素にも使用できます。
  • 値には1以上の整数を指定します（rowspan="0"を指定した場合、一部のブラウザでは表の最終行まで結合される仕様でしたが、HTML5では非推奨となっています）。

  1. HTMLでテーブルの列を結合する方法｜colspan属性の使い方を解説

    HTMLでテーブルの列を結合（マージ）するには、<td>タグにcolspan属性を使用します。この属性を指定することで、隣接するセル同士を横方向にまとめることができます。 例えば、4行4列のテーブルがある場合でも、colspan属性を使えば、2つや3つのセルを簡単に結合できます。 例1：基本となるテーブルを作成する まずは、colspan属性を使う前の状態として、3行3列のシンプルなテーブルをHTMLで作成してみましょう。 <!DOCTYPE html> <html>    <head>     &nbs

  2. HTMLでテーブルのセルを結合する方法：colspanとrowspanの使い方

    HTMLでテーブルのセルを結合するには、colspan属性とrowspan属性を使用します。それぞれの役割は以下の通りです。rowspan属性：セルが縦方向（行）にまたがる行数を指定しますcolspan属性：セルが横方向（列）にまたがる列数を指定しますどちらの属性も<td>タグ内に記述し、値は数値で指定します。例えば、rowspan=2と指定すれば2行分、colspan=2と指定すれば2列分のセルが結合されます。例1：通常のテーブルを作成するまず、HTMLで3行×3列のシンプルなテーブルを作成してみましょう。<!DOCTYPE html> <html> &n