漂亮的HTML表格

原文： http://www.textfixer.com/resources/css-tables.php#css-table01 

 

一個像素邊框的表格：

Info Header 1	Info Header 2	Info Header 3
Text 1A	Text 1B	Text 1C
Text 2A	Text 2B	Text 2C

代碼如下：

 
          <!-- 
           CSS goes in the document HEAD or added to your external stylesheet  
          --> 
          
 
          < 
          style  
          type 
          ="text/css" 
          > 
          
 table.gridtable { 
          
     font-family: 
           verdana,arial,sans-serif; 
          
     font-size: 
          11px; 
          
     color: 
          #333333; 
          
     border-width: 
           1px; 
          
     border-color: 
           #666666; 
          
     border-collapse: 
           collapse; 
          
 } 
          
 table.gridtable th { 
          
     border-width: 
           1px; 
          
     padding: 
           8px; 
          
     border-style: 
           solid; 
          
     border-color: 
           #666666; 
          
     background-color: 
           #dedede; 
          
 } 
          
 table.gridtable td { 
          
     border-width: 
           1px; 
          
     padding: 
           8px; 
          
     border-style: 
           solid; 
          
     border-color: 
           #666666; 
          
     background-color: 
           #ffffff; 
          
 } 
          
  
          </ 
          style 
          > 
          
 
          
 
          <!-- 
           Table goes in the document BODY  
          --> 
          
 
          < 
          table  
          class 
          ="gridtable" 
          > 
          
 
          < 
          tr 
          > 
          
      
          < 
          th 
          >Info Header 1 
          </ 
          th 
          >< 
          th 
          >Info Header 2 
          </ 
          th 
          >< 
          th 
          >Info Header 3 
          </ 
          th 
          > 
          
 
          </ 
          tr 
          > 
          
 
          < 
          tr 
          > 
          
      
          < 
          td 
          >Text 1A 
          </ 
          td 
          >< 
          td 
          >Text 1B 
          </ 
          td 
          >< 
          td 
          >Text 1C 
          </ 
          td 
          > 
          
 
          </ 
          tr 
          > 
          
 
          < 
          tr 
          > 
          
      
          < 
          td 
          >Text 2A 
          </ 
          td 
          >< 
          td 
          >Text 2B 
          </ 
          td 
          >< 
          td 
          >Text 2C 
          </ 
          td 
          > 
          
 
          </ 
          tr 
          > 
          
 
          </ 
          table 
          > 
         

 

 

有背景圖片的表格：

Info Header 1	Info Header 2	Info Header 3
Text 1A	Text 1B	Text 1C
Text 2A	Text 2B	Text 2C

代碼如下：

<!--  CSS goes in the document HEAD or added to your external stylesheet  -->
< style  type ="text/css" >
table.imagetable {
    font-family:  verdana,arial,sans-serif;
    font-size: 11px;
    color: #333333;
    border-width:  1px;
    border-color:  #999999;
    border-collapse:  collapse;
}
table.imagetable th {
    background: #b5cfd2 url('cell-grey.jpg ');
    border-width:  1px;
    padding:  8px;
    border-style:  solid;
    border-color:  #999999;
}
table.imagetable td {
    background: #dcddc0 url(' cell-grey.jpg');
    border-width:  1px;
    padding:  8px;
    border-style:  solid;
    border-color:  #999999;
}
</ style >

<!--  Table goes in the document BODY  -->
< table  class ="imagetable" >
< tr >
     < th >Info Header 1 </ th >< th >Info Header 2 </ th >< th >Info Header 3 </ th >
</ tr >
< tr >
     < td >Text 1A </ td >< td >Text 1B </ td >< td >Text 1C </ td >
</ tr >
< tr >
     < td >Text 2A </ td >< td >Text 2B </ td >< td >Text 2C </ td >
</ tr >
</ table >  

 

間隔彩色行表格：

Info Header 1	Info Header 2	Info Header 3
Text 1A	Text 1B	Text 1C
Text 2A	Text 2B	Text 2C
Text 3A	Text 3B	Text 3C
Text 4A	Text 4B	Text 4C
Text 5A	Text 5B	Text 5C

代碼如下：

<!--  Javascript goes in the document HEAD  -->
< script  type ="text/javascript" >
function altRows(id){
     if(document.getElementsByTagName){  
        
         var table = document.getElementById(id);  
         var rows = table.getElementsByTagName("tr"); 
         
         for(i = 0; i < rows.length; i++){          
             if(i % 2 == 0){
                rows[i].className = "evenrowcolor";
            } else{
                rows[i].className = "oddrowcolor";
            }      
        }
    }
}

window.onload= function(){
    altRows('alternatecolor');
}
</ script >


<!--  CSS goes in the document HEAD or added to your external stylesheet  -->
< style  type ="text/css" >
table.altrowstable {
    font-family:  verdana,arial,sans-serif;
    font-size: 11px;
    color: #333333;
    border-width:  1px;
    border-color:  #a9c6c9;
    border-collapse:  collapse;
}
table.altrowstable th {
    border-width:  1px;
    padding:  8px;
    border-style:  solid;
    border-color:  #a9c6c9;
}
table.altrowstable td {
    border-width:  1px;
    padding:  8px;
    border-style:  solid;
    border-color:  #a9c6c9;
}
.oddrowcolor{
    background-color: #d4e3e5;
}
.evenrowcolor{
    background-color: #c3dde0;
}
</ style >


<!--  Table goes in the document BODY  -->
< table  class ="altrowstable"  id ="alternatecolor" >
< tr >
     < th >Info Header 1 </ th >< th >Info Header 2 </ th >< th >Info Header 3 </ th >
</ tr >
< tr >
     < td >Text 1A </ td >< td >Text 1B </ td >< td >Text 1C </ td >
</ tr >
< tr >
     < td >Text 2A </ td >< td >Text 2B </ td >< td >Text 2C </ td >
</ tr >
</ tr >
< tr >
     < td >Text 3A </ td >< td >Text 3B </ td >< td >Text 3C </ td >
</ tr >
< tr >
     < td >Text 4A </ td >< td >Text 4B </ td >< td >Text 4C </ td >
</ tr >
< tr >
     < td >Text 5A </ td >< td >Text 5B </ td >< td >Text 5C </ td >
</ tr >
</ table >

鼠標停留時高亮行的表格：

Info Header 1	Info Header 2	Info Header 3
Item 1A	Item 1B	Item 1C
Item 2A	Item 2B	Item 2C
Item 3A	Item 3B	Item 3C
Item 4A	Item 4B	Item 4C
Item 5A	Item 5B	Item 5C

代碼如下：

<!--  CSS goes in the document HEAD or added to your external stylesheet  -->
< style  type ="text/css" >
table.hovertable {
    font-family:  verdana,arial,sans-serif;
    font-size: 11px;
    color: #333333;
    border-width:  1px;
    border-color:  #999999;
    border-collapse:  collapse;
}
table.hovertable th {
    background-color: #c3dde0;
    border-width:  1px;
    padding:  8px;
    border-style:  solid;
    border-color:  #a9c6c9;
}
table.hovertable tr {
    background-color: #d4e3e5;
}
table.hovertable td {
    border-width:  1px;
    padding:  8px;
    border-style:  solid;
    border-color:  #a9c6c9;
}
</ style >

<!--  Table goes in the document BODY  -->
< table  class ="hovertable" >
< tr >
     < th >Info Header 1 </ th >< th >Info Header 2 </ th >< th >Info Header 3 </ th >
</ tr >
< tr  onmouseover ="this.style.backgroundColor='#ffff66';"  onmouseout ="this.style.backgroundColor='#d4e3e5';" >
     < td >Item 1A </ td >< td >Item 1B </ td >< td >Item 1C </ td >
</ tr >
< tr  onmouseover ="this.style.backgroundColor='#ffff66';"  onmouseout ="this.style.backgroundColor='#d4e3e5';" >
     < td >Item 2A </ td >< td >Item 2B </ td >< td >Item 2C </ td >
</ tr >
< tr  onmouseover ="this.style.backgroundColor='#ffff66';"  onmouseout ="this.style.backgroundColor='#d4e3e5';" >
     < td >Item 3A </ td >< td >Item 3B </ td >< td >Item 3C </ td >
</ tr >
< tr  onmouseover ="this.style.backgroundColor='#ffff66';"  onmouseout ="this.style.backgroundColor='#d4e3e5';" >
     < td >Item 4A </ td >< td >Item 4B </ td >< td >Item 4C </ td >
</ tr >
< tr  onmouseover ="this.style.backgroundColor='#ffff66';"  onmouseout ="this.style.backgroundColor='#d4e3e5';" >
     < td >Item 5A </ td >< td >Item 5B </ td >< td >Item 5C </ td >
</ tr >
</ table >  

完！