HTML5前端开发实战01-学⽣信息表
版权声明
本⽂原创作者：
作者博客地址：
开篇
⼤概两年前我写了；在这个专栏中介绍了前端开发基本技能，例如：HTML5、CSS、JavaScript等等。然后由于它的定位就是基础理论知识所以在项⽬开发这⽅⾯就略显不⾜了。为了弥补⽋缺，我打算新开⼀个专栏《HTML5前端开发实战》讲解前端项⽬；恳请各位斧正，多谢。
OK，先来看⼀下今天要做的⼩项⽬——学⽣信息表；效果图如下：
代码如下:
<html>
<head>
<style type="text/css">
#studentTable{
font-family:"微软雅⿊";
width: 80%;
border-collapse: collapse;
text-align: center;
/* ⽔平居中 */
margin: auto;
}
/* 表头 */
th{
font-size: 20px;
padding: 5px 0;
background: #A7C942;
color: #ffffff;
}
/* 单元格 */
td{
font-size: 16px;
border: 1px solid #98bf21;
padding: 5px 7px;
}
html5颜代码/* 设置奇数⾏中的单元格td的背景颜⾊ */
tr:nth-of-type(odd) td{
background-color: #EAF2D3;
}
</style>
</head>
<body>
<body>
<table id="studentTable"> <tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
<tr>
<td>杨倩倩</td>
<td>18</td>
<td>成都</td>
</tr>
<tr>
<td>李思思</td>
<td>19</td>
<td>天津</td>
</tr>
<tr>
<td>王乐天</td>
<td>17</td>
<td>太原</td>
</tr>
<tr>
<td>赵甜恬</td>
<td>19</td>
<td>昆明</td>
</tr>
<tr>
<td>孙悦灵</td>
<td>17</td>
<td>⼴州</td>
</tr>
<tr>
<td>陈清敏</td>
<td>18</td>
<td>贵阳</td>
</tr>
</table>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。