1、表格的使用
1)、基本使用
作用:显示数据<table width="500"></table>
表示单元格的盒子;
<body>
<table width="500" border="1" align="center" cellpadding="10" cellspacing="0" >
<caption>数字表格</caption>
<tr>
<th>数字</th>
</tr>
<tr>
<td align="center">123</td>
</tr>
<tr>
<td >123</td>
</tr>
</table>
</body>
caption:表示表格标题
tr:表示行
td:表示单元格
th:表示表头单元格,使得字体自动居中加粗
align:设置在网页中水平位置
cellpadding:设置表格内内容与边框之间的距离
单位:像素
cellspacing:设置单元格与单元格边框之间的距离
单位:像素
表格内无“列”的概念。
表格规范一般为 3参为0
![img_23461f4f8056ded8255fef63d09d0280.png](https://i-blog.csdnimg.cn/blog_migrate/5bc191ccc3e5bb3af8f570f945efb012.png)
2)、合并单元格
rowspan:表示跨行合并
colspan:表示跨列合并
<body>
<table width="500" border="1" align="center" cellpadding="10" cellspacing="0" >
<caption>数字表格</caption>
<thead>
<tr>
<th colspan="3">数字</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center" colspan="2">123</td>
<td align="center">abs</td>
</tr>
<tr>
<td rowspan="2">123</td>
<td align="center">123</td>
<td align="center">abs</td>
</tr>
<tr>
<td align="center">123</td>
<td align="center">abs</td>
</tr>
</tbody>
</table>
</body>
![img_501c025941985e96836fa21485c097e6.png](https://i-blog.csdnimg.cn/blog_migrate/c5fc39a961496a126bfcc502daf8baf1.png)
2、表单
<body>
<table width="600" border="0" cellspacing="5" cellpadding="0" align="center">
<caption><h4>揣着上坟的心情来上班</h4></caption>
<tr>
<td>所在地区</td>
<td ><input type="text" value="帝都" maxlength="4"></td>
</tr>
<tr>
<td>密码</td>
<td ><input type="password" ></td>
</tr>
<tr>
<td>性别</td>
<td>
男<input type="radio" name="sex">
女<input type="radio" name="sex">
不确定<input type="radio" name="sex">
</td>
</tr>
<tr>
<td>喜欢类型</td>
<td>
小鲜肉<input type="checkbox" checked="true">
老腊肉<input type="checkbox">
半男不女<input type="checkbox">
</td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="注册" >
<input type="submit" value="提交" >
<input type="reset" value="重置" >
<input type="image" src="error.png">
</td>
</tr>
<tr>
<td>上传头像</td>
<td>
<input type="file">
</td>
</tr>
</table>
</body>
1)、input属性
type的值包含:text(单行文本输入框)、password(密码输入框)、radio(单选输入框)、checkbox(复选框)、button(普通按钮)、submit(提交按钮)、reset(重置按钮)、image(图像形式的提交按钮)、file(文件域);
value:input控件中的默认文本;
name:当input的type为radio时(单选框),则必须设置该属性,并且同一组内的name的值必须相同,才可实现单选的效果;
size:input控件显示宽度
checked: 选择控件默认选中的项目,类似于radiobutton
maxlength:控件允许输入的最大字数
![img_04bc72f0c5897a685cf3a30fabec6e37.png](https://i-blog.csdnimg.cn/blog_migrate/b3c58b3784dc6741b1ba3a062d1e7d6c.png)
2)、label标签
<body>
<label >
用户名:<input type="text">
</label>
</body>
当点击用户名三个字的时候,光标即可直接在输入框内出现
![img_9103003a6129a2f957e0b3c5d7c35bd2.png](https://i-blog.csdnimg.cn/blog_migrate/024536ba34d76937301b6e1c429ad567.png)
3)、文本域
<body>
<textarea name="文本域" id="" cols="30" rows="10"></textarea>
</body>
![img_08813d52f5aeca818720b38a2d2037fc.png](https://i-blog.csdnimg.cn/blog_migrate/e8e61f07d26cd72adb7c451fe5f5c8ab.png)
cols:表示可输入列数
rows:表示可输入行数
3、下拉菜单
<body>
<select name="" id="" >
<option value="">北京</option>
<option value="" selected="selected">天津</option>
<option value="">上海</option>
</select>
</body>
selected :表示默认选择该选项
![img_23f9b44f69e3fdc26bd9374f3352223a.png](https://i-blog.csdnimg.cn/blog_migrate/60b1c9395ccbc73b0b59e4c68c7c8b0b.png)
4、表单域
<body>
<form action="wwww.baidu.com" method="get">
用户名:<input type="text" name="username">
<br/>
<br/>
密 码:<input type="password" name="password">
<br>
<br>
<input type="submit" value="提交" >
<input type="reset" value="重置">
</form>
</body>
action 表示:表单域提交收集到的数据到服务器的 url 地址。
method :提交方式 get 和 post 等等
![img_d8ae674d6f0f892510aa5678f3bc57ea.png](https://i-blog.csdnimg.cn/blog_migrate/696c374f15c3d4bff28ec768dbad88c1.png)