HTML5+CSS3(五)
来自与智慧职教 整理笔记
5.1 细边框表格
/image-20221118114726754.png)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<table width="800" border="1" cellspacing="5" cellpadding="5">
<thead>
<tr>
<th colspan="3">合并表头</th>
</tr>
</thead>
<tbody>
<tr>
<td>第1行第1列</td>
<td>第1行第2列</td>
<td>第1行第3列</td>
</tr>
<tr>
<td>第2行第1列</td>
<td>第2行第2列</td>
<td>第2行第3列</td>
</tr>
<tr>
<td>第3行第1列</td>
<td>第3行第2列</td>
<td>第3行第3列</td>
</tr>
</tbody>
</table><br/>
<table width="800" border="1" cellspacing="5" cellpadding="5">
<thead>
<tr>
<th colspan="3">合并表头</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">合并列</td>
</tr>
<tr>
<td>第2行第2列</td>
<td>第2行第3列</td>
</tr>
<tr>
<td>第3行第2列</td>
<td>第3行第3列</td>
</tr>
</tbody>
</table><br/>
<table width="800" border="1" cellspacing="5" cellpadding="5">
<thead>
<tr>
<th colspan="3">合并表头</th>
</tr>
</thead>
<tbody>
<tr>
<td>第2行第2列</td>
<td>第2行第3列</td>
</tr>
<tr>
<td>第2行第2列</td>
<td colspan="2" rowspan="2">合并2行2列</td>
</tr>
<tr>
<td>第3行第2列</td>
</tr>
</tbody>
</table>
</body>
</html>5.2 细边框表格的三种制法
背景设置法
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> table {background-color: black;} tr,th,td{background-color: white;} </style> </head> <body> <table cellspacing="1" cellpadding="15"> <tr> <td>第1行第1列</td> <td>第1行第2列</td> <td>第1行第3列</td> </tr> <tr> <td>第2行第1列</td> <td>第2行第2列</td> <td>第2行第3列</td> </tr> <tr> <td>第3行第1列</td> <td>第3行第2列</td> <td>第3行第3列</td> </tr> </table><br/> </body> </html>边框设置边框设置法
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> table{ border-right:2px solid black; border-bottom: 2px solid black; } th,td,tr{ border-top: 2px solid black; border-left: 2px solid black; border-right:0; border-bottom:0; } </style> </head> <body> <table cellspacing="0" cellpadding="15"> <tr> <td>第1行第1列</td> <td>第1行第2列</td> <td>第1行第3列</td> </tr> <tr> <td>第2行第1列</td> <td>第2行第2列</td> <td>第2行第3列</td> </tr> <tr> <td>第3行第1列</td> <td>第3行第2列</td> <td>第3行第3列</td> </tr> </table><br/> </body> </html>3.边框设置法重叠法
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> .two{ width: 500px; background-color: white; /*合并重复的边框*/ border-collapse:collapse; } .two th{ border: 2px solid black; } .two td{ border: 2px solid black; } </style> </head> <body> <table cellspacing="0" cellpadding="15" class="two"> <tr> <td>第1行第1列</td> <td>第1行第2列</td> <td>第1行第3列</td> </tr> <tr> <td>第2行第1列</td> <td>第2行第2列</td> <td>第2行第3列</td> </tr> <tr> <td>第3行第1列</td> <td>第3行第2列</td> <td>第3行第3列</td> </tr> </table><br/> </body> </html>
5.3 表格隔行变色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
/*:nth-child(odd) 偶数*/
table tr:nth-child(odd){
background-color: azure;
}
/*:nth-child(even) 奇数*/
table tr:nth-child(even){
background-color: cyan;
}
table{
border:2px solid black;
border-collapse: collapse;
}
table tr td{
border: 2px solid black;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="15">
<tr>
<td>第1行第1列</td>
<td>第1行第2列</td>
<td>第1行第3列</td>
</tr>
<tr>
<td>第2行第1列</td>
<td>第2行第2列</td>
<td>第2行第3列</td>
</tr>
<tr>
<td>第3行第1列</td>
<td>第3行第2列</td>
<td>第3行第3列</td>
</tr>
<tr>
<td>第4行第1列</td>
<td>第4行第2列</td>
<td>第4行第3列</td>
</tr>
</table><br/>
</body>
</html>5.4 鼠标移动到行变色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
tr:hover{
background-color: cornflowerblue;
}
table{
border:2px solid black;
border-collapse: collapse;
}
table tr td{
border: 2px solid black;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="15">
<tr>
<td>第1行第1列</td>
<td>第1行第2列</td>
<td>第1行第3列</td>
</tr>
<tr>
<td>第2行第1列</td>
<td>第2行第2列</td>
<td>第2行第3列</td>
</tr>
<tr>
<td>第3行第1列</td>
<td>第3行第2列</td>
<td>第3行第3列</td>
</tr>
<tr>
<td>第4行第1列</td>
<td>第4行第2列</td>
<td>第4行第3列</td>
</tr>
</table><br/>
</body>
</html>5.5 简历的制作
/image-20221206131740680.png)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
h3{
margin:0px auto;
text-align: center;}
table{
margin: 0px auto;
border-collapse: collapse;
text-align: center;
}
img{
margin:0px 40px;
}
td:nth-child(1){
background-color: darkgrey;
}
td:nth-child(3){
background-color: darkgrey;
}
</style>
</head>
<body>
<h3>个人简历</h3>
<table width="800px" border="1">
<tr>
<td>姓名</td>
<td>张三</td>
<td>性别</td>
<td>
<input type="radio" checked value="nan" name="sex">男
<input type="radio" value="nv" name="sex">女
</td>
<td rowspan="5" colspan="2" align="center">
<img src="img/pyy.jpg" width="100">
</td>
</tr>
<tr>
<td>籍贯</td>
<td>北京市</td>
<td>政治面貌</td>
<td>
<input type="radio" checked value="pepole" name="shenfen">群众
<input type="radio"value="tuanyuan" name="shenfen">团员
</td>
</tr>
<tr>
<td>民族</td>
<td>
<select name="minzu" id="minzu">
<option value="han">汉</option>
<option value="man">满</option>
<option value="meng">蒙</option>
<option value="hui">回</option>
</select>
</td>
<td>学历</td>
<td>博士</td>
</tr>
<tr>
<td>掌握外语语种</td>
<td></td>
<td>熟悉程度</td>
<td>
<input type="radio" value="yiban" name="yuyan">一般
<input type="radio" checked value="jingtong" name="yuyan">精通
</td>
</tr>
<tr>
<td>出生年月</td>
<td>1986.09.21</td>
<td>健康状况</td>
<td>健康</td>
</tr>
<tr>
<td>专业</td>
<td>计算机应用及管理</td>
<td>计算机水平</td>
<td>
<input type="radio" value="chuji" name="dengji">初级
<input type="radio" value="zhongji" name="dengji">中级
<input type="radio" checked value="gaoji" name="dengji">高级
</td>
<td>计算机等级</td>
<td>二级</td>
</tr>
<tr>
<td>特长爱好</td>
<td colspan="5">
<input type="checkbox" checked value="xuexi" name="techang">学习
<input type="checkbox" checked value="xuexi" name="techang">网页制作
<input type="checkbox" checked value="xuexi" name="techang">数据库
<input type="checkbox" checked value="xuexi" name="techang">IOS开发
</td>
</tr>
<tr>
<td>个人主页</td>
<td colspan="5">
<a href="http://www.baidu.com" target="_blank">我的主页</a>
</td>
</tr>
<tr>
<td>家庭住址</td>
<td colspan="5">北京市朝阳区</td>
</tr>
<tr>
<td>联系电话</td>
<td colspan="2">010-12345678</td>
<td>手机</td>
<td colspan="2"><input type="text" value="13800000000"></td>
</tr>
<tr>
<td>奖励情况</td>
<td colspan="2">
1.奥林匹克系信息技术(网页制作)比赛 三等奖<br/>
2.市网页制作比赛 二等奖<br/>
3.计算机VFP二级证书<br/>
4.微软工程师认证<br/>
</td>
<td>个人简历</td>
<td colspan="2">
<ul>
<li>1999.10 毕业于XX中学</li>
<li>2002.10 毕业于XX大学</li>
</ul>
</td>
</tr>
<tr>
<td></td>
<td colspan="5">2006.1-2006.6 xxxx 测试人员</td>
</tr>
</table>
</body>
</html>
