 テーブルのつくりかた ４
ｩマス目をタテにつなげるｩ
<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> |
 『枠の色』『横幅』『縦幅』はご自由に設定して下さいネ
|
出産・子育て
ファッション
美容・コスメ
健康・ダイエット
生活・インテリア
料理・食べ物
ドリンク・お酒
ペット
趣味・ゲーム
映画・ＴＶ
音楽
読書・コミック
旅行・海外情報
園芸
スポーツ
アウトドア・釣り
車・バイク
パソコン・家電
そのほか
すべてのジャンル
