03 HTML表格与表单

1. HTML表格

表格是较为常用的一种标签，常用来处理、显示表格式数据，但不是用来布局。

表格结构

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

<table>
	<thead></thead>
	<tbody></tbody>
</table>

<thead></thead>：用于定义表格的头部。位于<table></table> 标签中，一般包含网页的logo和导航等头部信息。

<tbody></tbody>：用于定义表格的主体。位于<table></table>标签中，一般包含网页中除头部和底部之外的其他内容。

表格标题

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

<table>
	<caption>我是标题</caption>
	<thead></thead>
	<tbody>
		<tr>
			<td>小明</td>
			<td>18岁</td>
		</tr>
		<tr>
			<td>小王</td>
			<td>20岁</td>
		</tr>
	</tbody>
</table>

效果如下：

我是标题

小明	18岁
小王	20岁

表格创建

语法格式如下：

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

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

注意：

1. <tr></tr>中只能嵌套<td></td>。
2. <td></td>标签，可以容纳所有的元素。

表头标签

表头一般位于表格的第一行或第一列，其文本加粗居中。设置表头非常简单，只需用表头标签<th></th>替代相应的单元格标签<td></td>即可。

<table border="1px">
	<caption>表格标题</caption>
	<thead></thead>
	<tbody>
	<tr>
		<th>姓名</th>
		<th>年龄</th>
	</tr>
		<tr>
			<td>小明</td>
			<td>18</td>
		</tr>
		<tr>
			<td>小王</td>
			<td>20</td>
		</tr>