如何利用css样式表格来控制表

现在有一个表格，里面有子。如何定义css格式可以做到一下要求1，确定字体位置在表格中央，垂直也是中央，字体距上下都是10个像素2，背景，鼠标放上去为一个颜色，移开为一个颜... 现在有一个表格，里面有子。如何定义css格式可以做到一下要求
1，确定字体位置在表格中央，垂直也是中央，字体距上下都是10个像素
2，背景，鼠标放上去为一个颜色，移开为一个颜色
3，字的前面有一图表，定义字与图表见的距离为5个像素
写出详细代码，成功者重奖！！！！展开

 我来答

1个回答

#热议# 应届生在签三方时要注意什么？

wlqly33
推荐于2016-03-28 · TA获得超过748个赞

知道小有建树答主

回答量：634

采纳率：0%

帮助的人：503万

我也去答题访问个人页

关注

展开全部

好郁闷,悬赏分：0.不过还是帮你写吧.呵呵 
具体应该用我写的这些代码进行参考:
<html>
<head>
<title>Member List</title>
<style>
<!--
.datalist{
 border:1px solid #0058a3; /* 表格边框 */
 font-family:Arial;
 border-collapse:collapse; /* 边框重叠 */
 background-color:#eaf5ff; /* 表格背景色 */
 font-size:14px;
}
.datalist caption{
 padding-bottom:5px;
 font:bold 1.4em;
 text-align:left;
}
.datalist th{
 border:1px solid #0058a3; /* 行名称边框 */
 background-color:#4bacff; /* 行名称背景色 */
 color:#FFFFFF;    /* 行名称颜色 */
 font-weight:bold;
 padding-top:4px; padding-bottom:4px;
 padding-left:12px; padding-right:12px;
 text-align:center;
}
.datalist td{
 border:1px solid #0058a3; /* 单元格边框 */
 text-align:left;
 padding-top:4px; padding-bottom:4px;
 padding-left:10px; padding-right:10px;
}
.datalist tr:hover, .datalist tr.altrow{
 background-color:#c4e4ff; /* 动态变色 */
}
-->
</style>
   <style type="text/css">
<!--
body{
 background-color:#f8ffd3;
 margin:0px; padding:0px;
}
table.banner{
 background:url(banner_bg.jpg) repeat-x;
 width:100%;
}
table.btn{
 background:url(button1_bg.jpg) repeat-x;
 width:100%;
}
#navigation{
 margin:0px; padding:0px;
 list-style-type:none;
 height:32px;
 font-size:12px;
}
#navigation li{
 text-align:center; width:130px; height:32px;
 background:url(button1.jpg) repeat-x;
 float:left; 
}
#navigation li a{
 padding:10px 0px 10px 0px;
 text-decoration:none;
 display:block;
}
#navigation li a:link, #navigation li a:visited{color:#526d00;}
#navigation li a:hover{
 color:#FFFFFF;
 background:url(button2.jpg) no-repeat;
}

body {
 margin-left: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
}
-->
</style></head>
<body>
<table class="datalist" summary="list of members in EE Studay">
 <caption>Member List</caption>
 <tr>
  <th scope="col">Name</th>
  <th scope="col">Class</th>
  <th scope="col">Birthday</th>
  <th scope="col">Constellation</th>
  <th scope="col">Mobile</th>
 </tr>
 <tr>
  <td>isaac</td>
  <td>W13</td>
  <td>Jun 24th</td>
  <td>Cancer</td>
  <td>1118159</td>
 </tr>
 <tr>
  <td>girlwing</td>
  <td>W210</td>
  <td>Sep 16th</td>
  <td>Virgo</td>
  <td>1307994</td>
 </tr>
 <tr>
  <td>tastestory</td>
  <td>W15</td>
  <td>Nov 29th</td>
  <td>Sagittarius</td>
  <td>1095245</td>
 </tr>
 <tr>
  <td>lovehate</td>
  <td>W47</td>
  <td>Sep 5th</td>
  <td>Virgo</td>
  <td>6098017</td>
 </tr>
 <tr>
  <td>slepox</td>
  <td>W19</td>
  <td>Nov 18th</td>
  <td>Scorpio</td>
  <td>0658635</td>
 </tr>
 <tr>
  <td>smartlau</td>
  <td>W19</td>
  <td>Dec 30th</td>
  <td>Capricorn</td>
  <td>0006621</td>
 </tr>
 <tr>
  <td>whaler</td>
  <td>W19</td>
  <td>Jan 18th</td>
  <td>Capricorn</td>
  <td>1851918</td>
 </tr>
 <tr>
  <td>shenhuanyan</td>
  <td>W25</td>
  <td>Jan 31th</td>
  <td>Aquarius</td>
  <td>0621827</td>
 </tr>
 <tr>
  <td>tuonene</td>
  <td>W210</td>
  <td>Nov 26th</td>
  <td>Sagittarius</td>
  <td>0091704</td>
 </tr>
 <tr>
  <td>ArthurRivers</td>
  <td>W91</td>
  <td>Feb 26th</td>
  <td>Pisces</td>
  <td>0468357</td>
 </tr>
 <tr>
  <td>reconzansp</td>
  <td>W09</td>
  <td>Oct 13th</td>
  <td>Libra</td>
  <td>3643041</td>
 </tr>
 <tr>
  <td>linear</td>
  <td>W86</td>
  <td>Aug 18th</td>
  <td>Leo</td>
  <td>6398341</td>
 </tr>
 <tr>
  <td>laopiao</td>
  <td>W41</td>
  <td>May 17th</td>
  <td>Taurus</td>
  <td>1254004</td>
 </tr>
 <tr>
  <td>dovecho</td>
  <td>W19</td>
  <td>Dec 9th</td>
  <td>Sagittarius</td>
  <td>1892013</td>
 </tr>
 <tr>
  <td>shanghen</td>
  <td>W42</td>
  <td>May 24th</td>
  <td>Gemini</td>
  <td>1544254</td>
 </tr>
 <tr>
  <td>venessawj</td>
  <td>W45</td>
  <td>Apr 1st</td>
  <td>Aries</td>
  <td>1523753</td>
 </tr>
 <tr>
  <td>lightyear</td>
  <td>W311</td>
  <td>Mar 23th</td>
  <td>Aries</td>
  <td>1002908</td>
 </tr>
</table>
<script language="javascript">
var rows = document.getElementsByTagName('tr');
for (var i=0;i<rows.length;i++){
 rows[i].onmouseover = function(){  //鼠标在行上面的时候
  this.className += 'altrow';
 }
 rows[i].onmouseout = function(){  //鼠标离开时
  this.className = this.className.replace('altrow','');
 }
}
</script>
</body>
</html>


本回答被提问者采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起