1、表格的作用
像Excel表格一样显示大量的数据
2、表格的结构
table 声明表格
tr 行
td 列
3、表格的属性
caption 表格的标题
border 边框线
width 宽度
height 高度
cellspacing 单元格和单元格之间的间距
cellpadding 单元格与内容之间的空隙
align 表格的水平对齐
left 左对齐
right 右对齐
center 水平居中
valign 垂直对齐
top 上对齐
bottom 下对齐
middle 垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" width="400px" height="300px" cellspacing="0" bordercolor="red" >
<tr align="center">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr align="center" valign="middle">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td align="right" valign="top">2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>
4、表格合并的属性
合并行 rowspan
合并列 colspan
跨行的合并都是合并行，不跨行合并的都是合并列，不管是合并行还是合并列都给td设置合并属性
快捷键
4行3列
tr*4>td*3 按tab键
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>前端技术阶段划分标准</h3>
<table border="1" cellspacing="0">
<col width="200px">
<col width="200px">
<col width="200px">
<col width="200px">
<col width="200px">
<tr align="center">
<td></td>
<td>初级</td>
<td>中级</td>
<td>高级</td>
<td>专家</td>
</tr>
<tr align="center">
<td>标准</td>
<td>被产品怼的说不出来话</td>
<td>跟产品互怼不相上下</td>
<td>怼的产品没话说</td>
<td>直接将其怼辞职</td>
</tr>
<tr align="center">
<td>用户A</td>
<td colspan="4"></td>
<!-- <td></td>
<td></td>
<td></td> -->
</tr>
<tr align="center">
<td>用户B</td>
<td rowspan="2"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center">
<td>用户C</td>
<!-- <td></td> -->
<td></td>
<td></td>
<td></td>
</tr>
</table>
<br>
<br>
<br>
<table border="1" width="800px" height="250px" cellspacing="0">
<tr>
<td colspan="4"></td>
<!-- <td></td>
<td></td>
<td></td> -->
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td rowspan="3"></td>
</tr>
<tr>
<td colspan="2" rowspan="2"></td>
<!-- <td></td> -->
<td></td>
<!-- <td></td> -->
</tr>
<tr>
<!-- <td colspan="2"></td> -->
<!-- <td></td> -->
<td></td>
<!-- <td></td> -->
</tr>
</table>
</body>
</html>
5、表单
作用：收集用户信息
标签结构
form 声明变量
<input /> 表单控件
form的属性
action 表单提交的地址
method 数据的提交方式
get （提交的数据不安全，数据传输量小，不会超过2kb）
post （推荐使用，提交数据比较安全，传送数据量大）
input的属性
type 表单控件的类型
value input的内容，占位
placeholder 提示信息，不占位
name 如果文本框或者密码框没有name，数据无法提交给服务器
maxlength 控制用户输入的内容长度
type类型
text 文本框
password 密码框
submit 提交按钮
reset 重置按钮
button 空按钮（自定义按钮）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<p>
<b>用户名：</b>
<input type="text">
</p>
<p>
<b>密 码：</b>
<input type="password">
</p>
<p>
<input type="submit">
<input type="reset">
<input type="button">
</p>
</form>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
