星空网 > 软件开发 > 网页设计

经常使用的两个清爽的table样式

两个我经常使用的table样式:

 

<html>
<head>
<title></title>
<style type="text/css">
body,table{
font-size:12px;
}
table{
table-layout:fixed;
empty-cells:show;
border-collapse: collapse;
margin:0 auto;
}
td{
height:30px;
}
h1,h2,h3{
font-size:12px;
margin:0;
padding:0;
}
.table{
border:1px solid #cad9ea;
color:#666;
}
.table th {
background-repeat:repeat-x;
height:30px;
}
.table td,.table th{
border:1px solid #cad9ea;
padding:0 1em 0;
}
.table tr.alter{
background-color:#f5fafe;
}
</style>
</head>
<body>
<table width="90%" >
<tr>
<th>学号</th>
<th>姓名</th>
<th>平时</th>
<th>期中</th>
<th>实验(践)</th>
<th>其它</th>
<th>期末</th>
<th>总评</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr >
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
</table>
</body>
</html>

 

----------------------------------------

<html>
<head>
<title></title>
<style type="text/css">
.table
{
width: 100%;
padding: 0;
margin: 0;
}
th {
font: bold 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #CAE8EA no-repeat;
}
td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
font-size:14px;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
td.alt {
background: #F5FAFA;
color: #797268;
}
th.spec,td.spec {
border-left: 1px solid #C1DAD7;
}
/*---------for IE 5.x bug*/
html>body td{ font-size:14px;}
tr.select th,tr.select td
{
background-color:#CAE8EA;
color: #797268;
}
</style>
</head>
<body>
<table cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series">
<tr>
<th >选择</th>
<th>课程名称</th>
<th>课程编号</th>
<th>已经考试次数</th>
</tr>
<tr>
<td >1</td>
<td>1</td>
<td >1</td>
<td>1</td>
</tr>
<tr >
<td >2</td>
<td>2</td>
<td >2</td>
<td>2</td>
</tr>
<tr>
<td >3</td>
<td>3</td>
<td >3</td>
<td>3</td>
</tr>
</table>
</body>
</html>

 




原标题:经常使用的两个清爽的table样式

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

收藏!!亚马逊卖家不得不知道的合规事项:https://www.kjdsnews.com/a/1659928.html
巴西站卖家数量破万,Shein“平台化”迈开步伐:https://www.kjdsnews.com/a/1659929.html
亚马逊荷兰站Prime订阅费变动,飙升66%:https://www.kjdsnews.com/a/1659930.html
中企挺进中东,谁来造桥铺路?:https://www.kjdsnews.com/a/1659931.html
DTC护理品牌Hims & Hers Q3季度营收2.2亿美元,同比增长57%:https://www.kjdsnews.com/a/1659932.html
多个亚马逊爆品已注册美国外观专利,跨境卖家警惕风险!2023-10-31最新!:https://www.kjdsnews.com/a/1659933.html
月活用户超20亿!万亿市值巨头对中国商家进一步开闸放流 :https://www.kjdsnews.com/a/1836412.html
九寨沟周围必去的景点推荐:https://www.vstour.cn/a/363190.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流