好看的table

最新推荐文章于 2018-08-01 12:06:48 发布

arienya1

最新推荐文章于 2018-08-01 12:06:48 发布

阅读量176

点赞数

CC 4.0 BY-SA版权

分类专栏：页面前台

本文链接：https://blog.youkuaiyun.com/arienya1/article/details/84530062

页面前台专栏收录该内容

4 篇文章

订阅专栏

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>龙梦的家</title>
</head>
<style type="text/css">
body {
font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica,
sans-serif;
color: #4f6b72;
background: #E6EAE9;
}
a {
color: #c75f3e;
}
#mytable {
width: 700px;
padding: 0;
margin: 0;
}
caption {
padding: 0 0 5px 0;
width: 700px;
font: italic 30px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-align: center;
}
th {
font: bold 11px "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;
}
th.nobg {
border-top: 0;
border-left: 0;
border-right: 1px solid #C1DAD7;
background: none;
}
td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
font-size: 11px;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
td.alt {
background: #F5FAFA;
color: #797268;
}
th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #797268;
}
html>body td {
font-size: 11px;
}
body,td,th {
font-family: 宋体, Arial;
font-size: 12px;
}
</style>
<body>
<table id="mytable" cellspacing="0" align="center">
<caption>
龙梦的家
</caption>
<tr>
<th scope="col">姓名</th>
<th scope="col">年龄</th>
<th scope="col">电话</th>
<th scope="col">居住地点</th>
</tr>
<tr>
<td>badwolf</td>
<td>100</td>
<td>010-110</td>
<td>中国北京</td>
</tr>
<tr>
<td>badwolf</td>
<td>100</td>
<td>010-110</td>
<td><a href="#">中国北京</a></td>
</tr>
</table>
</body>
</html>