行と列の結合

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>

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

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