<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: red;
}
.div1{
/*注意
div 有默认的边框 3px
边框样式
dashed 虚线
solid 实线
dotted 圆点虚线
* */
border-color: darkgreen;
border-width: 10px;
border-style: dotted;
/*综合写法
无关顺序*/
border: 20px rosybrown solid;
}
.div2{
border-left: 20px dotted yellow;
}
</style>
</head>
<body>
<div class="div1">我是一个div</div>
<div class="div2">我是一个div</div>
</body>
</html>
表格的操作：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*当表格宽度不够内容宽度
内容将撑起表格的宽度
当表格的宽度足够内容时
表格的宽度就是你设置的宽度
这个规则高度一样适用
*/
.table1{
width: 100px;
height: 100px;
border: 1px red solid;
}
</style>
</head>
<body>
<!--创建三行三列带标题的表格-->
<table class="table1">
<caption>标题</caption>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<hr />
<!--两行两列表格
celllpadding单元格的内边距
cellspace单元格间的距离
rules显示内边框的分隔线
rows显示行
cols显示列
all都显示
-->
<table border="1px"width="200px"height="100px"
rules="cols">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>
表格的初识：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table>
<!--tr代表一行
th代表表头列默认是加粗居中效果
-->
<tr>
<th>表头</th>
<th>表头</th>
<th>表头</th>
</tr>
<tr>
<!--td代表表格一行中某个元素-->
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
</tr>
</table>
<!--创建三行两列表格-->
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr></tr>
<tr></tr>
</table>
</body>
</html>
表格的合并：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--创建一个三行三列的表格-->
<!--rowspan合并行
colspan合并列
-->
<table border="1">
<tr>
<td rowspan="2">单元格</td>
<td colspan="2">单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
</body>
</html>
表格的嵌套：<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--创建一个三行三列的表格
嵌套 p标签 span img
表格嵌套标签时 嵌套在td标签上
-->
<table border="1px">
<tr>
<td>
<p>我是一个p</p>
</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>
<img src="img/th[9].jpg">
</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</body>
</html>
表格的结构：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--表哥的结构
表的标题 表头 表内容 表尾构成
完整的表格好处
标签写全可以让浏览器更好的加载提高效率
-->
<table>
<!--标题默认居中-->
<caption>标题</caption>
<!--表头-->
<thead>
<tr>
<th>表头</th>
<th>表头</th>
<th>表头</th>
</tr>
<th>表头</th>
<th>表头</th>
<th>表头</th>
</thead>
<!--表内容-->
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
<!--表尾-->
<tfoot>
<tr>表尾</tr>
<tr>表尾</tr>
<tr>表尾</tr>
</tfoot>
</table>
</body>
</html>
表格的练习：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1px">
<caption>课程表</caption>
<tr>
<td colspan="2" >时间</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
</tr>
<tr>
<td rowspan="4">上午</td>
<td>第一节课</td>
<td>1</td>
<td rowspan="4">大型数据库应用开发</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>第二节课</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>第三节课</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>第四节课</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="4">下午</td>
<td>第五节课</td>
<td rowspan="2">大课</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>第六节课</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>第七节课</td>
<td></td>
<td></td>
<td colspan="3">自习</td>
</tr>
<tr>
<td>第八节课</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
成果展示：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1px" rules="all">
<tr>
<td colspan="5">基本情况</td>
</tr>
<tr>
<td>姓名</td>
<td> </td>
<td>性别</td>
<td> </td>
<td rowspan="5">
<img src="img/th.jpg"
</td>
</tr>
<tr>
<td>民族</td>
<td></td>
<td>出生日期</td>
<td></td>
</tr>
<tr>
<td>政治面貌</td>
<td></td>
<td>健康状况</td>
<td></td>
</tr>
<tr>
<td>籍贯</td>
<td></td>
<td>学历</td>
<td></td>
</tr>
<tr>
<td>电子信箱</td>
<td></td>
<td>联系电话</td>
<td></td>
</tr>
<tr>
<td colspan="5">工作经历</td>
</tr>
<tr>
<td colspan="2">时间</td>
<td colspan="2">工作名称</td>
<td>职位</td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td colspan="5">教育情况</td>
</tr>
<tr>
<td colspan="2">时间</td>
<td colspan="2">院校名称</td>
<td>专业</td>
</tr>
<tr>
<td colspan="2">2011.9-2015.6</td>
<td colspan="2">西安工程大学</td>
<td>热能与动力工程</td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td colspan="5">技能特长</td>
</tr>
<tr>
<td colspan="5"></td>
</tr>
<tr>
<td colspan="5">技能特长</td>
</tr>
<tr>
<td colspan="2">时间</td>
<td colspan="2">培训机构</td>
<td>培训名称</td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td colspan="5">英文/计算机水平</td>
</tr>
<tr>
<td colspan="5">普通话水平：一般 英语水平：一般 电脑应用：熟练</td>
</tr>
<tr>
<td colspan="5">自我评价</td>
</tr>
<tr>
<td colspan="5">
本人性格热情开朗，待人友好，为人诚实谦虚。工作勤奋，认真负责，能吃苦耐劳，尽职尽责，有耐心。具有亲和力，平易近人，善于与人沟通。</td>
</tr>
</table>
</body>
</html>
511
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
