<doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
</head>
<body>
<table border="1">
<tr>
<td>学生名称</td>
<td>竞赛学科</td>
<td>分数</td>
</tr>
<tr>
<td>小明</td>
<td>数学</td>
<td>87</td>
</tr>
<tr>
<td>小李</td>
<td>英语</td>
<td>86</td>
</tr>
<tr>
<td>小梦</td>
<td>物理</td>
<td>72</td>
</tr>
</table>
</body>
</html><doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标签的属性</title>
</head>
<body>
<table border="1" width="400" height=“240” align="center">
<tr height=“80” align="center" valign="top" bgcolor="#00CCFF" >
<td>姓名</td>
<td>性别</td>
<td>地址</td>
<td>电话</td>
</tr>
<tr>
<td>小王</td>
<td>女</td>
<td>111222333</td>
<td>海定区</td>
</tr>
<tr>
<td>小李</td>
<td>男</td>
<td>555666777</td>
<td>朝阳区</td>
</tr>
<tr>
<td>小张</td>
<td>男</td>
<td>888999000</td>
<tr>西城区</tr>
</tr>
</table>
</body> <doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标签的属性</title>
</head>
<body>
<table border="1" width="400" height=“240” align="center">
<tr height=“80” align="center" valign="top" bgcolor="#00CCFF" >
<td>姓名</td>
<td>性别</td>
<td>地址</td>
<td>电话</td>
</tr>
<tr>
<td>小王</td>
<td>女</td>
<td>111222333</td>
<td rowspan="3">北京</td>
</tr>
<tr>
<td>小李</td>
<td>男</td>
<td>555666777</td>
</tr>
<tr>
<td>小张</td>
<td>男</td>
<td>888999000</td>
</tr>
</table>
</table>
</body> <doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS控制表格边框</title>
<style type=“text/css”>
table{
width: 400px；
height：300px；
border：1px solid #30F；
}
th，td{border: 1px solid #30F}
</style>
</head>
<body>
<table>
<caption>2018腾讯手游排行榜</caption>
<tr>
<th>热游榜</th>
<th>游戏名</th>
<th>类型</th>
<th>特征</th>
</tr>
<tr>
<th>1</th>
<th>王者荣耀</th>
<th>策略战棋</th>
<th>3D 竞技</th>
</tr>
<tr>
<th>2</th>
<th>天龙八部手游</th>
<th>角色扮演</th>
<th>3D 武侠</th>
</tr>
<tr>
<th>3</th>
<th>龙之谷手游</th>
<th>角色扮演</th>
<th>3D 格斗</th>
</tr>
<tr>
<th>4</th>
<th>弹弹堂</th>
<th>休闲益智</th>
<th>Q版 竞技</th>
</tr>
<tr>
<th>5</th>
<th>火影忍者</th>
<th>角色扮演</th>
<th>3D格斗</th>
</tr>
</table></html><doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS控制表格边框</title>
<style type=“text/css”>
table{
border：1px solid #30F；
}
th，td{
border: 1px solid #30F
padding：50px；
margin：50px；
}
</style>
</head>
<body>
<table>
<tr>
<th>游戏名称</th>
<th>类型</th>
<th>特征</th>
</tr>
<tr>
<th>王者荣耀</th>
<th>策略战棋</th>
<th>3D 竞技</th>
</tr>
<tr>
<th>天龙八部手游</th>
<th>角色扮演</th>
<th>3D 武侠</th>
</tr>
</table></html><doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS控制单元格的宽高</title>
<style type=“text/css”>
table{
border：1px solid #30F；
border-collapse: collapse;
}
th，td{
border: 1px solid #30F
}
.one{ width: 100px；height：80px； }
.two{ height: 40px； }
.three{ width: 300px； }
</style>
</head>
<body>
<table>
<tr>
<td class="one">>A房间</td>
<td class="two">B房间</td>
</tr>
<tr>
<td class="three">C房间</td>
<td class="four">D房间</td>
</tr>
</table></html><doctype html>
<html>
<head>
<meta charset="utf-8">
<title>form属性的使用</title>
</head>
<body>
<form action="#" method="get" id="user-form">
请输入你的姓名：<input type="text" name="first-name"/>
<input type="submit" value="提交" />
</form>
<p>下面的输入框在form标签外，但因为指定了form属性为表单的id所以该输入框任然属于表单的一部分</p>
请输入你的昵称：<input type="text" name="last-name"/ form="user-form"> </html>
<doctype html>
<html>
<head>
<meta charset="utf-8">
<title>list属性的使用</title>
</head>
<body>
<form action="#" method="get">
请输入网址：<input type="url" list="url-list" name="weburl" />
<datalist id="url-list">
<option label="百度" value="https://www.baidu.com"></option>
<option label="博学谷" value="https://www.boxuegu.com"></option>
<option label="新浪" value="https://www.sinna.com，cn"></option>
</datalist></html><doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css控制表单样式</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form action="#" method="post">
<p>
<span>密码：</span>
<input type="password" name="pwd" class="pass" pattern="^[a-zA-Z]、w{5，17}￥">
</p>
<p>
<span>密码：</span>
<input type="password" name="pwd" class="pass" pattern="^[a-zA-Z]、w{5，17}￥">
</p>
<p>
<input type="password" name="pwd" class="pass" pattern="^[a-zA-Z]、w{5，17}￥">
</p>
</p>
</body>
</html>
<input type="submit" value="提交" />
</form>
</body>
</html>
</body>
</html>
</body>
</html>
</body>
</html>
</body>
</html>
