簡単テーブル４
テーブルのつくりかた ４
ｩ マス目をタテにつなげる ｩ
<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>
『枠の色』『横幅』『縦幅』はご自由に設定して下さいネ
© Rakuten Group, Inc.
