表格

标签定义表格。

每个表格有若干行<tr>**，每行有若干单元格<td>**。

单元格内容可以包括文本、图片、列表、段落、表单、水平线、表格等。

1
2
3
4
5
6
7
8
9
10
<table>
<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>

边框属性

可以使用表格的边框属性 border 为表格定义边框。

1
2
3
4
5
6
7
8
9
10
<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>

表格的表头

表格的表头使用**<th>**定义。

大多数浏览器的表头会居中加粗。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>

空单元格

在某些浏览器中，某些空单元格无法显示。

为了显示，我们可以使用空格占位符。

1
2
3
4
5
6
7
8
9
10
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>row 2, cell 2</td>
</tr>
</table>

也可以使用css样式修改表格的高度。

列表

无序列表

**<ul>**标签创建无序列表。

**<li>**标签代表无序列表中的每个项。

1
2
3
4
<ul>
<li> NO.1 </li>
<li> NO.2 </li>
</ul>

效果如下：

  • NO.1
  • NO.2

有序列表

<ol>标签创建有序列表。

<li>标签代表有序列表中的每个项。

1
2
3
4
<ol>
<li> NO.1 </li>
<li> NO.2 </li>
</ol>

效果如下：

  1. NO.1
  2. NO.2

自定义列表

**<dl>**创建定义列表。

每个自定义项使用**<dt>**创建。

每个自定义项的定义使用**<dd>**创建。

1
2
3
4
5
6
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>