簡単テーブル４
テーブルのつくりかた ４
ｩ マス目をタテにつなげる ｩ
<td>をタテにつなげるときは<rowspan>を使います。
「つなげる『マス目』の数」をいれます ｯ
【なにも指定しない場合】
| ★ | ☆ |
| ◇ | ◆ |
| ● | ○ |
<table border="1" bordercolor="#枠の色"><tr><td>★</td><td>☆</td></tr><tr><td>◇</td><td>◆</td></tr><tr><td>●</td><td>○</td></tr></table>
【<rowspan="2">と入力した場合】
★
☆
◆
●
○
<table border="1" bordercolor="#枠の色"><tr><td rowspan="2">★</td><td>☆</td></tr><tr><td>◆</td></tr><tr><td>●</td><td>○</td></tr></table>
【<rowspan="3">と入力した場合】
★
☆
◆
○
<table border="1" bordercolor="#枠の色"><tr><td rowspan="3">★</td><td>☆</td></tr><tr><td>◆</td></tr><tr><td>○</td></tr></table>
【<rowspan="4">と入力した場合】
★
１
☆
Ａ
２
Ｂ
３
Ｃ
４
Ｄ
<table border="1" bordercolor="#枠の色" cellpadding="4"><tr><td rowspan="4" valign="top">★</td><td>１</td><td rowspan="4" valign="top">☆</td><td>Ａ</td></tr><tr><td>２</td><td>Ｂ</td></tr><tr><td>３</td><td>Ｃ</td></tr><tr><td>４</td><td>Ｄ</td></tr></table>
<rowspan>の設定はまたがる項目ごとにします。
数字の位置を上に表示するために<valign="top">のタグも使用しました。
ｩ テーブルに見出しをつける ｩ
使用するタグは<th>～</th>です。
これを使うと、マス目のなかに太字で見出しを入れることができます。
使い方は<th>を<td>のかわりに基本構成に入れます ｯ
<table><tr><th>～</th></tr></table>
| ベビー | キッズ | ママ |
|---|---|---|
|
洋服★
|
洋服◆ | 洋服■ |
|
雑貨☆
|
雑貨◇ | 雑貨□ |
見出し部分がわかりやすいようにマス目のサイズを変更しています ｯ
<table border="1" bordercolor="#枠の色" cellpadding="余白"><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>
ｩ テーブルにタイトルをつける ｩ
使用するタグは<caption>～</caption>です。
これを使うと、テーブルの上にタイトルをつけることができます ｯ
| ベビー | キッズ | ママ |
|---|---|---|
|
洋服★
|
洋服◆ | 洋服■ |
|
雑貨☆
|
雑貨◇ | 雑貨□ |
<table border="1" bordercolor="#枠の色" cellpadding="10"><caption>おすすめ</caption><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>
ｩ テーブル内のタテ位置を変える ｩ
タテの位置を変えるには<valign>のタグを使います。
『top』『middle』『bottom』の種類があります
【<valign="top">と入力した場合】
| ★ |
| ☆ |
| ◆ |
<table border="1" bordercolor="#枠の色" width="横幅" height="縦幅"><tr><td valign="top">★</td></tr><tr><td valign="top">☆</td></tr><tr><td valign="top">◆</td></tr></table>
【<valign="middle">と入力した場合】
| ★ |
| ☆ |
| ◆ |
<table border="1" bordercolor="#枠の色" width="横幅" height="縦幅"><tr><td valign="middle">★</td></tr><tr><td valign="middle">☆</td></tr><tr><td valign="middle">◆</td></tr></table>
【<valign="bottom">と入力した場合】
| ★ |
| ☆ |
| ◆ |
<table border="1" bordercolor="#枠の色" width="横幅" height="縦幅"><tr><td valign="bottom">★</td></tr><tr><td valign="bottom">☆</td></tr><tr><td valign="bottom">◆</td></tr></table>
【別々の位置を指定した場合】
| ★ |
| ☆ |
| ◆ |
<table border="1" bordercolor="#枠の色" width="横幅" height="縦幅"><tr><td valign="top">★</td></tr><tr><td valign="middle">☆</td></tr><tr><td valign="bottom">◆</td></tr></table>
『枠の色』『横幅』『縦幅』はご自由に設定して下さいネ
ジャンル別一覧
人気のクチコミテーマ
-
-
- 大学生母の日記
- 娘大学をズル休み。昨日のバイトで疲…
- (2024-11-11 21:54:22)
-
-
-
- 子供服ってキリがない！
- 【送料無料】裏起毛 ボリューム スウ…
- (2024-11-12 00:40:09)
-
-
-
- 高校生活～生徒の立場から・親の立場…
- 文化祭作品制作 染色
- (2024-10-16 19:40:15)
-
© Rakuten Group, Inc.
