<th rowspan>　〜　</th>
<td rowspan>　〜　</td>
<th colspan>　〜　</th>
<td colspan>　〜　</td>

セルとセルを連結させてみましょう。

◆　セルを縦に連結する

<th>　や　<td>のタグに　rowspan　の属性を指定すると　指定されたセルから
指定した数の分だけ下側にセルを連結させることができます。連結されたセルは　
１つのセルになります。

セル１ セル２ セル３ セル４ セル５ セル６ セル７ セル８ セル９

→

セル１ セル２ セル３ セル４ セル5 セル6

HTMLソースは　こんな感じです。

<table width="150" border="1"> <tr> <td width="50">セル１</td> <td width="50" rowspan="2">セル２</td> <td width="50" rowspan="3">セル３</td> </tr> <tr> <td>セル４</td> </tr> <tr> <td>セル5</td> <td>セル6</td> </tr> </table>

　　　　　　

セルが　どういう順番でHTMLに反映しているのかも　チェックしておきましょう！

◆　セルを横に連結する

<th>　や　<td>のタグに　colspan　の属性を指定すると　指定されたセルから
指定した数の分だけ右側にセルを連結させることができます。連結されたセルは　
１つのセルになります。

セル１ セル２ セル３ セル４ セル５ セル６ セル７ セル８ セル９

→

セル１ セル２ セル３ セル４ セル5 セル6

 

ＨＴＭＬソースは　こんな感じです

<table width="150" border="1"> <tr> <td width="50">セル１</td> <td width="50">セル２</td> <td width="50">セル３</td> </tr> <tr> <td colspan="2"><div align="center">セル４</div></td> <td width="50">セル5</td> </tr> <tr> <td colspan="3"><div align="center">セル6</div></td> </tr> </table>

セルが　どういう順番でHTMLに反映しているのかも　チェックしておきましょう！