表組み
表を構成する要素
HTMLで表を作るにはTABLE、THEAD、TBODY、TR、TH、TDといった要素を使う。
表と要素の関係の図を示す。
参考のページはこちら
[HTML]
表組みの演習
次の各項目の表を作りなさい。表の形式は各自で考え、ファイル名はtables.htmlとし、前回作ったindex.htmlからリンクさせる。完成したら指定されたサーバにアップロードする事。
- 授業で使っているノートPCの仕様(CPU、メモリ、HDDなど)。
- 太陽系の惑星の名前、直径、質量。
- 表をCSSなどを使い、表示位置、色などを調節する。
- PCと惑星の表を横に並べる。
- index.htmlにリンクを追加する。
作成例を示す。
参考 :CSSを使って表の見栄えを変えたい場合は TABLEとCSSを組み合わせた例のソースを参考にして下さい。
参考
table { background : white; /* 背景色 */ border-collapse: collapse; border-spacing : 0px; border : outset thin black; padding : 4px; margin-left: auto; /* 左右の余白の大きさを自動化し、中央へ配置 */ margin-right: auto; margin-top: 10pt; margin-bottom: 10pt; } td.t1 { background : lightsteelblue; text-align : center; font-weight : bold; } td { border : inset thin gray;/* 枠線の指定 */ padding : 6px;/* パッディング指定 */ }
参考例
- http://html.k-sakabe.com/table_css.html
- http://html.k-sakabe.com/table_css2.html
- http://css.k-sakabe.com/css_ex_1.html
- http://css.k-sakabe.com/sample01.html
- http://html.k-sakabe.com/toko/2000-08-2.html
- http://html.k-sakabe.com/position_ex.html