商院官网：表格的使用
来自CloudWiki
目录
表格的绘制
第一步：绘制表格
- 绘制一个几行几列如图所示的表格，其中第1行为表头。
- 源代码：
<html>
<head>
<style type="text/css">
#customers td, #customers th
{
border:1px solid black;
}
</style>
</head>
<body>
<table id="customers">
<tr>
<th>院系</th>
<th>姓名</th>
<th>教工号</th>
<th>标题</th>
<th>提交时间</th>
<th>操作</th>
</tr>
<tr>
<td>信息与艺术学院</td>
<td>马欣</td>
<td>20150815</td>
<td>11月份实习总结</td>
<td>2019-01-04 21:19:46</td>
<td><a href="">修改</a><a href="">详情</a><a href="">删除</a></td>
</tr>
<tr >
<td>信息与艺术学院</td>
<td>马欣</td>
<td>20150815</td>
<td>11月份实习总结</td>
<td>2019-01-04 21:19:46</td>
<td><a href="">修改</a><a href="">详情</a><a href="">删除</a></td>
</tr>
<tr>
<td>信息与艺术学院</td>
<td>马欣</td>
<td>20150815</td>
<td>11月份实习总结</td>
<td>2019-01-04 21:19:46</td>
<td><a href="">修改</a><a href="">详情</a><a href="">删除</a></td>
</tr>
<tr >
<td>信息与艺术学院</td>
<td>马欣</td>
<td>20150815</td>
<td>11月份实习总结</td>
<td>2019-01-04 21:19:46</td>
<td><a href="">修改</a><a href="">详情</a><a href="">删除</a></td>
</tr>
<tr>
<td>信息与艺术学院</td>
<td>马欣</td>
<td>20150815</td>
<td>11月份实习总结</td>
<td>2019-01-04 21:19:46</td>
<td><a href="">修改</a><a href="">详情</a><a href="">删除</a></td>
</tr>
<tr>
<td>信息与艺术学院</td>
<td>马欣</td>
<td>20150815</td>
<td>11月份实习总结</td>
<td>2019-01-04 21:19:46</td>
<td><a href="">修改</a><a href="">详情</a><a href="">删除</a></td>
</tr>
</table>
</body>
</html>
第二步，调整表格整体的大小和边框
- 将表格的宽度设为100%；
- 设置边框为1px的灰色实线
- 源代码：
css:
#customers
{
width:100%;
border-collapse:collapse;
}
#customers td, #customers th
{
border:1px solid #ebeef5
}
第三步：设置行宽、列宽
css:
#customers .first{
width:15%;
}
#customers .fourth{
width:15%;
}
html:
<table id="customers"> <tr> <th class="first">院系</th> <th>姓名</th> <th>教工号</th> <th class="fourth">标题</th> <th>提交时间</th> <th>操作</th> </tr>
第四步，设置单元格的样式
- 设置表头的颜色（灰色为安全色，也可以用其他颜色）
- 设置内填充上下左右 都为6px (你可以换成其他值）
- 设置链接的样式
- 源代码：
css::
#customers th
{
background:#fafafa;
padding:6px ;
}
#customers td
{
padding:6px ;
}
#customers td a{
float:left; width:20%;
text-decoration: none;
}
</styl
第五步，设置悬停效果
#customers tr:hover
{
background:#fafafa;
}
放置在网页中
基础源代码：
<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{margin:0;padding:0;}
#header{width:100%; height:auto; text-align:center;position: fixed;left:0;}
#layer1-1{width:45%; height:80px; background:white;text-align:center;line-height:350%;float:left;}
#layer1-1 img{height:80px;}
#layer1-2{width:55%; height:80px;background:#00203f;;color:#FFFFFF;text-align:center;float:left;}
#layer1-2 h3{line-height:350%;}
.clear {clear:both;}
#main{width:100%; height:600px;color:black;}
#navigation2 {
width:17%;
height:600px;
background-color:#001529;
font:normal 100%/4.6em "宋体";
/*text-align:center; /* 这个属性使盒子中的链接居中 */
float:left;
position: fixed;
left:0;
top:80px;
}
#navigation2 a{
color:#FFFFFF;/*字体颜色*/
text-decoration: none;
width:100%;
height:4.5em;
line-height: 4.6em;
box-sizing: border-box;
border:0.05em solid black;
border-left:1em solid #151571;
display:block;
}
#navigation2 a:hover{ /* 鼠标经过时 */
background-color:yellow; /* 改变背景色 */
color:black; /* 改变文字颜色 */
border-left:1em solid orange;
}
#content {
width:83%;
height:auto;
box-sizing:border-box;
padding:0 ;
font:normal 100% "宋体";
line-height: 180%;
float:right;
}
#content img {
float:left;
}
#content h2{
text-align: center;
}
</style>
</head>
<body>
<div id="header">
<div id="layer1-1"><img src="http://www.sict.edu.cn/Templets/mode3/images/logo.png" /></div>
<div id="layer1-2"><h3>学校概况 机构设置 教育教学 就业创业 科技服务</h3>
<div class="clear"></div>
</div>
<div id="main">
<div id="navigation2">
<a href="#">首页</a>
<a href="#">实习指导</a>
<a href="#">就业指导</a>
<a href="#">学生周报</a>
<a href="#">老师月报</a>
</div>
<div id="content">
</div>
</div>
<div id="footer">
<p>学校地址：济南市旅游路4516号 邮编：250103</p>
<p>电话：0531-86335888 招生电话：0531-86335555</p>
<p>鲁ICP备05002370 </p>
</div>
</body>
</html>
基础代码（无导航栏）
<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{margin:0;padding:0;}
#header{width:100%; height:auto; text-align:center;position: fixed;left:0;}
#layer1-1{width:45%; height:80px; background:white;text-align:center;line-height:350%;float:left;}
#layer1-1 img{height:80px;}
#navigation{width:55%; height:80px;background:#00203f;;color:#FFFFFF;text-align:center;float:left;}
#layer1-2 h3{line-height:350%;}
.clear {clear:both;}
#main{width:100%; height:600px;color:black;}
#navigation2 {
width:17%;
height:600px;
background-color:#001529;
font:normal 100%/4.6em "宋体";
/*text-align:center; /* 这个属性使盒子中的链接居中 */
float:left;
position: fixed;
left:0;
top:80px;
}
#content {
width:83%;
height:auto;
box-sizing:border-box;
padding:0 ;
font:normal 100% "宋体";
line-height: 180%;
float:right;
}
#content img {
float:left;
}
#content h2{
text-align: center;
}
</style>
</head>
<body>
<div id="header">
<div id="layer1-1"><img src="http://www.sict.edu.cn/statics/shangzhi/images/img/sz_logo.png" /></div>
<div id="navigation">
<a href="#">首页</a>
<a href="#">休闲零食</a>
<a href="#">日用百货</a>
<a href="#">服装鞋帽</a>
<a href="#">数码电子</a>
<div class="clear"></div>
</div>
<div id="main">
<div id="navigation2">
</div>
<div id="content">
</div>
</div>
<div id="footer">
<p>学校地址：济南市旅游路4516号 邮编：250103</p>
<p>电话：0531-86335888 招生电话：0531-86335555</p>
<p>鲁ICP备05002370 </p>
</div>
</body>
</html>
