<style text="css/text">
ta{border:2px solid #3E6579;margin:0px auto;border-collapse: collapse;height:60px;width:500px; text-align: center;}
aa{padding:0;background:#EDEBEC; height:30px;}
</style>
<body>
<table class="ta">
<tr class="aa">
<td>积分数</td><td>电话号码</td><td>注册时间</td><td>最后登录时间</td>
</tr>
<tr>
<td>11</td><td>22</td><td>33</td><td>44</td>
</tr>
</table>
</body>
</html>
效果如图
用CSS设置html中的表格边框样式，要设计的样式非常多，下面举例说明
工具：
记事本
浏览器
方法如下：
CSS代码：
table-a table{border:1px solid #F00}<!--关键代码：设置表格边框为1像素，实体，红色-->
HTML代码：
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="105">站名</td>
<td width="181">网址</td>
<td width="112">说明</td>
</tr>
<tr>
<td>网站名称</td>
<td>具体网址</td>
<td>网站说明</td>
</tr>
<tr>
<td>网站名称</td>
<td>具体网址</td>
<td>网站说明</td>
</tr>
</table>
</div>
效果图如下：
table{border-collapse: collapse; //相邻边被合并
background-color: #cccccc; //设置表格背景色
border-top: 1px solid #000000; //设置表格上边框颜色
border-left: 1px solid #000000; //设置表格左边框颜色
border-right: 1px solid #000000; //设置表格右边框颜色
border-bottom: 1px solid #000000; //设置表格下边框颜色
}
td {
border-right: 1px solid #000000; //设置td颜色
border-bottom: 1px solid #000000; //
}
表格制作练习可以到实战帮。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）