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