html table 表单

最新推荐文章于 2024-03-05 17:11:53 发布

weixin_34384915

最新推荐文章于 2024-03-05 17:11:53 发布

阅读量95

点赞数

原文链接：https://my.oschina.net/lyc819/blog/187552

版权

为什么80%的码农都做不了架构师？>>>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"utf-8" />
<title>坏狼安全网-漂亮CSS Tables</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 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-align: right;
}

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" summary="The technical specifications of the Apple

PowerMac G5 series">
<caption> </caption>
<tr>
<th scope="col">姓名</th>
<th scope="col">年龄</th>
<th scope="col">电话</th>
<th scope="col">居住地点</th>
</tr>
<tr>
<td class="row">badwolf</td>
<td class="row">100</td>
<td class="row">010-110</td>
<td class="row">中国北京</td>
</tr>
</table>

</body>

</html>

好奇怪

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>坏狼安全网-漂亮CSS Tables</title>
</head>
<style type="text/css">
table {
border-collapse: collapse;
width: 50em;
border: 1px solid #666;
}
caption {
font-size: 1.2em;
font-weight: bold;
margin: 1em 0;
}
col {
border-right: 1px solid #ccc;
}
/* col#albumCol {
border: none;
} */
thead {
background: #ccc url(images/bar.gif) repeat-x left center;
border-top: 1px solid #a5a5a5;
border-bottom: 1px solid #a5a5a5;
}
th {
font-weight: normal;
text-align: left;
}
#playlistPosHead {
text-indent: -1000em;
}
th, td {
padding: 0.1em 0.5em;
}
.odd {
background-color:#edf5ff;
}
tr:hover {
background-color:#3d80df;
color: #fff;
}
thead tr:hover {
background-color: transparent;
color: inherit;
}
</style>
<body>
<table cellspacing="0" id="playlistTable" summary="夕木木音乐排行榜,每周一次,给你最好听音乐享受.">
<caption>
夕木木音乐排行榜
</caption>
<colgroup>
<col id="PlaylistCol" />
<col id="trackCol" />
<col id="artistCol" />
<col id="albumCol" />
<col id="albumCol" />
</colgroup>
<thead>
<tr>
<th id="playlistPosHead" scope="col">夕木木音乐排行榜</th>
<th scope="col">歌曲</th>
<th scope="col">歌手</th>
<th scope="col">专辑</th> <th scope="col">专辑1</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>1</td>
<td>我的未来不是梦</td>
<td>张雨生</td>
<td>未知</td><td>未知</td>
</tr>
<tr>
<td>2</td>
<td>昨日重现</td>
<td>卡朋特</td>
<td>未知</td> <td>未知</td>
</tr>
<tr class="odd">
<td>3</td>
<td>我的未来不是梦</td>
<td>张雨生</td>
<td>未知</td> <td>未知</td>
</tr>
<tr>
<td>4</td>
<td>昨日重现</td>
<td>卡朋特</td>
<td>未知</td> <td>未知</td>
</tr>
<tr class="odd">
<td>5</td>
<td>我的未来不是梦</td>
<td>张雨生</td>
<td>未知</td> <td>未知</td>
</tr>
<tr>
<td>6</td>
<td>昨日重现</td>
<td>卡朋特</td>
<td>未知</td> <td>未知</td>
</tr>
<tr class="odd">
<td>7</td>
<td>我的未来不是梦</td>
<td>张雨生</td>
<td>未知</td> <td>未知</td>
</tr>
<tr>
<td>8</td>
<td>昨日重现</td>
<td>卡朋特</td>
<td>未知</td> <td>未知</td>
</tr>
<tr class="odd">
<td>9</td>
<td>我的未来不是梦</td>
<td>张雨生</td>
<td>未知</td> <td>未知</td>
</tr>
<tr>
<td>10</td>
<td>昨日重现</td>
<td>卡朋特</td>
<td>未知</td> <td>未知</td>
</tr>
</tbody>
</table>

</body>
</html>