CSS(8)表

一、border
borderプロパティは、テーブル()およびセル(/)の枠線を設定するために使用されます.注意:borderは、table、th、tdの4つの枠線の属性を一度に設定する略記属性でもあります.これらの属性は個別に設定できますが、ここでは説明しません.この略記属性では,各属性の書き順は無関係である.例えば、以下の例ではtable、th、tdに1 px幅の青色実線枠を設けた.

  table, th, td

   {

       border:  solid blue 1px;

   }

説明:前の例のテーブルには、2つの線の枠線があります.これはtable,thおよびtd要素に独立した枠線があるためである.表を単一の線の枠線として表示する必要がある場合はborder-collapseプロパティを使用します.
二、border-collapse
border-collapseプロパティは、表の枠線を単一の枠線(単線表)に折り畳むかどうかを設定します.border-collapseプロパティの値は、separate(table、thおよびtd要素に独立した枠線がある)、collapse(table、th、td要素の枠線が単一の枠線に結合されます).ドキュメント定義のタイプが規定されていない場合は注意してください.DOCTYPE、border-collapseプロパティは、Webページのエラーを報告する可能性がありますので、テーブルにborder-collapseプロパティを設定するときは、HTMLドキュメントにDTDを付けておきます.

table

  {

  /*         */

  border-collapse:collapse;

  }



table,th, td

  {

  border: 1px solid black;

  }

三、widthプロパティとheight widthプロパティとheightプロパティは、それぞれテーブルの幅と高さを設定するために使用されます.たとえば、次の例では、th要素の高さを50 pxに設定しながら、表の幅を100%に設定します.

table

  {

  width:100%;

  }



th

  {

  height:50px;

  }

四、text-alignとvertical-align
text-alignプロパティとvertical-alignプロパティを使用して、テーブル内のテキストの位置合わせを設定します.
text-alignプロパティでは、左揃え(left)、右揃え(right)、または中央揃え(center):

/*        */

td

  {

  text-align:right;

  }

vertical-alignプロパティでは、上部揃え(top)、下部揃え(bottom)、または中央揃え(middle):

/*        ，                   */

td

  {

  height:50px;

  vertical-align:bottom;

  }

五、padding
テーブルのpaddingプロパティを使用して、テーブル内の余白を設定します.表の内容と枠線の距離を制御するには、td要素とth要素のpaddingプロパティを設定します.

/*         15px*/

td

  {

  padding:15px;

  }

六、表の色
表に背景色(background-color)、前景色(color)、枠(border)を設定することで、色の豊富なきれいな表を作ることができます.次の例では、枠線の色とth要素のテキストと背景の色を設定します.

/*          */

table, td, th

  {

  border:1px solid green;

  }



/*                 */

th

  {

  background-color:green;

  color:white;

  }

参照:http://www.w3school.com.cn/css/css_table.asp