～table編③～縦のセルの連結方法について

こんにちはー近牡です。 今日はtableタグを使う際に、縦にセルを連結したい場合に使える方法を紹介します。

tableタグのセルを縦に連結したい

下記の連結前のテーブルを、左側1列のみ縦に連結したい場合

連結前
文字列	文字列	文字列
文字列	文字列	文字列

1行目・1列目のtd要素にrowspan属性を加え、1行目・2列目の連結前のtd属性を削除します。
rowspanを使用するときは、連結したいセルの数を指定します。

<table border="1px">
<th>連結前</th>
<tr><td rowspan="2">文字列</td><td>文字列</td><td>文字列</td></tr>
<tr><td>文字列※このセルを削除</td><td>文字列</td><td>文字列</td></tr>
</table>

実際の表示

連結後
文字列	文字列	文字列
	文字列	文字列