HTML表格

存在即是合理的。 表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。

目录

• 创建表格
• 表格属性
  : 单元格居中对齐/左右对齐
  : 单元格与单元格的距离
  : 内容与单元格边框距离
  : 表格文字居中对齐
• 表头标签
  : 表格标题
  : 表格结构(了解）
  : 合并单元格(难点)
• 表单标签(掌握)
  : input 控件(重点)
  : label标签(理解)
  : textarea控件(文本域)
  : 下拉菜单及各种控件代码展示
  : 表单域

创建表格:

在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下：

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

在上面的语法中包含三对HTML标签，分别为 table</table、tr</tr、td</td，他们是创建表格的基本标签，缺一不可，下面对他们进行具体地解释

1.table用于定义一个表格。
2.tr 用于定义表格中的一行，必须嵌套在 table标签中，
	在table中包含几对 tr，就有几行表格。
3.td /td：用于定义表格中的单元格，必须嵌套在<tr></tr>标签中
	一对 <tr> </tr>中包含几对<td></td>，就表示该行中有多少列（或多少个单元格）。

注意：

1. <tr></tr>中只能嵌套<td></td>
2. <td></td>标签，他就像一个容器，可以容纳所有的元素

表格属性:

单元格居中对齐/左右对齐:

单元格与单元格的距离:

内容与单元格边框距离:

表格文字居中对齐:

表头标签:

表头单元格一般位于表格的第一行或第一列，其文本加粗居中，如下图所示，即为设置了表头的表格。设置表头非常简单，只需用表头标签th</th替代相应的单元格标签td</td即可。[加粗且居中]

表格标题:

表格的标题： caption
定义和用法
caption 元素定义表格标题。

<table>
   <caption>我是表格标题</caption>
</table>

caption 标签必须紧随 table 标签之后。
只存在 表格里面
您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

---

表格结构（了解）:

在使用表格进行布局时，可以将表格划分为头部、主体和页脚（页脚因为有兼容性问题，我们不在赘述），具体 如下所示：

<thead></thead>：用于定义表格的头部。

必须位于<table></table> 标签中，一般包含网页的logo和导航等头部信息。

<tbody></tbody>：用于定义表格的主体。

位于<table></table>标签中，一般包含网页中除头部和底部之外的其他内容。

您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

合并单元格(难点):

跨行合并：rowspan 跨列合并：colspan

合并单元格的思想：

 将多个内容合并的时候，就会有多余的东西，把它删除。    例如 把 3个 td 合并成一个， 那就多余了2个，需要删除。

 公式：  删除的个数  =  合并的个数  - 1   

合并的顺序 先上 后下 先左 后右

1. 先确定是跨行还是跨列合并
2. 根据 先上 后下 先左 后右的原则找到目标单元格
3. 删除单元格 删除的个数 = 合并的个数 - 1

表单标签(掌握):

表单控件：

   包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

提示信息：

    一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。

表单域：

  他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

input 控件(重点):

label标签(理解):

label 标签为 input 元素定义标注（标签）。

table

作用： 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点

如何绑定元素呢？

for 属性规定 label 与哪个表单元素绑定。

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

textarea控件(文本域):

text 文本框 只能写一行文本呢

textarea 文本域

如果需要输入大量的信息，就需要用到textarea/textarea标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：

<textarea cols="每行中的字符数" rows="显示的行数">
  文本内容
</textarea>

下拉菜单:

使用select控件定义下拉菜单的基本语法格式如下 select 选择

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>

注意：

1. select</select>中至少应包含一对<option></option。
2. 在option 中定义selected =" selected "时，当前项即为默认选中项。
   
   
   
   
   
   
   
   
   
   

表单域:

在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

常用属性：

1. Action
   在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
2. method
   用于设置表单数据的提交方式，其取值为get或post。
3. name
   用于指定表单的名称，以区分同一个页面中的多个表单。

注意： 每个表单都应该有自己表单域。