春風博客
          

          

          春天里，百花香...
          

			
          
				
					

          導航
          

					
          
	
          
		
          <2008年9月>
          
	
          日一二三四五六
          31123456
          78910111213
          14151617181920
          21222324252627
          2829301234
          567891011
          

          

					

          統(tǒng)計
          
	
					

          公告
          
	MAIL: junglesong@gmail.com
          
MSN: junglesong_5@hotmail.com
          

          
Locations of visitors to this page 

					

          常用鏈接
          


          留言簿(11)
          


		
          隨筆分類(224)
          
		
				
			
	
		
          隨筆檔案(126)
          
		
				
			
	
		
          個人軟件下載
          
		
				
			
	
		
          我的其它博客
          
		
				
			
	
		
          我的鄰居們
          
		
				
			
	


          最新隨筆
          




          搜索
          



          積分與排名
          



          最新評論
	
          

          
	
			
		

          


          閱讀排行榜
          



          評論排行榜
          


				
			
          
			
          
				
					
	
          
		
          
			使用CSS設(shè)置表格
		
          
		效果圖：
          

          

          
HTML代碼：
          

          <body>
          
              <table class="tableList" width="600" cellspacing="0">
          
                  <caption>江山代有才人出 各領(lǐng)風騷數(shù)百年</caption>
          
                  <thead>
          
                      <tr>
          
                          <th>三代</th>
          
                          <th>漢朝</th>
          
                          <th>晉朝</th>
          
                          <th>唐朝</th>
          
                          <th>宋朝</th>
          
                          <th>明朝</th>
          
                      </tr>
          
                  </thead>
          
                  <tbody>
          
                      <tr>
          
                          <td>孔子</td>
          
                          <td>董仲舒</td>
          
                          <td>阮籍</td>
          
                          <td>李白</td>
          
                          <td>蘇軾</td>
          
                          <td>王陽明</td>
          
                      </tr>
          
                      <tr class="odd">
          
                          <td>孟子</td>
          
                          <td>東方朔</td>
          
                          <td>嵇康</td>
          
                          <td>杜甫</td>
          
                          <td>辛棄疾</td>
          
                          <td>唐寅</td>
          
                      </tr>
          
                      <tr>
          
                          <td>老子</td>
          
                          <td>揚雄</td>
          
                          <td>陶淵明</td>
          
                          <td>李商隱</td>
          
                          <td>陸游</td>
          
                          <td>徐渭</td>
          
                      </tr>
          
                      <tr class="odd">
          
                          <td>莊子</td>
          
                          <td>左思</td>
          
                          <td>王羲之</td>
          
                          <td>李賀</td>
          
                          <td>范仲淹</td>
          
                          <td>楊慎</td>
          
                      </tr>
          
                      <tr>
          
                          <td>荀子</td>
          
                          <td>司馬遷</td>
          
                          <td>庾信</td>
          
                          <td>王維</td>
          
                          <td>歐陽修</td>
          
                          <td>呂坤</td>
          
                      </tr>            
          
                      <tr class="odd">
          
                          <td>韓非子</td>
          
                          <td>班固</td>
          
                          <td>鮑照</td>
          
                          <td>白居易</td>
          
                          <td>蘇洵</td>
          
                          <td>宋濂</td>
          
                      </tr>
          
                  </tbody>
          
              </table>
          
          </body>
          

          
CSS代碼：
          

          /*2008.09.28*/
          

          
Table.tableList          {
          
    border-top          :1px solid #000000;
          
    border-bottom          :1px solid #000000;
          
    border-left          :0px solid #000000;
          
    border-left          :0px solid #000000;
          
          }
          

          
Table.tableList caption          {
          
    font-size          :16px;
          
    font-weight          :bold;
          
          }
          

          
Table.tableList thead          {
          
    height          :31px;
          
    background          :#ffffff url(../img/th_flower_bg.gif) repeat-x left center:
          
    border-top:1px solid #e0dace          ;
          
    border-bottom          :1px solid #e0dace;
          
          }
          

          
Table.tableList tbody          {
          
    height          :25px;
          
          }
          

          
Table.tableList th          {
          
    border-bottom          :1px solid #e0dace;
          
    text-align          :center;
          
          }
          

          
Table.tableList tr.odd          {
          
    background-color          :#faf4e8;
          
          }
          

          
Table.tableList td          {    
          
    border-bottom          :1px solid #e0dace;
          
    
          
    padding-left          :4px;
          
    padding-right          :4px;
          
    padding-top          :4px;
          
    padding-bottom          :1px;    
          
    
          
    text-align          :left;
          
          }
          

          

          

          
所有代碼下載：
          
http://www.aygfsteel.com/Files/sitinspring/CssTable20080928145513.rar 

		
          
			posted on 2008-09-28 15:04 sitinspring 閱讀(518) 評論(3)  編輯  收藏  所屬分類: HTML,CSS&JS 
		
          
	
          







          
	    
    


          

          評論
          
	
	
			
          
				# re: 使用CSS設(shè)置表格
					
						2008-09-28 18:57
					
				日月雨林@gmail.com
			
          
			
          
				不錯不錯！！  回復  更多評論
				  
			
          
		
			
          
				# re: 使用CSS設(shè)置表格
					
						2008-09-29 05:27
					
				sclsch
			
          
			
          
				你好，我按照你的做了，代碼如下： table 的css就是不起作用，你看看是哪里有問題

          <!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="">

            <style type="text/css"> 
           
          body{
          	margin:10px;
          	height:100%;
          	text-align:center;
          	min-width:760px;
          	background:#FFFFFF;	
          }
             Table.tableList{}{
              border-top:1px solid #000000;
              border-bottom:1px solid #000000;
              border-left:0px solid #000000;
              border-left:0px solid #000000;
          }

          Table.tableList caption{}{
              font-size:16px;
              font-weight:bold;
          }

          Table.tableList thead{}{
              height:31px;
              background:#ffffff url(../img/th_flower_bg.gif) repeat-x left center:
              border-top:1px solid #e0dace;
              border-bottom:1px solid #e0dace;
          }

          Table.tableList tbody{}{
              height:25px;
          }

          Table.tableList th{}{
              border-bottom:1px solid #e0dace;
              text-align:center;
          }

          Table.tableList tr.odd{}{
              background-color:#faf4e8;
          }

          Table.tableList td{}{    
              border-bottom:1px solid #e0dace;
              
              padding-left:4px;
              padding-right:4px;
              padding-top:4px;
              padding-bottom:1px;    
              
              text-align:left;
          }
            </style> 

           </head>

          <body>
              <table class="tableList" width="600" cellspacing="0">
                  <caption>江山代有才人出 各領(lǐng)風騷數(shù)百年</caption>
                  <thead>
                      <tr>
                          <th>三代</th>
                          <th>漢朝</th>
                          <th>晉朝</th>
                          <th>唐朝</th>
                          <th>宋朝</th>
                          <th>明朝</th>
                      </tr>
                  </thead>
                  <tbody>
                      <tr>
                          <td>孔子</td>
                          <td>董仲舒</td>
                          <td>阮籍</td>
                          <td>李白</td>
                          <td>蘇軾</td>
                          <td>王陽明</td>
                      </tr>
                      <tr class="odd">
                          <td>孟子</td>
                          <td>東方朔</td>
                          <td>嵇康</td>
                          <td>杜甫</td>
                          <td>辛棄疾</td>
                          <td>唐寅</td>
                      </tr>
                      <tr>
                          <td>老子</td>
                          <td>揚雄</td>
                          <td>陶淵明</td>
                          <td>李商隱</td>
                          <td>陸游</td>
                          <td>徐渭</td>
                      </tr>
                      <tr class="odd">
                          <td>莊子</td>
                          <td>左思</td>
                          <td>王羲之</td>
                          <td>李賀</td>
                          <td>范仲淹</td>
                          <td>楊慎</td>
                      </tr>
                      <tr>
                          <td>荀子</td>
                          <td>司馬遷</td>
                          <td>庾信</td>
                          <td>王維</td>
                          <td>歐陽修</td>
                          <td>呂坤</td>
                      </tr>            
                      <tr class="odd">
                          <td>韓非子</td>
                          <td>班固</td>
                          <td>鮑照</td>
                          <td>白居易</td>
                          <td>蘇洵</td>
                          <td>宋濂</td>
                      </tr>
                  </tbody>
              </table>
          </body>
          </html>

            回復  更多評論
				  
			
          
		
			
          
				# re: 使用CSS設(shè)置表格
					
						2008-09-29 09:55
					
				sitinspring
			
          
			
          
				你多加了大括號，下面代碼可以參考。

          

          <title> New Document </title>

          <META NAME="Generator" CONTENT="EditPlus">

          <META NAME="Author" CONTENT="">

          <META NAME="Keywords" CONTENT="">

          <META NAME="Description" CONTENT="">

          

          </head>

          

          <style type="text/css">

          body{

          margin:10px;

          height:100%;

          text-align:center;

          min-width:760px;

          background:#ffffff; 

          }

          table.tableList{

          border-top:1px solid #000000;

          border-bottom:1px solid #000000;

          border-left:0px solid #000000;

          border-left:0px solid #000000;

          }

          

          Table.tableList caption{

          font-size:16px;

          font-weight:bold;

          }

          

          Table.tableList thead{

          height:31px;

          background:#ffffff url(../img/th_flower_bg.gif) repeat-x left center:

          border-top:1px solid #e0dace;

          border-bottom:1px solid #e0dace;

          }

          

          Table.tableList tbody{

          height:25px;

          }

          

          Table.tableList th{

          border-bottom:1px solid #e0dace;

          text-align:center;

          }

          

          Table.tableList tr.odd{

          background-color:#faf4e8;

          }

          

          Table.tableList td{ 

          border-bottom:1px solid #e0dace;

          

          padding-left:4px;

          padding-right:4px;

          padding-top:4px;

          padding-bottom:1px; 

          

          text-align:left;

          }

          </style> 

          

          <body>

          <table class="tableList" width="600" cellspacing="0">

          <caption>江山代有才人出 各領(lǐng)風騷數(shù)百年</caption>

          <thead>

          <tr>

          <th>三代</th>

          <th>漢朝</th>

          <th>晉朝</th>

          <th>唐朝</th>

          <th>宋朝</th>

          <th>明朝</th>

          </tr>

          </thead>

          <tbody>

          <tr>

          <td>孔子</td>

          <td>董仲舒</td>

          <td>阮籍</td>

          <td>李白</td>

          <td>蘇軾</td>

          <td>王陽明</td>

          </tr>

          <tr class="odd">

          <td>孟子</td>

          <td>東方朔</td>

          <td>嵇康</td>

          <td>杜甫</td>

          <td>辛棄疾</td>

          <td>唐寅</td>

          </tr>

          <tr>

          <td>老子</td>

          <td>揚雄</td>

          <td>陶淵明</td>

          <td>李商隱</td>

          <td>陸游</td>

          <td>徐渭</td>

          </tr>

          <tr class="odd">

          <td>莊子</td>

          <td>左思</td>

          <td>王羲之</td>

          <td>李賀</td>

          <td>范仲淹</td>

          <td>楊慎</td>

          </tr>

          <tr>

          <td>荀子</td>

          <td>司馬遷</td>

          <td>庾信</td>

          <td>王維</td>

          <td>歐陽修</td>

          <td>呂坤</td>

          </tr> 

          <tr class="odd">

          <td>韓非子</td>

          <td>班固</td>

          <td>鮑照</td>

          <td>白居易</td>

          <td>蘇洵</td>

          <td>宋濂</td>

          </tr>

          </tbody>

          </table>

          </body>

          </html>  回復  更多評論
				  
			
          
		

          




          








          

				
			
          
			
sitinspring(http://www.aygfsteel.com)原創(chuàng),轉(zhuǎn)載請注明出處.
    







          
        
	




主站蜘蛛池模板：
新河县|
禹州市|
博湖县|
恩平市|
星座|
玉山县|
西青区|
盖州市|
廉江市|
黑水县|
内江市|
长子县|
义乌市|
淮北市|
淮安市|
吉安市|
普宁市|
洪湖市|
蛟河市|
漳浦县|
凤阳县|
临邑县|
台江县|
凤凰县|
闽侯县|
山东|
永寿县|
牟定县|
银川市|
陇西县|
克什克腾旗|
工布江达县|
贵南县|
五峰|
百色市|
屏东市|
鹤岗市|
华安县|
常山县|
泉州市|
长宁区|