持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第17，点击查看活动详情
目录(表格属性)
一、前言
上一篇文章我整理以前的知识是：表格-常用属性：cellspacing、cellpadding、caption、thead等，详细可参考博文 [web快速入门之基础篇-html：11、表格-常用属性：cellspacing、cellpadding、caption、thead等] 这篇文章我将整理知识：表格-常用属性：colspan、colspan、表格的嵌套等
二、实例演示
1、实例代码
我们先来看看一个例子，如下代码：06_td设置colspan、rowspan.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>这是title标题</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<h3>--colspan（跨列）---</h3>
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td colspan="2">January</td>
<!-- <td colspan="3">January</td> -->
</tr>
<tr>
<td colspan="2">February</td>
</tr>
</table>
<h3>--rowspan（跨行）---</h3>
<table border="1" width="100" height="80">
<tr>
<td rowspan="2">a</td>
<td>b</td>
</tr>
<tr>
<td>c</td>
<!-- <td>d</td> -->
</tr>
</table>
</body>
</html>
2、效果演示
用谷歌浏览器打开运行，效果如下：
如果我把代码的跨列值改为“3”，跨行代码里面增加一个单元格“d”，效果如下：
三、知识点说明
1、不规则表格（td设置）
colspan（跨列）
定义和用法
colspan 属性规定单元格可横跨的列数。
<td colspan="value">
浏览器支持
所以浏览器都支持 colspan 属性。
没有浏览器支持 colspan="0"，这个值有特殊的意义。
注释：colspan="0" 指示浏览器横跨到列组的最后一列。
详见：www.w3school.com.cn/tags/att_td…
rowspan（跨行）
定义和用法
rowspan 属性规定单元格可横跨的行数
<td rowspan="value">
浏览器支持
所以浏览器都支持 rowspan 属性。
没有浏览器支持 rowspan="0"，这个值有特殊的意义。
注释：rowspan="0" 指示浏览器横跨到表格部分的最后一行（thead、tbody 或者 tfoot）。
详见：www.w3school.com.cn/tags/att_td…
2、表格的嵌套
解决复杂布局情况，td里写一个table
目录(表单操作)
一、前言
上一篇文章我整理以前的知识是：表格-常用属性：colspan、colspan、表格的嵌套等，详细可参考博文 [web快速入门之基础篇-html：12、表格-常用属性：colspan、colspan、表格的嵌套等] 这篇文章我将整理知识：表单-常用基本操作
二、表单知识点****
1、form：承载页面元素，备于做提交
<form action="a.jsp" method="post">\ </form>
2、form可以承载的：input、其它元素
3、input：单标记，靠 type 属性的不同取值
a、类型
<input type="text" />--文本框( 不写type属性, 默认为文本框 )
<input type="password" />--密码框
<input type="radio" />--单选按钮
<input type="checkbox" />--多选（复选/核选）框
<input type="submit" />--提交按钮，提交并刷新页面
<input type="reset" />--重置按钮，将页面恢复到原始状态
<input type="button" />--普通按钮
<input type="file" />--选择文件，以供上传
<input type="hidden" />--隐藏域，适用于记载那些不需要显示的关键数据
b、常用属性
id：需要的时候，唯一标识
name：名值对的方式提交数据
value：取决于需求
maxlength：文本框、密码框
readonly：只读
checked：单选、多选
4、列表框、下拉框：取决于 size 的取值
<select><br>
<option></option>
<option></option>
<option></option>
</select>
如何选择：页面布局
5、多行文本框
<textarea></textarea>
6、label：文本标签
<input type="radio" id="r1" />
<label for="r1">文本</label>
7、fieldset：元素圈起来
legend:为圈添加名称描述，即标题
比如：
<fieldset>
<legend>标题</legend>
</fieldset>
8、iframe：浮动框架
a、显示：一个浏览器窗口中显示多个html页面
main.html---页面
a.html---广告页面
b、嵌入到某个html页面里
<iframe src="url"></iframe>
三、实例演示
1、实例代码
我们先来看看一个例子，如下代码：01_表单.html
<!--版本信息-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>文档标题</title>
<meta http-equiv="refresh
" content="3" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<h1>增加管理员</h1>
<form>
用户名：<input type="text" name="n" value="aaa" /><br/>
密码：<input type="password" name="p" /><br />
性别：
<input type="radio" name="sex" value="0" />
男生
<input type="radio" name="sex" value="1" />
女生
<br/>
角色：
<fieldset style="width:35%">
<legend>请选择</legend>
<input id="r1" type="checkbox" name="role" value="sa" />
<label for="r1">超级管理员</label>
<br/>
<input type="checkbox" name="role" value="ad" />
普通管理员
</fieldset>
<br/>
状态：
<select>
<option>启用</option>
<option>停用</option>
<option>删除</option>
</select>
<br />
个人描述：
<textarea cols="20" rows="5">
</textarea>
<br/>
其他url页面显示(CSDN官网)：
<iframe src="https://passport.csdn.net"></iframe>
<br/>
<input type="submit" value="保存" />
<input type="reset" value="重填" />
<br />
<!--隐藏域控件-->
注：这是“隐藏域控件”<input type="hidden" value="111" />
</form>
</body>
</html>
2、效果演示
用谷歌浏览器打开运行，效果如下：
