HTML - Tables
HTML表允许Web作者将诸如文本，图像，链接，其他表等数据排列成单元格的行和列。
HTML表是使用《table》标签创建的，其中《tr》标签用于创建表行， 《td》标签用于创建数据单元。 “td”下的元素是常规的，默认情况下左对齐
例子 (Example)
<!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”元素。 标题为“th”的标题默认为居中和粗体。
例子 (Example)
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
这将产生以下结果 -
新页面打开Cellpadding和Cellspacing属性
有两个属性称为cellpadding和cellspacing ，您将使用这些属性调整表格单元格中的空白区域。 cellspacing属性定义表格单元格之间的空间，而cellpadding表示单元格边框与单元格内容之间的距离。
例子 (Example)
<!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>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
这将产生以下结果 -
新页面打开Colspan和Rowspan属性
如果要将两个或多个列合并为一个列，则将使用colspan属性。 类似地，如果要合并两行或更多行，则将使用rowspan 。
例子 (Example)
<!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属性设置边框颜色。
Note - HTML5中不推荐使用bgcolor ， background和bordercolor属性。 不要使用这些属性。
例子 (Example)
<!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>
这将产生以下结果 -
新页面打开以下是使用background属性的示例。 在这里，我们将使用/ images目录中提供的图像。
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" background = "/images/test.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属性设置表格宽度和高度。 您可以按像素或可用屏幕区域的百分比来指定表格宽度或高度。
例子 (Example)
<!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>
这将产生以下结果 -
新页面打开表格标题
caption标记将用作表格的标题或说明，它显示在表格的顶部。 此标记在较新版本的HTML/XHTML中已弃用。
例子 (Example)
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border = "1" width = "100%">
<caption>This is the 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》 - 创建一个单独的表页脚。
一张桌子可能包含几张 用于表示different pages或数据组的元素。 但值得注意的是，“thead”和“tfoot”标签应出现在“tbody”之前
例子 (Example)
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<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>
</body>
</html>
这将产生以下结果 -
新页面打开嵌套表
您可以在另一个表中使用一个表。 不仅表格可以使用表格数据标签
例子 (Example)
以下是在表格单元格中使用另一个表格和其他标记的示例。
<!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>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
这将产生以下结果 -
新页面打开