html创建表格有那些小技巧，表单中真的有这么多功能吗

html基础篇（第二篇）

上一篇 html 我们聊了初识 html 的基本常识和所用的浏览器内核以及基础的标签等等，这次我们再聊一聊 html 的表格和表单等语法。这是html基础偏的最后一讲，下次就到了前端重要的样式部分了！
注意：本系列文章适合新手小白入门学习。文章如有疏漏请指正。

html中的表格

一般来讲表格是用来展示数据的，而列表是用来布局的，表单是用来收集用户所填写的数据。表格的功能也十分重要，在早期的html中基本上都是用表格来布局用户的数据填写和布局。
创建表格的三步走

• table：用户定义表格的标签
• tr：用户定义表格中的行
• td：用户定义表格中的单元格
• th：表头的单元格（加粗显示，一般写在表头）

<table>
	// 如果是表头的话可以直接设置 th
	<th>
		<td>表头的标题</td>
	</th>
	// tr 表示表格行
	<tr>
	// td 表示行下的第一格
		<td>单元格内的文字</td>
		...
	</tr>
</table>

表格属性

• border：设置表格的边框（默认border = “0” 为无边框）
• cellspacing：设置单元格与单元格边框之间的空白间距（默认为2像素）
• cellpadding：设置单元格内容与单元格边框之间的间距
• width：设置表格的宽度 height：设置表格的高度
• align：设置表格在网页中的水平对齐方式：left、（向左）right（向右）、center（居中）
• caption：表示表格的标题，随着表格整体开始动 以上的这些属性都是可以直接在table 表格中设定的。
  见 图 1 所示

<table border width="300" height="50" align="center" cellspacing="10" cellpadding="5"  >
<caption>我是表格的标题，我随着表格移动</caption>
	<tr>
		<td></td>
		....
	</tr>
</table>

合并单元格

在表格中也可以有两种的合并操作，一个是跨行合并和跨列合并。

• 跨行合并：rowspan = “2”（2表示合并的个数）
• 跨列合并：colspan = “2”（2表示合并的个数）
  如 图 2 所示

<table>
	<tr>
 		<td>1</td>
 		// 跨行合并
  		<td rowspan=2>1</td>
 	</tr>
 
 	<tr>
 		<td>2</td>
	</tr>
 
  	<tr>
  		// 跨列合并
 		<td colspan="2">3</td>
 	</tr>
 
 	<tr>
 		<td>4</td>
  		<td>4</td>
 	</tr>
</table>

表格总结

• table：表格标签
• tr：表格行标签
• td：单元格标签
• th：表头单元标签
• caption：表格标题标签
• colspan：跨列合并
• rowspan：跨行合并

表格的划分结构

再有一个关于表格小小的扩展，在表格中其实还有一种形式表示，这种表示形式容易对表格控制，分为三部分，表头、正文和注脚。这样在chrome 的开发者工具打开，你所看到的是 头部和内容以及尾部三个部分，容易进行管理。如 图3 所示

• thead：表头
• tbody：正文
• tfoot：注脚

<table>
	<thead>
		<tr>
			<td>表格的头部部分</td>
		</tr>
	</thead>

	<tbody>
		<tr>
			<td>表格的内容部分</td>
		</tr>
	</tbody>

	<tfoot>
		<tr>
			<td>表格的尾部部分</td>
		</tr>
	</tfoot>
</table>

html中的列表标签

在html中还有一种标签是 列表标签，在未来布局的大多数场景中也有大量的使用。特别是整个页面的末尾有大量用到列表标签。
列表标签分为有序列表和无序列表。不过在未来css中都会对列表和p、div标签等等有一个初始化的css，对它们统一再修改。这在以后css中可以详细讲解。

• ul-li：无序列表
• ol-li：有序列表
• dl-dt：自定义列表
  见 图 4 所示

// 无序列表（使用频率很高）
<ul>
	<li>1</li>
	<li>2</li>
</ul>

// 有序列表
<ol>
	<li>1</li>
	<li>2</li>
</ol>

// 自定义列表
<dl>
	<dt>1</dt>
	<dt>2</dt>
</dl>

表单标签

表单是为了收集用户的信息
input：输入框标签

<input type = "属性值"  value = "你好">

在表单中value表示默认的文本值， type属性值有多种，分别有以下多种

• text：单行文本输入框
• password：密码输入框
• radio：单选按钮
• checkout：复选框
• image：图像形式的提交按钮
• file：文本域

以上基本上都是input输入框中type的属性值，在这里就不一一展示了，有兴趣可以自己打开编辑器例如下面这个例子试一试。在type 为 password 中

<input type="password" value="请输入密码">

除此之外，表单中还有checked的属性、button和 submit以及reset。

• checked：表示默认选中状态（常见在单选框和复选框中）
• button：普通按钮（普通按钮需要写value值，表示按钮上面的名字）
• submit：提交属性（提交不用写value值）
• reset：重置按钮

// checked 表示默认选中状态
<input type="radio" checked="checked">

label标签

label：表示标记的标签，label标签不会在页面中有任何的展示。

<label> 用户名：<input type="text" name="userName"></input> </label>

这段表示在用户鼠标点击“用户名”三个字中的时候就直接可以在input中输入内容了，更能增加了用户体验。

textarea文本域

textarea：表示文本域的内容，通常用于留言板这类的情况。

select下拉框

select：表示下拉框

<select>
	<option>1</option>
	<option>2</option>
	<option>3</option>
</select>

但是随着现在ui框架的诞生，基本上都不用原生的select样式了，其一因为不好看，第二点就是select在不同的浏览器中展示出来的样式是不同的。所以一般都用div来充当select，当然这以后会讲，但是一定需要了解select是用来干什么的

form表单域

• form表单域：实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。
• action：url地址用于指定接受并处理表单数据服务器程序的url地址
• method：get / post 用于设置表单数据的提交方式，取值为 get 或者 post
• name：名称用于指定表单的名称，以区分同一个页面的多个表单

结束语

在这一讲中，整个html就结束了，这一讲中主要介绍了html常用的属性，牵扯表格和表单等重要的属性，这在将来的工作中有大量的使用到。基础必须得扎实才能走的更远。
除此之外，在html中还需要学会查文档，自己的理解不到位或者模糊的地方，一定需要查文档，学会分析问题和解决问题的能力在工作中也是必不可少的一部分。日常查文档一般都用 MDN，这个对于前端来说比较权威的网站。

MDN网站链接