053288628280
您的当前位置:首页 > 技术支持 > 建站知识 >

css控制表格的样式的方法解析

时间:2017-08-15

一般表格的标记有:

 

以下为引用的内容:

<table>    /* 表格 */

<tr>  /* 表格的行 */

<th>  /* 表格的重要的行 */

<td>  * 表格的单元格 */


 

 

 

下面一个代码大家研究一下:

 

以下为引用的内容:

<html>
<head>
<title>年度收入</title>
<style>
<!--
.datalist{
 border:1px solid #429fff; /* 表格边框 */
 font-family:Arial;
 border-collapse:collapse; /* 边框重叠 */
}
.datalist caption{
 padding-top:3px;
 padding-bottom:2px;
 font:bold 1.1em;
 background-color:#f0f7ff;
 border:1px solid #429fff; /* 表格标题边框 */
}
.datalist th{
 border:1px solid #429fff; /* 行、列名称边框 */
 background-color:#d2e8ff;
 font-weight:bold;
 padding-top:4px; padding-bottom:4px;
 padding-left:10px; padding-right:10px;
 text-align:center;
}
.datalist td{
 border:1px solid #429fff; /* 单元格边框 */
 text-align:right;
 padding:4px;
}
-->
</style>
   </head>
<body> 
<table class="datalist">
 <caption>年度收入 2004 - 2007</caption>
 <tr>
  <th></th>
  <th scope="col">2004</th>
  <th scope="col">2005</th>
  <th scope="col">2006</th>
  <th scope="col">2007</th>
 </tr>
 <tr>
  <th scope="row">拨款</th>
  <td>11,980</td>
  <td>12,650</td>
  <td>9,700</td>
  <td>10,600</td>
 </tr>
 <tr>
  <th scope="row">捐款</th>
  <td>4,780</td>
  <td>4,989</td>
  <td>6,700</td>
  <td>6,590</td>
 </tr>
 <tr>
  <th scope="row">投资</th>
  <td>8,000</td>
  <td>8,100</td>
  <td>8,760</td>
  <td>8,490</td>
 </tr>
 <tr>
  <th scope="row">募捐</th>
  <td>3,200</td>
  <td>3,120</td>
  <td>3,700</td>
  <td>4,210</td>
 </tr>
 <tr>
  <th scope="row">销售</th>
  <td>28,400</td>
  <td>27,100</td>
  <td>27,950</td>
  <td>29,050</td>
 </tr>
 <tr>
  <th scope="row">杂费</th>
  <td>2,100</td>
  <td>1,900</td>
  <td>1,300</td>
  <td>1,760</td>
 </tr>
 <tr>
  <th scope="row">总计</th>
  <td>58,460</td>
  <td>57,859</td>
  <td>58,110</td>
  <td>60,700</td>
 </tr>
</table>
</body>
</html>
 

 

  •  

相关文章

Copyright © 2009-2017 千龙网络 版权所有  鲁ICP备09004053号 TAG SITEMAP