html表格table – HTML教程 htmltable|HTML

上一章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标题【html表格table – HTML教程】表标题可以使用< 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>