Css练习---Grid Table

1. table header渐变色
2. table row交替色
3. large table宽度770px，small table宽度400px

定义表格css,保存为GridTable.css

.largetable /**/ /*large table*/
{} {
    width: 770px;
    clear: both;
    overflow: visible;
}
.smalltable /**/ /*small table*/
{} {
    width: 400px;
    clear: both;
    overflow: visible;
}
div.grid /**/ /*table container*/
{} {
    text-align: left;
    vertical-align: middle;
}

div.grid table /**/ /*grid table*/
{} {
    border-width: 0px;
    border-style: none;
    border-color: #C1BBAB;
    border-collapse: collapse;
    empty-cells: show;
}
div.grid th /**/ /*grid table header*/
{} {
    background-color: #E0DDD5;
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#E0DDD5', EndColorStr='#FFFFFF');
    text-align: center;
    border-width: 1px;
    border-style: solid;
    padding: 1px 5px 2px 5px;
    text-transform: capitalize;
}
div.grid td /**/ /*grid table cell*/
{} {
    border-width: 1px;
    border-style: solid;
    padding: 1px 5px 1px 5px;
}
/**/ /*Alternating Row Color */
tr.grid_rw1clr
{} {
    background-color: #FFFFFF;
}
tr.grid_rw2clr
{} {
    background-color: #F9F8F6;
}

应用GridTable.css到Table中

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< HTML >
  < HEAD >
   < TITLE >  New Document  </ TITLE >
   < META  NAME ="Generator"  CONTENT ="EditPlus" >
   < META  NAME ="Author"  CONTENT ="" >
   < META  NAME ="Keywords"  CONTENT ="" >
   < META  NAME ="Description"  CONTENT ="" >
   < LINK  REL =stylesheet  HREF ="GridTable.css"  type ="text/css" ><!--import css file-->
   </ HEAD >

  < BODY >
 large table(width:770px)
  < div  class ="grid" >
   < TABLE  class ="largetable" >
   < TR >
     < TH > Header One </ TH >
     < TH > Header Two </ TH >
     < TH > Header Three </ TH >
     < TH > Header Four </ TH >
   </ TR >
   < TR  class ="grid_rw1clr" >
     < TD > Cell(1,1) </ TD >
     < TD > Cell(1,2) </ TD >
     < TD > Cell(1,3) </ TD >
     < TD > Cell(1,4) </ TD >
   </ TR >
   < TR  class ="grid_rw2clr" >
     < TD > Cell(2,1) </ TD >
     < TD > Cell(2,2) </ TD >
     < TD > Cell(2,3) </ TD >
     < TD > Cell(2,4) </ TD >
   </ TR >
   </ TABLE >
   </ div >


samll table(width:400px)
   < div  class ="grid" >
   < TABLE  class ="smalltable" >
   < TR >
     < TH > Header One </ TH >
     < TH > Header Two </ TH >
     < TH > Header Three </ TH >
     < TH > Header Four </ TH >
   </ TR >
   < TR  class ="grid_rw1clr" >
     < TD > Cell(1,1) </ TD >
     < TD > Cell(1,2) </ TD >
     < TD > Cell(1,3) </ TD >
     < TD > Cell(1,4) </ TD >
   </ TR >
   < TR  class ="grid_rw2clr" >
     < TD > Cell(2,1) </ TD >
     < TD > Cell(2,2) </ TD >
     < TD > Cell(2,3) </ TD >
     < TD > Cell(2,4) </ TD >
   </ TR >
   </ TABLE >
   </ div >
  </ BODY >
</ HTML >

Grid Table效果示例
large table(width:770px)

Header One	Header Two	Header Three	Header Four
Cell(1,1)	Cell(1,2)	Cell(1,3)	Cell(1,4)
Cell(2,1)	Cell(2,2)	Cell(2,3)	Cell(2,4)

samll table(width:400px)

Header One	Header Two	Header Three	Header Four
Cell(1,1)	Cell(1,2)	Cell(1,3)	Cell(1,4)
Cell(2,1)	Cell(2,2)	Cell(2,3)	Cell(2,4)

转载于:https://www.cnblogs.com/AganCN/archive/2008/04/23/1168240.html