HTML 表格可以将网络作者将文本、图像、链接、其他表格等数据排列到单元格的行和列中。
HTML 表格是使用 <table> 标记创建的，其中<tr> 标签用于创建表行，<td> 标签用于创建数据单元格，默认左对齐。
一般的，在web开发中，一般后台部分会用到table标签显示列表，给用户展示的前端部分用div或者ul li dl dt dd 标签实现。
示例
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = "1">
<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>
</body>
</html>这里，border是 <table> 标签的属性，用于为所有单元格添加边框。如果不需要边框，则可以使用 border = "0"。
表格标题
表格标题可以使用 <th> 标签定义。该标签将取代 <td> 标签，后者用于表示实际数据单元。通常，您会将顶行作为表格标题，<th> 标签中定义的标题默认居中且粗体。
示例
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>张三</td>
<td>5000</td>
</tr>
<tr>
<td>李四</td>
<td>7000</td>
</tr>
</table>
</body>
</html>cellpadding 和cellspacing属性
有两个属性，称为cellpadding 和cellspacing，您将使用它们来调整表格单元格中的空白。 cellspacing 属性定义表格单元格之间的空间，而 cellpadding 表示单元格边框与单元格内内容之间的距离。
示例
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<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>
</body>
</html>Colspan 和 Rowspan 属性
如果要将两列或更多列合并为一列，您将使用 colspan 属性。如果要合并两行或多行，您将使用 rowspan 类似的方式。
示例
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<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>
</body>
</html>表格背景
您可以使用以下两种方式之一设置表格背景 -
bgcolor 属性 - 您可以设置整个表格的背景颜色或仅针对一个单元格。
background 属性 - 您可以为整个表格或仅针对一个单元格设置背景图像。
您还可以使用 bordercolor 属性设置边框颜色。
注意: HTML5 中已弃用bgcolor、background和bordercolor属性。不要使用这些属性。
示例
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow">
<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>
</body>
</html>这里是使用背景的示例属性。在这里，我们将使用 /images 目录中提供的图像。
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" background = "/static/default/images/logo.png">
<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>
</body>
</html>这里的背景图像不适用于表格的标题。
表格高度和宽度
您可以使用 width 和 height 属性设置表格的宽度和高度。您可以以像素或可用屏幕区域百分比的形式指定表格的宽度或高度。
示例
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<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>
</body>
</html>表格标题
标题标签将用作表格的标题或说明，并显示在表格的顶部。此标记在较新版本的 HTML/XHTML 中已弃用。
示例
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</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>表头、正文、页脚
表格可以分为三个部分:页眉、正文和页脚。页眉和页脚与文字处理文档中的页眉和页脚非常相似，每个页面都保持相同，而正文是表格的主要内容的展示。
用于分隔表格的三个元素表格的头部、主体和底部 -
<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">这是表格的头部</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4">这是表格的底部</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>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>张三</td>
<td>5000</td>
</tr>
<tr>
<td>李四</td>
<td>7000</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>