HTML 表格
你可以使用 HTML 创建表格。
表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
在浏览器显示如下：
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
表格和边框属性
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
使用边框属性来显示一个带有边框的表格
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
表格的表头
表格的表头使用 <th> 标签进行定义。
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
在浏览器显示如下：
| Heading | Another Heading |
|---|---|
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
表格中的空单元格
在大多数浏览器中，没有内容的表格单元显示得不太好。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td></td>
</tr>
</table>
在浏览器显示如下：
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 |
注意：这个空的单元格的边框没有被显示出来。（不过 Mozilla Firefox 可以将整个边框显示出来。） 为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td> </td>
</tr>
</table>
在浏览器中显示如下：
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 |
基本的注意事项 - 有用的提示：
<thead>, <tbody> 和 <tfoot>很少被用到，这是由于浏览器对它们的支持不太好。希望这种情况在未来版本的 XHTML 中会有所改观。如果你使用 IE5.0 或者更新的版本，可以查看在我们的《XML教程》中的具体例子。
更多实例
-
没有边框的表格
- 本例演示一个没有边框的表格。 表格中的表头(Heading)
- 本例演示如何显示表格表头。 空单元格
- 本例展示如何使用 " " 处理没有内容的单元格。 带有标题的表格
- 本例演示一个带标题 (caption) 的表格 跨行或跨列的表格单元格
- 本例演示如何定义跨行或跨列的表格单元格。 表格内的标签
- 本例演示如何显示在不同的元素内显示元素。 单元格边距(Cell padding)
- 本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。 单元格间距(Cell spacing)
- 本例演示如何使用 Cell spacing 增加单元格之间的距离。 向表格添加背景颜色或背景图像
- 本例演示如何向表格添加背景。 向表格单元添加背景颜色或者背景图像
- 本例演示如何向一个或者更多表格单元添加背景。 在表格单元中排列内容
- 本例演示如何使用 "align" 属性排列单元格内容,以便创建一个美观的表格。 框架(frame)属性
- 本例演示如何使用 "frame" 属性来控制围绕表格的边框。
表格标签
| 表格 | 描述 |
|---|---|
| <table> | 定义表格 |
| <caption> | 定义表格标题。 |
| <th> | 定义表格的表头。 |
| <tr> | 定义表格的行。 |
| <td> | 定义表格单元。 |
| <thead> | 定义表格的页眉。 |
| <tbody> | 定义表格的主体。 |
| <tfoot> | 定义表格的页脚。 |
| <col> | 定义用于表格列的属性。 |
| <colgroup> | 定义表格列的组。 |
HTML 列表
HTML 支持有序、无序和定义列表
无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于 <ul> 标签。每个列表项始于 <li>。
<ul> <li>Coffee</li> <li>Milk</li> </ul>
浏览器显示如下：
- Coffee
- Milk
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
<ol> <li>Coffee</li> <li>Milk</li> </ol>
浏览器显示如下：
- Coffee
- Milk
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>
浏览器显示如下：
-
Coffee
- Black hot drink Milk
- White cold drink
定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
列表标签
| 标签 | 描述 |
|---|---|
| <ol> | 定义有序列表。 |
| <ul> | 定义无序列表。 |
| <li> | 定义列表项。 |
| <dl> | 定义定义列表。 |
| <dt> | 定义定义项目。 |
| <dd> | 定义定义的描述。 |
| <dir> | 已废弃。使用 <ul> 代替它。 |
| <menu> | 已废弃。使用 <ul> 代替它。 |
HTML 表单和输入
HTML 表单用于搜集不同类型的用户输入。
表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。
表单使用表单标签（<form>）定义。
<form>
...
input 元素
...
</form>
输入
多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：
文本域（Text Fields）
当用户要在表单中键入字母、数字等内容时，就会用到文本域。
<form> First name:<input type="text" name="firstname" /><br /> Last name:<input type="text" name="lastname" /></form>
浏览器显示如下：
注意，表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。
单选按钮（Radio Buttons）
当用户从若干给定的的选择中选取其一时，就会用到单选框。
<form><input type="radio" name="sex" value="male" />Male <br /><input type="radio" name="sex" value="female" />Female </form>
浏览器显示如下：
注意，只能从中选取其一。
复选框（Checkboxes）
当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。
<form><input type="checkbox" name="bike" />I have a bike <br /><input type="checkbox" name="car" />I have a car </form>
浏览器显示如下：
表单的动作属性（Action）和确认按钮
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
<form name="input"action="html_form_action.asp" method="get">Username: <input type="text" name="user" /><input type="submit" value="Submit" /></form>
浏览器显示如下：
假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "html_form_action.asp" 的页面。该页面将显示出输入的结果。
更多实例
-
复选框
- 本例演示如何在 HTML 页中创建复选框。用户可以选中或取消选取复选框。 单选按钮
- 本例演示如何在 HTML 中创建单选按钮。 简单的下拉列表
- 本例演示如何在 HTML 页面中创建简单的下拉列表框。下拉列表框是一个可选列表。 另一个下拉列表
- 本例演示如何创建一个简单的带有预选值的下拉列表。（编者注：预选值指预先指定的首选项。） 文本域(Textarea)
- 本例演示如何创建文本域（多行文本输入控件）。用户可在文本域中写入文本。可写入字符的字数不受限制。 创建按钮
- 本例演示如何创建按钮。你可以对按钮上的文字进行自定义。 Fieldset around data
- 本例演示如何在数据周围绘制一个带标题的框。
表单实例
-
带有输入框和确认按钮的表单
- 本例演示如何向页面添加表单。此表单包含两个输入框和一个确认按钮。 带有复选框的表单
- 此表单包含两个复选框和一个确认按钮。 带有单选按钮的表单
- 此表单包含两个单选框和一个确认按钮。 从表单发送电子邮件
- 此例演示如何从表单发送电子邮件。
表单标签
| 标签 | 描述 |
|---|---|
| <form> | 定义供用户输入的表单 |
| <input> | 定义输入域 |
| <textarea> | 定义文本域 (一个多行的输入控件) |
| <label> | 定义一个控制的标签 |
| <fieldset> | 定义域 |
| <legend> | 定义域的标题 |
| <select> | 定义一个选择列表 |
| <optgroup> | 定义选项组 |
| <option> | 定义下拉列表中的选项 |
| <button> | 定义一个按钮 |
| <isindex> | 已废弃。有<input>代替。 |
2590
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
