Homepage Zero ガイド
logo

ゼロから始めよう!わかりやすい!ホームページ作成ガイド

初めての方へ|総合案内|お問い合わせ|当サイトについて

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

ホームコース別ガイド一覧>セルを縦に結合しましょう!

セルを縦に結合しましょう!(td要素、th要素のrowspan属性)

じっくりコースアイコンの説明 じっくりコースアイコンの説明

使用タグ <td rowspan="セルの数">〜</td> <th rowspan="セルの数">〜</th>

HTML一覧タグ辞典 … <td><th>タグ

<td>タグ<th>タグの rowspan 属性を使えば、複数のセルを縦に結合できます。値には「2」以上の結合するセルの数を指定し、指定した数だけ下に結合されます。

使用例

<td>タグの rowspan 属性を使い、次の記述例のように「<td>2行目、1つ目のセル</td>」、「<td>3行目、1つ目のセル</td>」結合してみましょう!

表の基本的な構成の記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
</head>
<body>

<table border="1" cellpadding="10">
<tr>
<th>1つ目の見出しセル</th>
<th>2つ目の見出しセル</th>
<th>3つ目の見出しセル</th>
</tr>
<tr>
<td>2行目、1つ目のセル</td>
<td>2行目、2つ目のセル</td>
<td>2行目、3つ目のセル</td>
</tr>
<tr>
<td>3行目、1つ目のセル</td>
<td>3行目、2つ目のセル</td>
<td>3行目、3つ目のセル</td>
</tr>
</table>

</body>
</html>
→
rowspan属性記述後の記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
</head>
<body>

<table border="1" cellpadding="10">
<tr>
<th>1つ目の見出しセル</th>
<th>2つ目の見出しセル</th>
<th>3つ目の見出しセル</th>
</tr>
<tr>
<td rowspan="2">2行目、1つ目のセル</td>
<td>2行目、2つ目のセル</td>
<td>2行目、3つ目のセル</td>
</tr>
<tr>
<td>3行目、2つ目のセル</td>
<td>3行目、3つ目のセル</td>
</tr>
</table>

</body>
</html>
 

連結する初めのtd要素(<td>2行目、1つ目のセル</td>)にrowspan属性を記述し、左の記述例にある「 <td>3行目、1つ目のセル</td>」は結合するとき不要なセルとなるので、削除します。

使用例の表示

[rowspan属性を指定する前の表示例]
一人暮らしの前向きな料理
1つ目の見出しセル 1つ目の見出しセル 1つ目の見出しセル
2行目、1つ目のセル 2行目、2つ目のセル 2行目、3つ目のセル
3行目、1つ目のセル 3行目、2つ目のセル 3行目、3つ目のセル
↓
[rowspan属性を指定した後の表示例]
一人暮らしの前向きな料理
1つ目の見出しセル 2つ目の見出しセル 3つ目の見出しセル
2行目、1つ目のセル 2行目、2つ目のセル 2行目、3つ目のセル
3行目、2つ目のセル 3行目、3つ目のセル

このように、「rowspan="2"」の指定により「<td>2行目、1つ目のセル</td>」と「<td>3行目、1つ目のセル</td>」が連結されました。

関連情報ページ

このタグによく使われるCSS

その他

ロゴ
ゼロから始めよう!わかりやすい!ホームページ作成ガイド

|初めての方へ|総合案内|お問い合わせ|当サイトについて|

copyright (C) TOMIY All Right Reserved
inserted by FC2 system