srcmini上一章HTML教程请查看：html图像img元素
HTML表允许web作者将文本、图像、链接和其他表等数据排列成单元格的行和列。
HTML表是使用<table>标记创建的，其中<tr>标记用于创建表行，<td>标记用于创建数据单元格，<td>下的元素是常规的，默认是左对齐的：
例子
<!DOCTYPE html>
<html>
<head>
<title>HTML表格table</title>
</head>
<body>
<table border = "1">
<tr>
<td>行 1, 列 1</td>
<td>行 1, 列 2</td>
</tr>
<tr>
<td>行 2, 列 1</td>
<td>行 2, 列 2</td>
</tr>
</table>
</body>
</html>
这里，边框是<table>标记的一个属性，用于在所有单元格之间放置边框，如果不需要边框，可以使用border = “0”。
表table标题
表标题可以使用<th>标签定义。这个标签将被替换为<td>标签，它用于表示实际的数据单元。通常情况下，你将把顶部的行作为表标题，如下所示，否则你可以在任何行中使用<th>元素，在<th>标签中定义的标题在默认情况下是居中和粗体的。
例子
<!DOCTYPE html>
<html>
<head>
<title>HTML表格table标题</title>
</head>
<body>
<table border = "1">
<tr>
<th>名字</th>
<th>收入</th>
</tr>
<tr>
<td>AAA</td>
<td>5000</td>
</tr>
<tr>
<td>SSS</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
Cellpadding和cellspaces属性
有两个属性称为cellpadding和cellspaces，你将使用它们来调整表单元格中的空白。cellspace属性定义表格单元格之间的空间，而cellpadding表示单元格边框与单元格内内容之间的距离。
例子
<!DOCTYPE html>
<html>
<head>
<title>HTML表格table的Cellpadding属性</title>
</head>
<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>名字</th>
<th>收入</th>
</tr>
<tr>
<td>AAA</td>
<td>5000</td>
</tr>
<tr>
<td>SSS</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
Colspan和Rowspan属性
如果希望将两个或多个列合并到单个列中，则需要使用colspan属性。如果希望合并两个或多个行，可以使用类似的方式使用rowspan。
例子
<!DOCTYPE html>
<html>
<head>
<title>HTML表格table的Colspan/行span</title>
</head>
<body>
<table border = "1">
<tr>
<th>列 1</th>
<th>列 2</th>
<th>列 3</th>
</tr>
<tr>
<td 行span = "2">行 1 格子 1</td>
<td>行 1 格子 2</td>
<td>行 1 格子 3</td>
</tr>
<tr>
<td>行 2 格子 2</td>
<td>行 2 格子 3</td>
</tr>
<tr>
<td colspan = "3">行 3 格子 1</td>
</tr>
</table>
</body>
</html>
表table的背景
你可以使用以下两种方法之一设置表背景
- bgcolor属性——你可以为整个表或仅为一个单元格设置背景颜色。
- background属性——你可以为整个表或仅为一个单元格设置背景图像。
你还可以使用bordercolor属性设置边框颜色。
注意，bgcolor、background和bordercolor属性在HTML5中被弃用，不要使用这些属性。
例子
<!DOCTYPE html>
<html>
<head>
<title>HTML表格table的Colspan/行span</title>
</head>
<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow">
<tr>
<th>列 1</th>
<th>列 2</th>
<th>列 3</th>
</tr>
<tr>
<td 行span = "2">行 1 格子 1</td>
<td>行 1 格子 2</td>
<td>行 1 格子 3</td>
</tr>
<tr>
<td>行 2 格子 2</td>
<td>行 2 格子 3</td>
</tr>
<tr>
<td colspan = "3">行 3 格子 1</td>
</tr>
</table>
</body>
</html>
下面是一个使用background属性的例子，这里，我们将使用/images目录中的可用图像。
<!DOCTYPE html>
<html>
<head>
<title>HTML表格table的Colspan/行span</title>
</head>
<body>
<table border = "1" bordercolor = "green" background = "/images/test.png">
<tr>
<th>列 1</th>
<th>列 2</th>
<th>列 3</th>
</tr>
<tr>
<td 行span = "2">行 1 格子 1</td>
<td>行 1 格子 2</td>
<td>行 1 格子 3</td>
</tr>
<tr>
<td>行 2 格子 2</td>
<td>行 2 格子 3</td>
</tr>
<tr>
<td colspan = "3">行 3 格子 1</td>
</tr>
</table>
</body>
</html>
表table的高度和宽度
可以使用width和height属性设置表的宽度和高度，可以根据像素或可用屏幕面积的百分比指定表的宽度或高度。
例子
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border = "1" width = "400" height = "150">
<tr>
<td>行 1, 列 1</td>
<td>行 1, 列 2</td>
</tr>
<tr>
<td>行 2, 列 1</td>
<td>行 2, 列 2</td>
</tr>
</table>
</body>
</html>
表table标题
标题标签将作为表的标题或解释，并显示在表的顶部，这个标签在HTML/XHTML的新版本中是不推荐的。
例子
<!DOCTYPE html>
<html>
<head>
<title>HTML Table 标题</title>
</head>
<body>
<table border = "1" width = "100%">
<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>
</body>
</html>
表标题、正文和页脚
table可分为三部分:头、body和foot，head和foot与字处理文档中的页眉和页脚非常相似，它们对每个页面保持相同，而body是表的主要内容容器。
table的head、body和foot的三要素是——
- <thead>—创建一个单独的表标头。
- <tbody>—表示表的主体。
- <tfoot>—创建一个单独的表页脚。
一个表可以包含几个<tbody>元素来表示不同的页面或数据组，但是值得注意的是，<thead>和<tfoot>标记应该出现在<tbody>之前
例子
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<thead>
<tr>
<td colspan = "4">table头</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4">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>
</body>
</html>
嵌套表
你可以在另一个表中使用一个表，你不仅可以使用表数据标签<td>中的几乎所有标签。
例子
下面是在一个表单元格中使用另一个表和其他标记的示例。
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<tr>
<td>
<table border = "1" width = "100%">
<tr>
<th>名字</th>
<th>收入</th>
</tr>
<tr>
<td>AAA</td>
<td>5000</td>
</tr>
<tr>
<td>SSS</td>
<td>7000</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
评论前必须登录！
注册