トップ 差分 一覧 Farm ソース 検索 ヘルプ PDF RSS ログイン

Webデザイン1 第6回目(H20)

表組み

表を構成する要素

HTMLで表を作るにはTABLE、THEAD、TBODY、TR、TH、TDといった要素を使う。

表と要素の関係の図を示す。

参考のページはこちら


[HTML]

表組みの演習

次の各項目の表を作りなさい。表の形式は各自で考え、ファイル名はtables.htmlとし、前回作ったindex.htmlからリンクさせる。完成したら指定されたサーバにアップロードする事。

  1. 授業で使っているノートPCの仕様(CPUメモリHDDなど)。
  2. 太陽系の惑星の名前、直径、質量。
  3. 表をCSSなどを使い、表示位置、色などを調節する。
  4. PCと惑星の表を横に並べる。
  5. 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;/* パッディング指定 */
}

 参考例

  1. http://html.k-sakabe.com/table_css.html
  2. http://html.k-sakabe.com/table_css2.html
  3. http://css.k-sakabe.com/css_ex_1.html
  4. http://css.k-sakabe.com/sample01.html
  5. http://html.k-sakabe.com/toko/2000-08-2.html
  6. http://html.k-sakabe.com/position_ex.html

[Webデザイン1(H20)]