HTML | テーブルを入れ子構造にするサンプルコード

2023-05-23HTML テーブル,HTML

HTMLでテーブルを入れ子構造にする複数パターンのサンプルコードを紹介しています。

テーブルを入れ子構造にする

HTMLのテーブル要素は入れ子構造にする事が可能です。
基本的に親となる外側のテーブル内の入れ子にしたテーブルを入れたい場所にあたるセルの<td>要素の中にテーブルタグを含めます。

例えば、以下のようにテーブルの左上に、子のするテーブルを内包する例になります。

<table>
  <tr>
    <td>
      <table>
        <tr>
          <td>内側のテーブルのセル1</td>
          <td>内側のテーブルのセル2</td>
        </tr>
        <tr>
          <td>内側のテーブルのセル3</td>
          <td>内側のテーブルのセル4</td>
        </tr>
      </table>
    </td>
    <td>外側のテーブルのセル</td>
  </tr>
</table>

以下は入れ子にするテーブルの位置を変更したものになります。

<table>
  <tr>
    <td>外側のテーブルのセル1</td>
    <td>外側のテーブルのセル2</td>
    <td>
      <table>
        <tr>
          <td>内側のテーブルのセル1</td>
          <td>内側のテーブルのセル2</td>
        </tr>
        <tr>
          <td>内側のテーブルのセル3</td>
          <td>内側のテーブルのセル4</td>
        </tr>
      </table>
    </td>
    <td>外側のテーブルのセル3</td>
  </tr>
</table>

以下は、複数列にて入れ子にしたテーブルを記述したサンプルコードになります。

<table>
	<tr>
	  <td>
		<table>
		  <tr>
			<td>内側のテーブルのセル1</td>
			<td>内側のテーブルのセル2</td>
		  </tr>
		  <tr>
			<td>内側のテーブルのセル3</td>
			<td>内側のテーブルのセル4</td>
		  </tr>
		</table>
	  </td>
	  <td>外側のテーブルのセル</td>
	</tr>
	<tr>
		<td>
		  <table>
			<tr>
			  <td>内側のテーブルのセル1</td>
			  <td>内側のテーブルのセル2</td>
			</tr>
			<tr>
			  <td>内側のテーブルのセル3</td>
			  <td>内側のテーブルのセル4</td>
			</tr>
		  </table>
		</td>
		<td>外側のテーブルのセル</td>
	  </tr>
  </table>