第三章总结

3.1 表格的概述

表格是网页设计中常用的元素之一，用于展示数据、布局页面等。表格由行（row）和列（column）组成，每个交叉点可以放置一个单元格（cell）。

3.1.1 表格的结构

表格的基本结构由 <table> 标签定义，其中包含 <tr>（表格行）、<th>（表头单元格，通常用于标题）或 <td>（表格单元格，用于存储数据）等标签。

html复制代码

<table>

<tr>

<th>标题1</th>

<th>标题2</th>

</tr>

<tr>

<td>数据1</td>

<td>数据2</td>

</tr>

</table>

3.1.2 表格的基本语法

表格的基本语法包括使用 <table> 开始和结束表格，<tr> 定义行，<th> 或 <td> 定义单元格。<th> 通常用于表头，而 <td> 用于数据单元格。

3.2 表格属性设置

表格及其元素支持多种属性，用于控制表格的显示样式。

3.2.1 表格边框属性

使用 border 属性设置表格的边框宽度。

html复制代码

<table border="1">

注意：在HTML5中，推荐使用CSS来控制边框样式。

3.2.2 表格的宽度和高度属性

width 和 height 属性用于设置表格的宽度和高度。

html复制代码

<table width="500" height="300">

但同样建议使用CSS来控制这些属性。

3.2.3 表格背景颜色与背景图像属性

bgcolor（不推荐使用，应使用CSS的background-color）用于设置背景颜色，background（应使用CSS的background-image）用于设置背景图像。

3.2.4 表格边框样式属性

在HTML5中，边框样式应通过CSS来控制，如border-style、border-color等。

3.2.5 表格单元格间距，单元格边距属性

cellspacing（单元格间距）和cellpadding（单元格边距）用于调整表格单元格之间的间距和单元格内容与边框之间的空间。但推荐使用CSS的border-spacing和padding属性。

3.2.6 表格水平对齐属性

使用 align 属性（不推荐，应使用CSS的text-align或margin）来控制表格的水平对齐方式。

3.2.7 设置表格的（tr）标记行的属性

<tr> 标签也支持一些属性，如bgcolor（背景色，推荐使用CSS的background-color）。

3.2.8 设置单元格属性

<td> 和 <th> 支持多种属性，如colspan（跨列）、rowspan（跨行）、bgcolor（背景色，使用CSS的background-color）、align（水平对齐，使用CSS的text-align）等。

3.2.9 表格单元格跨行、跨列属性

colspan 和 rowspan 分别用于设置单元格跨越多少列和行。

html复制代码

	<td colspan="2">跨两列</td>
	<td rowspan="2">跨两行</td>

3.3 表格嵌套

表格可以嵌套使用，即在一个表格的单元格中再创建一个表格。

3.4 表单

表单是网页中用于收集用户输入的数据的元素，通过提交到服务器进行处理。

3.4.1 表单标记

<form> 标签用于定义表单的开始和结束，通过action属性指定提交表单数据的URL，通过method属性指定提交数据的方法（如GET或POST）。

html复制代码

<form action="/submit-form" method="post">

3.4.2 定义域和域标题

<label> 标签用于定义表单控件的标签（即说明性文本），for 属性应与表单控件的 id 属性匹配。

html复制代码

	<label for="username">用户名:</label>
	<input type="text" id="username" name="username">

3.4.3 表单信息输入

使用 <input> 标签可以创建多种输入类型的表单控件，如文本（text）、密码（password）、单选按钮（radio）、复选框（checkbox）等。

3.4.4 多行文本输入框

<textarea> 标签用于创建多行文本输入框，用户可以输入任意字符数。

html复制代码

	<textarea name="message" rows="10" cols="30">
	默认文本
	</textarea>

3.4.5 下拉列表框

<select> 标签用于创建下拉列表框，<option> 标签定义下拉列表中的选项。

html复制代码

	<select name="cars">
	<option value="volvo">Volvo</option>
	<option value="saab">Saab</option>
	<option value="fiat">Fiat</option>
	<option value="audi">Audi</option>
	</select>