Html基础知识点2-表格

快来打我* 2021-11-04 14:26 285阅读 0赞

### 创建表格： ###

### 表格属性： ###

1.  边框：border
2.  单元格与单元格之间的空白间距：cellspacing
3.  单元格内容与单元格边框的空白间距：cellspadding
4.  宽度：width
5.  高度：height
6.  表格在网页中水平对齐方式：align　　（left、right、center）

一般情况下，表格属性的border、cellspacing、cellspadding设置为0，如下图：

![1739268-20190716110752210-752244944.png][]

### 表头标签： ###

一般位于第一行或第一列，用<th></th>代替<td></td>

例如：

![1739268-20190716111523640-1224630412.png][]

### 表格标题： ###

在<table></table>里写入<caption></caption>

例如：

![1739268-20190716111900924-257846754.png][]

### 合并单元格： ###

1.  rowspan 跨行合并
2.  clospan 跨列合并

### 表单标签： ###

*  input控件：

![1739268-20190716112702671-170905693.png][]

*  label标签：

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

*  textarea控件：

如果需要输入大量的信息，就需要用到<textarea></textarea>标签。通过textarea控件可以轻松地创建多行文本输入框

![1739268-20190716113307593-1855937696.png][]

语法：

### 下拉菜单： ###

语法：

注意：

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

![1739268-20190716114050602-214162666.png][]

### 表单域： ###

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

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

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

学习文档：

W3C : [http://www.w3school.com.cn/][http_www.w3school.com.cn]

MDN: [https://developer.mozilla.org/zh-CN/][https_developer.mozilla.org_zh-CN]

转载于:https://www.cnblogs.com/ld-xiaoluohao/p/11193931.html

[1739268-20190716110752210-752244944.png]: /images/20211104/5b8aa811fd104b4eb0b63dcc5b7f854c.png
[1739268-20190716111523640-1224630412.png]: /images/20211104/3a3e63ff0d3e450da1c5c533626149d4.png
[1739268-20190716111900924-257846754.png]: /images/20211104/a1343ba6eb4c4abda57a80b85f1e4605.png
[1739268-20190716112702671-170905693.png]: /images/20211104/fdbac597c0594fd58a14789e44d37377.png
[1739268-20190716113307593-1855937696.png]: /images/20211104/43046df1fd304f70a8cdfa18ada6654b.png
[1739268-20190716114050602-214162666.png]: /images/20211104/502a452cb9144efd9546b2db329706be.png
[http_www.w3school.com.cn]: http://www.w3school.com.cn/
[https_developer.mozilla.org_zh-CN]: https://developer.mozilla.org/zh-CN/