テーブルの基本・・・セルの結合（縦・横）
HTMLタグのページ
セルの結合（縦・横）
横のセルを結合する <td colspan="〇">～ </td>
テーブルのセルを横に連結するには colspan="結合するセルの数" を指定する
タグ
* 1行目のセルを３つ連結して一つのセルにしました
ブラウザ表示
ちょっと、復習
⇒
* 1行目のセル<td>～</td>の数が代わったことを確認してください。
タグ
<table width="300" border="1">
<tr>
<tdheight="100" colspan="3" >セルを横に3つ結合 </td>
</tr>
<tr>
<td height="100"> ４</td>
<td height="100"> ５</td>
<td height="100"> ６</td>
</tr>
</table>
<tr>
<tdheight="100" colspan="3" >セルを横に3つ結合 </td>
</tr>
<tr>
<td height="100"> ４</td>
<td height="100"> ５</td>
<td height="100"> ６</td>
</tr>
</table>
* 1行目のセルを３つ連結して一つのセルにしました
ブラウザ表示
セルを横に3つ結合
４
５
６
ちょっと、復習
2行3列の普通のテーブル
2行3列で1行目のセルを結合したテーブル
| 1 | 2 | 3 |
| 4 | 5 | 6 |
3つ結合
4
5
6
<table width="300" border="1">
<tr>
<tdheight="100" > 1 </td>
<tdheight="100" > 2 </td>
<tdheight="100" > 3 </td>
</tr>
<tr>
<td height="100"> 4</td>
<td height="100"> 5</td>
<td height="100"> 6</td>
</tr>
</table>
<tr>
<tdheight="100" > 1 </td>
<tdheight="100" > 2 </td>
<tdheight="100" > 3 </td>
</tr>
<tr>
<td height="100"> 4</td>
<td height="100"> 5</td>
<td height="100"> 6</td>
</tr>
</table>
⇒
<table width="300" border="1">
<tr>
<tdheight="100" colspan="3" >3つ結合 </td>
</tr>
<tr>
<td height="100"> 4</td>
<td height="100"> 5</td>
<td height="100"> 6</td>
</tr>
</table>
<tr>
<tdheight="100" colspan="3" >3つ結合 </td>
</tr>
<tr>
<td height="100"> 4</td>
<td height="100"> 5</td>
<td height="100"> 6</td>
</tr>
</table>
* 1行目のセル<td>～</td>の数が代わったことを確認してください。
テーブルをたてに連結する <td rowspan="●">～ </td>
テーブルのセルを縦に結合するには、 rowspan="結合するセルの数" を指定する
タグ
* 縦に3つのセルが結合されました
ブラウザの表示
ちょっと復習
⇒
* <tr>～</tr>の中の<td>～</td>タグがどうのように変わるのかしっかり覚えましょう。
タグ
<table width="200" border="1">
<tr>
<tdheight="100" rowspan="3" >縦に３つのセルを結合 </td>
<td height="100">1行2列目</td>
</tr>
<tr>
<td height="100">2行2列目</td>
</tr>
<tr>
<td height="100">3行2列目</td>
</tr>
</table>
<tr>
<tdheight="100" rowspan="3" >縦に３つのセルを結合 </td>
<td height="100">1行2列目</td>
</tr>
<tr>
<td height="100">2行2列目</td>
</tr>
<tr>
<td height="100">3行2列目</td>
</tr>
</table>
* 縦に3つのセルが結合されました
ブラウザの表示
縦に３つのセルを結合
1行2列目
2行2列目
3行2列目
ちょっと復習
3行2列の普通のテーブル
3行2列で1列目のセルを結合したテーブル
| 1 | 2 |
| 3 | 4 |
| 5 | 6 |
縦に３つのセルを結合
2
4
6
<table width="200" border="1">
<tr>
<td height="100"> 1</td>
<td height="100"> 2</td>
</tr>
<tr>
<td height="100"> 3</td>
<td height="100"> 4</td>
</tr>
<tr>
<td height="100"> 5</td>
<td height="100"> 6</td>
</tr> </table>
<tr>
<td height="100"> 1</td>
<td height="100"> 2</td>
</tr>
<tr>
<td height="100"> 3</td>
<td height="100"> 4</td>
</tr>
<tr>
<td height="100"> 5</td>
<td height="100"> 6</td>
</tr> </table>
⇒
<table width="200" border="1">
<tr>
<tdheight="100" rowspan="3" >縦に３つのセルを結合 </td>
<td height="100"> 2</td>
</tr>
<tr>
<td height="100"> 4</td>
</tr>
<tr>
<td height="100"> 6</td>
</tr>
</table>
<tr>
<tdheight="100" rowspan="3" >縦に３つのセルを結合 </td>
<td height="100"> 2</td>
</tr>
<tr>
<td height="100"> 4</td>
</tr>
<tr>
<td height="100"> 6</td>
</tr>
</table>
* <tr>～</tr>の中の<td>～</td>タグがどうのように変わるのかしっかり覚えましょう。
© Rakuten Group, Inc.
