行と列の結合

HTMLでは、rowspan属性とcolspan属性を使用して、表のセルを複数の行または列にまたがらせることができます。これらの属性を使うと、セルを結合して、より複雑な表のレイアウトを作成できます。

colspan属性は、セルがまたぐ列数を指定するために使用します。拡張したいセルの<td>または<th>タグに追加します。

colspanの使用方法の例を次に示します。

<table border="1">
	<tr>
		<th colspan="2">Name</th>
	</tr>
	<tr>
		<td>John</td>
		<td>Doe</td>
	</tr>
</table>

この例では、「Name」というテキストのヘッダーセルが2つの列にまたがっています。これは、複数の列をカバーするヘッダーを作成するのに便利です。次のように表示されます：

rowspan属性は、セルがまたがる行数を指定するために使用します。また、拡張したいセルの<td>タグまたは<th>タグに追加します。

rowspanの使用方法の例を次に示します。

<table border="1">
  <tr>
    <th>Employee</th>
    <th>Shift</th>
  </tr>
  <tr>
    <td rowspan="2">Alex</td>
    <td>Morning</td>
  </tr>
  <tr>
    <td>Evening</td>
  </tr>
</table>

ここでは、rowspanを使用して、名前を繰り返さずにAlexがMorningとEveningの両方のシフトで働いていることを示しています。 

同じ表で colspan と rowspan の両方を使用して、複雑なレイアウトを作成できます。スパンされたセルに対応できるよう、各行のセル数をそれに応じて調整することを忘れないでください。