html 教程

Appearance

HTML 表格 ​

HTML 表格实例 ​

First NameLast NamePoints
JillSmith50
EveJackson94
JohnDoe80
AdamJohnson67


HTML 表格 ​

表格由<table>标签来定义。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

HTML 表格的基本结构：

<table>...</table>：定义表格

<th>...</th>：定义表格的标题栏（文字加粗）

<tr>...</tr>：定义表格的行

<td>...</td>：定义表格的列

表格实例 ​

实例 ​

html
<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 1row 1, cell 2
row 2, cell 1row 2, cell 2

HTML 表格和边框属性 ​

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性border来显示一个带有边框的表格：

实例 ​

html
<table border="1">
	<tr>
		<td>Row 1, cell 1</td>
		<td>Row 1, cell 2</td>
	</tr>
</table>

HTML 表格表头单元格 ​

表格的表头单元格使用<th>标签进行定义。

表格的表头单元格属性主要是一些公共属性，如：align、dir、width、height。

大多数浏览器会把表头显示为粗体居中的文本：

实例 ​

html
<table border="1">
	<tr>
		<th>Header 1</th>
		<th>Header 2</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>

在浏览器显示如下：

Header 1Header 2
row 1, cell 1row 1, cell 2
row 2, cell 1row 2, cell 2

表格标题 <caption> ​

在<table>标签中我们可以使用<caption> ... </ caption>标签作为标题，并在表的顶部显示出来。 **注：**此标签在较新版本的HTML / XHTML中已弃用

实例 ​

html
<table border = "1">
	<caption>这是标题</caption>
	<tr>
		<td>row 1, column 1</td><td>row 1, columnn 2</td>
	</tr>
	<tr>
		<td>row 2, column 1</td><td>row 2, columnn 2</td>
	</tr>
</table>

HTML 表格高度和宽度 ​

在<table>标签中您可以使用width（宽）和height（高）属性设置表格宽度和高度。您可以按像素或可用屏幕区域的百分比来指定表格宽度或高度。

实例 ​

html
<table border = "1" width = "400" height = "150">
	<tr>
		<td>Row 1, Column 1</td>
		<td>Row 1, Column 2</td>
	</tr>
	<tr>
		<td>Row 2, Column 1</td>
		<td>Row 2, Column 2</td>
	</tr>
</table>

HTML 表格背景 ​

您可以使用以下方法之一设置 HTML 表格的背景

  • bgcolor属性 - 可以为整个表格或仅为一个单元格设置背景颜色。
  • background属性 - 可以为整个表设置背景图像或仅为一个单元设置背景图像。
  • bordercolor属性 - 可以设置边框颜色。

注： HTML5 中不推荐使用bgcolor，background和bordercolor属性。不要使用这些属性。

实例 ​

html
<body>
	<table border = "1" bordercolor = "green" bgcolor = "yellow">
		<tr>
			<th>Column 1</th>
			<th>Column 2</th>
			<th>Column 3</th>
		</tr>
	</table>
</body>

使用background属性需要提供图像 URL 地址：

实例 ​

html
<table border = "1" bordercolor = "green" background = "/images/test.png">
	<tr>
		<th>Column 1</th>
		<th>Column 2</th>
		<th>Column 3</th>
	</tr>
</table>

HTML 表格空间 ​

有以下两个属性，用于调整 HTML 表格中单元格的空间：

  • cellspacing属性-定义表格单元格之间的空间
  • cellpadding属性-表示单元格边框与单元格内容之间的距离

实例 ​

html
<table border = "1" cellpadding = "5" cellspacing = "5">
	<tr>
		<th>Name</th>
		<th>Salary</th>
	</tr>
	<tr>
		<td>其琛</td>
		<td>5000</td>
	</tr>
	<tr>
		<td>曼迪</td>
		<td>7000</td>
	</tr>
</table>

HTML 合并单元格 ​

  • 如果要将两个或多个列合并为一个列，将使用colspan属性
  • 如果要合并两行或更多行，则将使用rowspan属性。

实例 ​

html
<table border = "1">
	<tr>
		<th>Column 1</th>
		<th>Column 2</th>
		<th>Column 3</th>
	</tr>
	<tr>
		<td rowspan = "2">Row 1 Cell 1</td>
		<td>Row 1 Cell 2</td>
		<td>Row 1 Cell 3</td>
	</tr>
	<tr>
		<td>Row 2 Cell 2</td>
		<td>Row 2 Cell 3</td>
	</tr>
	<tr>
		<td colspan = "3">Row 3 Cell 1</td>
	</tr>
</table>


HTML 表格头部、主体、页脚 ​

表格可以分为三个部分 - 头部，主体和页脚，如同word 文档中页面的页眉、正文、页脚。每个页面保持相同，而正文是表格的主要内容持有者。

头部，主体和页脚的对应的三个标签是：

  • <thead> - 创建单独的表头。
  • <tbody> - 表示表格的主体。
  • <tfoot> - 创建一个单独的表页脚。

表可以包含多个<tbody>元素以指示不同的页面。

但值得注意的是<thead>和<tfoot>标签应出现在<tbody>之前：

实例 ​

html
<table border = "1" width = "100%">
	<thead
		<tr>
			<td colspan = "4">This is the head of the table</td>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<td colspan = "4">This is the foot of the table</td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td>Cell 1</td>
			<td>Cell 2</td>
			<td>Cell 3</td>
			<td>Cell 4</td>
		</tr>
	</tbody>
</table>

HTML 表格的嵌套 ​

您可以在另一个表中使用一个表。可以使用<table>内的几乎所有标签。

实例 ​

html
<table border = "1" width = "100%">
	<tr>
		<td>
			<table border = "1" width = "100%">
				<tr>
					<th>Name</th>
					<th>Salary</th>
				</tr>
				<tr>
					<td>其琛</td>
					<td>5000</td>
				</tr>
				<tr>
					<td>曼迪</td>
					<td>7000</td>
				</tr>
			</table>
		</td>
	</tr>
</table>


HTML 表格标签 ​

标签描述
<table>定义表格
<th>定义表格的表头
<tr>定义表格的行
<td>定义表格单元
<caption>定义表格标题
<colgroup>定义表格列的组
<col>定义用于表格列的属性
<thead>定义表格的页眉
<tbody>定义表格的主体
<tfoot>定义表格的页脚