テーブルのページ
テーブルの基本
テーブルのタグ
table |
テーブルの外枠
tr |
テーブルの行
tr
td
1、もっともシンプルなテーブル
- <table>〜</table>でテーブルの外枠部分を記述
- <tr>〜</tr>で行を指定
- 行の中の<td>〜</td>に打ったものがセル内に表示される
- border=1でわかりやすくするためにテーブルの骨格を表示
テーブルの列を増やす
<tr>〜</tr>のなかにいくつ<td>〜</td>があるかで列の数が決まる
テーブルの行を増やす
<table>〜</table>のなかにいくつ<tr>〜</tr>があるかで行数が決まる
1行目と2行目で列数が違う矛盾を避けるため、行ごとコピーしてtd内を打ちかえる
テーブルの幅の変化
テーブル、カプセルの大きさは中身に合わせて自動で伸縮する
カレンダー
月 | 火 | 水 | 木 | 金 | 土 | 日 |
| 1 | 2 | 3 | 4 | 5 | 6 |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | | | | |
<td>〜</td>のなかが空だとセルはへこまない
代りに全角スペースを入れることで凹ませている
テーブルの復習
12月のカレンダー
月 | 火 | 水 | 木 | 金 | 土 | 日 |
| | | 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 | |
5.テーブルのサイズ指定(相対指定)
6.テーブルのサイズ指定(絶対指定)
7.セルのサイズ指定
10.セルの余白
4とのテーブルの幅に注目
11.セルの余白
12.列の結合
いらなくなった<td>〜</td>は自分で削除
13.行の結合