テーブルのページ
＞home ＞6月の日記
テーブルの基本
1.最もシンプルなテーブル
＜table＞〜＜/table＞がテーブルの外枠を表す
＜ｔｒ＞〜＜ｔｒ＞は行を表す
行内の＜ｔｄ＞〜＜/ｔｄ＞内に打ったものがセル内に表示される
2.テーブルの列を増やす
＜ｔｒ＞〜＜ｔｒ＞の中にいくつ＜ｔｄ＞〜＜ｔｄ＞があるかで何列かが決まる
3.テーブルの行を増やす
＜table＞〜＜table＞の中にいくつ＜ｔｒ＞〜＜/ｔｒ＞があるかで何行かが決まる
各行の列数が異なってはいけないのでコピー＆ペーストを活用する
4.テーブルの幅の変化
各セルの大きさは中身に応じて変化する
テーブルのタグ
| table | テーブルの外枠 |
| tr | テーブルの行（table row） |
| td | テーブルのセル(列)（table data） |
カレンダー
| 月 | 火 | 水 | 木 | 金 | 土 | 日 |
| | 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＞内に値がないとセルはへこまない
空白には全角スペースを利用する
テーブルタブの属性
5.テーブルのサイズ指定（可変）
＜table width="**%"＞でブラウザウィンドー幅に応じて可変する相対位置指定となる
6.テーブルのサイズ指定（固定）
値に％をつけないとピクセル指定による固定幅となる
7.セルのサイズ指定（固定）
＜td＞にサイズ指定をするとそのセルのみサイズ指定ができる
合計値などが間違った指定になっていると正しくテーブルが表示されなくなるので必要最低限にとどめる
8.テーブル及びセルの背景色
カレンダーを色分け
| 月 | 火 | 水 | 木 | 金 | 土 | 日 |
| | 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 | | | | |
6/18 テーブル2
9.テーブル及びセルのalign
水平方向はalign属性、垂直方向はvalign（vatical）属性（top/middle/bottom）で調整できる
テーブルを使ったレイアウト
10.セルの余白
celpaddingでセルと中身との間に余白を入れられる
11.セルとセルの間隔
sellspacing="15"
cellspacing="0"とborder="0"にするとセル同士がくっつく
12.列の結合
13.行の結合
14.行の結合
練習問題1
| １行１列目 | １行２列目 |
| ２行１列目 | ２行１列目 | １行２列目 | １行２列目 | １行２列目 |
練習問題2
| １行１列目 | １行２列目 |
| ２行１列目 | ２行２列目 |
| ３行２列目 |
| ４行２列目 |
| ５行２列目 |
最後の問題
| １行１列目 | １行２列目 | 1行３列目 | １行４列目 | １行５列目 | １行６列目 |
| ２行１列目 | ２行２列目 | 2行６列目 |
| ３行１列目 | 3行６列目 |
| ４行１列目 | 4行６列目 |
| ５行１列目 | 5行６列目 |
| 6行１列目 |