给大家分享一些关于表格的基础知识和一些简单的应用
先带大家了解一下表格的基础知识:
-
定义表格:<table>
- 表格标题:<caption>
- 表格表头:<thead>
- 表格正文:<tbody>
- 表格页脚:<tfoot>
- 表头单元格:<th>
- 表格行:<tr>
- 表格单元格:<td>
表格常用属性和专用样式:
- 表格对其方式:align(左中右)
- 表格边框宽度:border
- 表格边框颜色:bordercolor
- 表格背景色:bgcolor
- 表格背景图:background
- 单元间间隙:cellspacing
- 表格内边距:cellpadding
- 横向合并单元格(td属性):colspan="2"
- 纵向合并单元格(td属性):rowspan="2"
- 合并相邻单元格边框(table样式):border-collapse:collapse;
然后我们来看一些简单的应用
下面是一个简单的表格的单元格的合并拆分的实现
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
table{border-collapse:collapse;}
td{width:100px; height:80px;}
</style>
</head>
<body>
<table bgcolor="#ffffce" cellpadding="0" cellspacing="0" border="1">
<tbody>
<tr>
<td colspan="2"></td>
<td colspan="2"></td>
<td></td>
<td></td>
<td rowspan="3"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td rowspan="2"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
效果图:
然后给大家一个稍微复杂一点的表格的应用:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<link rel="stylesheet" type="text/css" href="css/common.css">
<style type="text/css">
table{width: 720px;background-color: #ffffff;margin: 0 auto;border-collapse:collapse}
.t1{border-right: 30px solid #f2f2f2;border-left: 30px solid #f2f2f2;border-top: 30px solid #f2f2f2;}
.t2{border-right: 30px solid #f2f2f2;border-left: 30px solid #f2f2f2;border-bottom: 30px solid #f2f2f2;}
th{border:1px solid #e0e0e0;}
#id1{margin-left: 37px;}
select{border: 1px solid #abadb3;margin-left: 14px;margin-bottom: 15px;margin-top: 15px;}
input{margin-left: 35px;}
.box{border-top: 1px solid #e0e0e0;}
#id1{margin-left:185px;}
.box div{float: left;width: 80px;text-align: center;line-height: 45px;}
.tr1 td{height: 25px;border:1px solid #e7e7e7;background-color: #f7ffef;text-align: center;}
tr td{height: 25px;border:1px solid #e7e7e7;text-align: center;}
p,p b{color: #4ca100;}4
#id4{border-bottom: 1px solid #e7e7e7;}
</style>
<body>
<table class="t1">
<form>
<th>
出诊时间:
<select><option>--请选择--</option></select>
<select><option>--请选择--</option></select>
门诊类型:
<select><option>--请选择--</option></select>
<input type="submit" value="查询"/>
<div class="box clearfix">
<div id="id1"><img src="img/pic1.jpg">普通门诊</div>
<div><img src="img/pic2.jpg">专家门诊</div>
<div><img src="img/pic3.jpg">特需门诊</div>
<div><img src="img/pic4.jpg">夜间门诊</div>
</div>
</th>
</form>
</table>
<table class="t2">
<tr class="tr1">
<td>医生姓名</td>
<td>所在科室</td>
<td>擅长</td>
<td></td>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
<td>六</td>
<td>日</td>
<td>联系医生</td>
</tr>
<tr>
<td rowspan="3"><p><b>马文</b></p><br>副主任医师</td>
<td rowspan="3">眼科</td>
<td rowspan="3">视神经,视网膜脉络膜疾</td>
<td><p>上</p></td>
<td><img src="img/pic2.jpg"></td>
<td></td>
<td><img src="img/pic2.jpg"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td rowspan="3"></td>
</tr>
<tr>
<td><p>下</p></td>
<td></td>
<td><img src="img/pic2.jpg"></td>
<td><img src="img/pic2.jpg"></td>
<td></td>
<td><img src="img/pic2.jpg"></td>
<td></td>
<td></td>
</tr>
<tr>
<td><p>晚</p></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="3"><p><b>刘运良</b></p><br>其他</td>
<td rowspan="3">神经内科</td>
<td rowspan="3">临床神经病学,脑神经</td>
<td><p>上</p></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><img src="img/pic2.jpg"></td>
<td></td>
<td></td>
<td rowspan="3"></td>
</tr>
<tr>
<td><p>下</p></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><p>晚</p></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="3"><p><b>蒋剑</b></p><br>主治医师</td>
<td rowspan="3">眼科</td>
<td rowspan="3"></td>
<td><p>上</p></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><img src="img/pic1.jpg"></td>
<td></td>
<td></td>
<td rowspan="3"></td>
</tr>
<tr>
<td><p>下</p></td>
<td></td>
<td></td>
<td><img src="img/pic1.jpg"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><p>晚</p></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="3"><p><b>贺楚风</b></p><br>主治医师</td>
<td rowspan="3">耳鼻咽喉科</td>
<td rowspan="3"></td>
<td><p>上</p></td>
<td><img src="img/pic1.jpg"></td>
<td></td>
<td><img src="img/pic1.jpg"></td>
<td><img src="img/pic1.jpg"></td>
<td><img src="img/pic1.jpg"></td>
<td></td>
<td></td>
<td rowspan="3"></td>
</tr>
<tr>
<td><p>下</p></td>
<td><img src="img/pic1.jpg"></td>
<td></td>
<td></td>
<td></td>
<td><img src="img/pic1.jpg"></td>
<td></td>
<td></td>
</tr>
<tr>
<td><p>晚</p></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="3"><p><b>吕冰清</b></p><br>其他</td>
<td rowspan="3">神经内科</td>
<td rowspan="3">小儿神经病 弱智和脑瘫</td>
<td><p>上</p></td>
<td><img src="img/pic1.jpg"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td rowspan="3"></td>
</tr>
<tr>
<td><p>下</p></td>
<td></td>
<td><img src="img/pic1.jpg"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="id4">
<td><p>晚</p></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</body>
</table>
</body>
</html>
效果图:
文件夹 CSS样式引入以及图片文件夹图: