行と列の結合

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の両方のシフトで働いていることを示しています。 

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