ホーム＞コース別ガイド一覧＞セルを縦に結合しましょう！
セルを縦に結合しましょう！（td要素、th要素のrowspan属性） |
 
|
使用タグ <td rowspan="セルの数">〜</td> <th rowspan="セルの数">〜</th>
HTML一覧タグ辞典 … <td>、<th>タグ
<td>タグ、<th>タグの rowspan 属性を使えば、複数のセルを縦に結合できます。値には「2」以上の結合するセルの数を指定し、指定した数だけ下に結合されます。
使用例
<td>タグの rowspan 属性を使い、次の記述例のように「<td>２行目、１つ目のセル</td>」、「<td>３行目、１つ目のセル</td>」結合してみましょう！
表の基本的な構成の記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
</head>
<body>
<table border="1" cellpadding="10">
<tr>
<th>１つ目の見出しセル</th>
<th>２つ目の見出しセル</th>
<th>３つ目の見出しセル</th>
</tr>
<tr>
<td>２行目、１つ目のセル</td>
<td>２行目、２つ目のセル</td>
<td>２行目、３つ目のセル</td>
</tr>
<tr>
<td>３行目、１つ目のセル</td>
<td>３行目、２つ目のセル</td>
<td>３行目、３つ目のセル</td>
</tr>
</table>
</body>
</html> |
|
 |
rowspan属性記述後の記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
</head>
<body>
<table border="1" cellpadding="10">
<tr>
<th>１つ目の見出しセル</th>
<th>２つ目の見出しセル</th>
<th>３つ目の見出しセル</th>
</tr>
<tr>
<td rowspan="2">２行目、１つ目のセル</td>
<td>２行目、２つ目のセル</td>
<td>２行目、３つ目のセル</td>
</tr>
<tr>
<td>３行目、２つ目のセル</td>
<td>３行目、３つ目のセル</td>
</tr>
</table>
</body>
</html> |
|
連結する初めのtd要素（<td>２行目、１つ目のセル</td>）にrowspan属性を記述し、左の記述例にある「 <td>３行目、１つ目のセル</td>」は結合するとき不要なセルとなるので、削除します。
使用例の表示
[rowspan属性を指定する前の表示例]
| 一人暮らしの前向きな料理 |
| １つ目の見出しセル |
１つ目の見出しセル |
１つ目の見出しセル |
| ２行目、１つ目のセル |
２行目、２つ目のセル |
２行目、３つ目のセル |
| ３行目、１つ目のセル |
３行目、２つ目のセル |
３行目、３つ目のセル |
|
|
 |
[rowspan属性を指定した後の表示例]
| 一人暮らしの前向きな料理 |
| １つ目の見出しセル |
２つ目の見出しセル |
３つ目の見出しセル |
| ２行目、１つ目のセル |
２行目、２つ目のセル |
２行目、３つ目のセル |
| ３行目、２つ目のセル |
３行目、３つ目のセル |
|
|
このように、「rowspan="2"」の指定により「<td>２行目、１つ目のセル</td>」と「<td>３行目、１つ目のセル</td>」が連結されました。
関連情報ページ |
|
このタグによく使われるCSS |
|
|
|
|
その他 |
|
|
|
