第六章 body中的标签(二)
一、列表标签
1.1 无序列表
<ul>即Unordered List无序列表、<li>即List Item列表项。
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
Out:
- 无序列表项一
- 无序列表项二
1.2 有序列表
<ol>即Ordered List有序列表、<li>即List
<ol>
<li>有序列表项一</li>
<li>有序列表项二</li>
</ol>
Out:
- 有序列表项一
- 有序列表项二
1.3 自定义列表
<dl>标签代表一个描述列表。该标签的常用用途是实现词汇表或显示元数据（键值对列表）<dt>标签只能够作为<dl>标签的一个子元素出现，常常后跟一个<dd>标签。<dd>元素是 HTML 描述元素，作为描述列表（<dl>元素）的子元素出现，必须后跟一个<dt>
<dl>
<dt>咖啡</dt>
<dd>黑色的热饮</dd>
<dt>牛奶</dt>
<dd>白色的冷饮</dd>
</dl>
Out:
| 标签 | 描述 |
| <ol> | 定义有序列表 |
| <ul> | 定义无序列表 |
| <li> | 定义列表项 |
| <dl> | 定义列表 |
| <dt> | 自定义列表项目 |
| <dd> | 定义自定义列表的描述 |
二、表格标签
简单的HTML表格实例（两行，两列）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Notes</title>
</head>
<body>
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
Out:
2.1 标签定义及说明
- 表格中的相关元素
<tabel>...</table:整个表格以<table>标记开始、</table>标记结束。<tr>...</tr>:表格的一行，那么以为着有几个tr，表格就有几行。<td>...</td>:表格的一个单元格，一行中包含几对<td></td>,说明一行中就有几列。<th>...</th>:表格的头部的一个单元格，表格表头。- 表格中列的个数，取决于一行中数据单元格的个数。
2.2 table标签中的属性。
- border
border属性可以为表格设置边框线。表格默认是没有边框的。只有加上border属性并赋予其值才能显示边框。
<table border="1">...</table>
注意：border属性值没有单位！
- cellspacing
cellspacing 属性规定单元格之间的空间。
<table cellspacing='0' border='1'>......</table>
注意 ：请勿将该属性与 cellpadding 属性相混淆，cellpadding 属性规定的是单元边沿与单元内容之间的空间。
- cellpadding
cellpadding 属性规定单元边沿与其内容之间的空白。
<table cellspacing="0" border="1" cellpadding="0">......</table>
2.3 table的子标签(thead、tbody、tfoot)
<caption>
<caption>标签，为表格添加标题。事实上，在实际开发中并不常用，表格标题可以用多种方式来实现，灵活方便。
<table>
<caption>表格标题</caption>
</table>
<thead>
<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。另外，thead元素应该与tbody和tfoot元素结合起来使用。
注意 ：如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。
详细描述: thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。
提示 ：在默认情况下这些元素不会影响到表格的布局。不过，您可以使用 CSS 使这些元素改变表格的外观。
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>...</tbody>
<tfoot>...</tfoot>
</table>
<tbody>
<tbody> 标签表格主体（正文）。该标签用于组合 HTML 表格的主体内容。
<table border="1">
<thead>...</thead>
<tbody>
<tr>
<td>Month</td>
<td>Savings</td>
</tr>
</tbody>
<tfoot>...</tfoot>
</table>
<tfoot>
<tfoot> 标签定义表格的页脚（脚注或表注）。该标签用于组合 HTML 表格中的表注内容。
<table border="1">
<thead>...</thead>
<tbody>...</tbody>
<tfoot>
<tr>
<td>Month</td>
<td>Savings</td>
</tr>
</tfoot>
</table>
可选的属性
| 属性 | 值 | 描述 |
|---|---|---|
| align | right left center justify char |
定义 tfoot 元素中内容的对齐方式。 |
| char | character | 规定根据哪个字符来进行文本对齐。 |
| charoff | number | 规定第一个对齐字符的偏移量。 |
| valign | top middle bottom baseline |
规定 tfoot 元素中内容的垂直对齐方式。 |
2.4 table的子标签(th、tr、td)
<tr>
<tr> 标签定义 HTML 表格中的行。tr 元素包含一个或多个 th 或 td 元素。
<table>
<thead>
<tr><th></th></tr>
</thead>
</table>
<th>
表头单元格 - 包含表头信息（由 th 元素创建）。th 元素内部的文本通常会呈现为居中的粗体文本。
<table>
<tbody>
<tr><td></td></tr>
</tbody>
</table>
<td>
<td> 标签定义 HTML 表格中的标准单元格。
<table>
<tbody>
<tr><td></td></tr>
</tbody>
</table>
#三、table单元格的合并与对齐方式 ##3.1 单元格合并 -
<colspan>
colspan 属性规定单元格可横跨的列数。即，以当前单元格为始，从**左**往**右**合并的单元格数（横向合并）。语法：
```html
...
...
```
<rowspan>
rowspan 属性规定单元格可横跨的行数。即，以当前单元格为始，从上往下合并的单元格数（纵向合并）。语法：
...
<th rowspan="value"></th> <!-- value(type):number -->
<td rowspan="value"></td> <!-- value(type):number -->
...
3.2 单元格内元素对齐方式
通过本节，将掌握元素在单元格的任意位置排列。如：上左、上中、上右；中左、中心、中右；下左、下中、下右
align
align 属性规定单元格中内容的水平对齐方式。语法：
...
<th align="value">
<td align="value">
...
属性值（value）：
| 值 | 描述 |
|---|---|
| left | 左对齐内容（默认值）。 |
| center | 居中对齐内容。 |
| right | 右对齐内容。 |
| justify | 对行进行伸展，这样每行都可以有相等的长度（就像在报纸和杂志中）。 |
| char | 将内容对准指定字符。 |
valign
valign 属性规定单元格中内容的垂直排列方式。语法：
...
<th valign="value">
<td valign="value">
...
属性值（value）：
| 值 | 描述 |
|---|---|
| top | 对内容进行上对齐。 |
| middle | 对内容进行居中对齐（默认值）。 |
| bottom | 对内容进行下对齐。 |
| baseline | 与基线对齐。 |
*
浙公网安备 33010602011771号