HTML表格与表单

HTML表格：

1. 基本结构
2. 操作表格
3. 表格属性
4. 表格跨行跨列
5. 表格嵌套

基本语法：

<table>
  Caption -- 表格的标题  居中显示
    <thead> -- 表头
      Tr
        Th/th -- 表格头，内容居中显示，加粗显示
      /tr
</thead>
<tbody> -- 表格的主体
      Tr
        Td/td -- 表体 -- 默认靠左显示 不加粗
      /tr
<tbody>
<tfoot> -- 脚注
      Tr
        Td/td -- 表体 -- 默认靠左显示 不加粗
      /tr
</tfoot>
</table>

创建一个三行二列的表格实例：

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
    <tr>
    <td></td>
    <td></td>
  </tr>
    <tr>
    <td></td>
    <td></td>
  </tr>
</table>

带结构表格 – 表格划分三个部分：

1. thead-----表格头部
2. tbody-----表格主题
3. tfoot----- 表格的脚步

table表格的属性

Width px / % 规定表格的宽度
Align left center right 表格相对周围元素的对齐方式
Border px 规定表格边框的宽度
Bgcolor rgb(x,x,x) #xxxxxx colorname 表格的背景颜色
Cellpadding px /% 单元边沿和内容之间的空白
Cellspacing px /% 单元格之间的空白Frame 属性值 规定外侧边框的哪个部分是可见的
rules 属性值 规定内测边框的哪个部分是可见的

frame外部边框样式

1、void 不显示外侧边框
2、above 显示上部外侧边框
3、below 显示下部的外侧边框
4、hsides 显示上下部
5、vsides 显示左右
6、lhs 显示左边
7、rhs 显示右边
8、box 显示所有四个边
9、border 显示四个边

1、tr标签的属性设置
align left center right justify char 行内容的水平对齐方式
valign top middle bottom baseline 行内容的垂直对齐方式
bgcolor rgb(x,x,x) #xxxxxx colorname 行的背景颜色

1.colorname 规定颜色的名称 比如;red yellow blue green pink
2，#xxxxxx / #xxx 16进制表示方式：#0~f的值rgb(x,x,x) 规定
3，rgb代码的字体颜色 0~255 （拓展：rgba） – 对于颜色设置不支持颜色的
三原色：红绿蓝
颜色代码表 ：https://www.sioe.cn/yingyong/yanse-rgb-16/

td和th属性设置

1.align left center right justify char 单元格内容的水平对齐方式
2.valign top middle bottom baseline 单元格内容的垂直对齐方式
3.bgcolor rgb(x,x,x) #xxxxxx colorname 单元格的背景颜色
4.width px % 单元格的宽度
5.height % px 单元格的高度

thead tbody tfoot属性设置

align left center right justify char 单元格内容的水平对齐方式
valign top middle bottom baseline 单元格内容的垂直对齐方式

案例编写：制作课程表

colspan – 列合并
rowspan – 行合并

表格的嵌套

<table>
  <tr>
    <td>....</td>
  <td>
<table>
  <tr>
      <td></td>
      <td></td>
  </tr>
</table>
    </td>
</tr>
</table>

表单

表单控件的常用属性：
name 指定控件的名称，可重复 – 给后台获取数据使用
id 指定标签的唯一识别（类似身份证）
value 输入的控件的值（收集，设置） – 用于传递到后台使用的
checked 复选框（单选）默认被选中的项目
selected 列表框默认被选中的项目
src 图片框的图片来源
onclick 鼠标的单击事件 – JavaScript脚本的事件
disabled 禁用该控件
multiple 允许多选（适用于普通列表框）

action----指传到后台的，收集数据传递到后台进行响应
method—1.post 隐藏
2 .get 隐藏性不是那么好

label
1、此标签可以放置纯文本，专门用于显示文字使用的，和不加此标签效果一样；
2、后期可以对此文本进行css样式的设置

radio的name属性

1、name是一样的话会被认为是一组单选框，意味着只能选中一个；
2、name值不一样，表示他们不是一组，可以同时选中；

分组下拉菜单 – optgroup

表格变表单：

	<table border="0" align="center" bgcolor="#f2f2f2" width="500px">
		<h1 align="center">注册信息</h1>
		<tr align="left">
			<td>用户名：</td>		
			<td>
				<input type="text" name="" id="" placeholder="请输入用户名">
			</td>
		</tr>
		<tr align="left">
			<td>密码：</td>
			<td>
				<input type="password" name="" id=""
				placeholder="请输入密码">
			</td>
		</tr>
		<tr align="left">
			<td>确认密码：</td>
			<td>
				<input type="password" name="" id="" placeholder="请重新输入密码">
			</td>
		</tr>
		<tr align="left">
			<td>上传图片:</td>
			<td>
				<input type="button" value="浏览..." name="" id="">未选择文件.
			</td>
		</tr>
	</table>

单选文本框：

		<label>
			<input type="radio" name="xb" id="1">男
		</label>
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<label>
			<input type="radio" name="xb" id="2">女
		</label><br/>

多选文本框：

		<label>
			<input type="checkbox" name="苹果" id="pg">苹果
		</label><br/>
		<label>
			<input type="checkbox" name="梨子" id="lz">梨子
		</label><br/>
		<label>
			<input type="checkbox" name="桃子" id="tz">桃子
		</label>

下拉列表框：

	<form action="">
			<label>下拉菜单：</label><br>
		<select name="动物">			
			<option value="猴子">猴子</option>
			<option value="狗">狗</option>
			<option value="猫">猫</option>
			<option value="兔子">兔子</option>
			<option value="鱼">鱼</option>
		</select><br>
			<label>列表：</label><br>
		<select size="3" multiple="ture">
			<option value="苹果">苹果</option>
			<option value="香蕉">香蕉</option>
			<option value="橙子">橙子</option>
			<option value="土豆">土豆</option>
			<option value="西红柿">西红柿</option>
		</select>
	</form>

表格嵌套：

	<h1>Web前端课程</h1>
	<ol>
		<li>HTML</li>
			<ul type="square">
				<li>HTML标签</li>
				<li>HTML语法</li>
				<li>HTML结构</li>
			</ul>
		<li>CSS</li>
			<ul type="square">
				<li>CSS语法</li>
				<li>CSS样式</li>
				<li>CSS选择器</li>
			</ul>
		<li>JavaScript</li>
			<ul type="square">
				<li>JS数据类型</li>
				<li>JS对象</li>
				<li>JS循环</li>
			</ul>
	</ol>