前端练习5-css制作漂亮表格

<! DOCTYPE  html  PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"  >

< html  xmlns =  "http://www.w3.org/1999/xhtml"  >

< head >

< meta  http-equiv =  "Content-Type"  content  = "text/html; charset=gb2312"  />

< title >  使用CSS制作一个漂亮的表格实例-www.baike369. com </  title >

< style  type =  "text/css" >

/*id为customers 的标签的样式*/

#customers

{

   font-family : "Trebuchet MS", Arial, Helvetica, sans-serif ;

   width : 100% ;

   border-collapse : collapse ;

}

/*id为customers 的标签里面的td标签和th标签的样式*/

#customers td,  #customers th

{

   font-size : 1em ;

   border : 1px solid #98BF21 ;

   padding : 3px 7px 2px 7px ;

}

/*id为customers 的标签里面的th标签的样式*/

#customers th

{

   font-size : 1.1em ;

   text-align : left ;

   padding-top : 5px ;

   padding-bottom : 4px ;

   background-color : #A7C942 ;

   color : #FFF ;

}

/*id为customers的标签里面的class名为alt的tr标签里面的td标签的样式*/

#customers tr.alt td

{

   color : #000 ;

   background-color : #EAF2D3 ;

}

</ style >

</ head >

< body >

< table  id =  "customers" >

< tr >

   < th  > Company  </ th >

   < th  > Contact  </ th >

   < th  > Country  </ th >

</ tr >

< tr >

   < td  > Apple  </ td >

   < td  > Steven Jobs </  td >

   < td  > USA  </ td >

</ tr >

< tr  class =  "alt" >

   < td  > Baidu </ td >

   < td  > Li YanHong </  td >

   < td  > China </ td >

</ tr >

< tr >

   < td  > Google  </ td >

   < td  > Larry Page </  td >

   < td  > USA  </ td >

</ tr >

< tr  class =  "alt" >

   < td  > Lenovo </ td >

   < td  > Liu Chuanzhi </ td  >

   < td  > China </ td >

</ tr >

< tr >

   < td  > Microsoft  </ td >

   < td  > Bill Gates  </ td >

   < td  > USA  </ td >

</ tr >

< tr  class =  "alt" >

   < td  > Nokia </ td >

   < td  > Stephen Elop </ td  >

   < td  > Finland </ td >

</ tr >

</ table >

</ body >

</ html >

运行结果：