HTML表允许Web作者将文本，图像，链接，其他表等数据排列到单元格的行和列中。
HTML表是使用table标签创建的，其中tr标签用于创建表行，而td标签用于创建数据单元。 td下的元素是常规元素，默认情况下保持左对齐
<!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>
</span><span class="tag"><tr></span><span class="pln">
</span><span class="tag"><td></span><span class="pln">Row 2, Column 1</span><span class="tag"></td></span><span class="pln">
</span><span class="tag"><td></span><span class="pln">Row 2, Column 2</span><span class="tag"></td></span><span class="pln">
</span><span class="tag"></tr></span><span class="pln">
</span><span class="tag"></table></span><span class="pln">
</body>
</html>
这将产生以下输出-
在此，边框是table标签的属性，用于在所有单元格之间放置边框。 如果不需要边框，则可以使用border =“ 0”。
表格标题
可以使用<th>标签定义表标题。 该标签将替换td标签，该标签用于表示实际数据单元。 通常，您将把第一行作为表格标题，如下所示，否则，您可以在任何行中使用<th>元素。 默认情况下，在<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>Ramesh Raman</td>
<td>5000</td>
</tr>
</span><span class="tag"><tr></span><span class="pln">
</span><span class="tag"><td></span><span class="pln">Shabbir Hussein</span><span class="tag"></td></span><span class="pln">
</span><span class="tag"><td></span><span class="pln">7000</span><span class="tag"></td></span><span class="pln">
</span><span class="tag"></tr></span><span class="pln">
</span><span class="tag"></table></span><span class="pln">
</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>Ramesh Raman</td> <td>5000</td> </tr> <tr> <td>Shabbir Hussein</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 ，背景和 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>
这将产生以下输出-
这是使用 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
您可以使用 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>
</span><span class="tag"><tr></span><span class="pln">
</span><span class="tag"><td></span><span class="pln">Row 2, Column 1</span><span class="tag"></td></span><span class="pln">
</span><span class="tag"><td></span><span class="pln">Row 2, Column 2</span><span class="tag"></td></span><span class="pln">
</span><span class="tag"></tr></span><span class="pln">
</span><span class="tag"></table></span><span class="pln">
</body>
</html>
这将产生以下输出-
表格标题
标题标签将用作表格的标题或说明，并显示在表格的顶部。在更高版本的HTML/XHTML中不推荐使用此标签。
<!DOCTYPE html>
<html>
<head>
<title>HTML 表格标题</title>
</head>
<body>
<table border="1" width="100%">
<caption>This is the caption</caption>
</span><span class="tag"><tr></span><span class="pln">
</span><span class="tag"><td></span><span class="pln">row 1, column 1</span><span class="tag"></td><td></span><span class="pln">row 1, columnn 2</span><span class="tag"></td></span><span class="pln">
</span><span class="tag"></tr></span><span class="pln">
</span><span class="tag"><tr></span><span class="pln">
</span><span class="tag"><td></span><span class="pln">row 2, column 1</span><span class="tag"></td><td></span><span class="pln">row 2, columnn 2</span><span class="tag"></td></span><span class="pln">
</span><span class="tag"></tr></span><span class="pln">
</span><span class="tag"></table></span><span class="pln">
</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">This is the head of the table</td>
</tr>
</thead>
</span><span class="tag"><tfoot></span><span class="pln">
</span><span class="tag"><tr></span><span class="pln">
</span><span class="tag"><td</span><span class="pln"> </span><span class="atn">colspan</span><span class="pun">=</span><span class="atv">"4"</span><span class="tag">></span><span class="pln">This is the foot of the table</span><span class="tag"></td></span><span class="pln">
</span><span class="tag"></tr></span><span class="pln">
</span><span class="tag"></tfoot></span><span class="pln">
</span><span class="tag"><tbody></span><span class="pln">
</span><span class="tag"><tr></span><span class="pln">
</span><span class="tag"><td></span><span class="pln">Cell 1</span><span class="tag"></td></span><span class="pln">
</span><span class="tag"><td></span><span class="pln">Cell 2</span><span class="tag"></td></span><span class="pln">
</span><span class="tag"><td></span><span class="pln">Cell 3</span><span class="tag"></td></span><span class="pln">
</span><span class="tag"><td></span><span class="pln">Cell 4</span><span class="tag"></td></span><span class="pln">
</span><span class="tag"></tr></span><span class="pln">
</span><span class="tag"></tbody></span><span class="pln">
</span><span class="tag"></table></span><span class="pln">
</body>
</html>
这将产生以下输出-
嵌套表
您可以在另一个表中使用一个表。 不仅表，您还可以使用表数据标签<td>中的几乎所有标签。
以下是在表格单元格内使用另一个表格和其他标签的示例。
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border="1" width="100%">
</span><span class="tag"><tr></span><span class="pln">
</span><span class="tag"><td></span><span class="pln">
</span><span class="tag"><table</span><span class="pln"> </span><span class="atn">border</span><span class="pun">=</span><span class="atv">"1"</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="atv">"100%"</span><span class="tag">></span><span class="pln">
</span><span class="tag"><tr></span><span class="pln">
</span><span class="tag"><th></span><span class="pln">Name</span><span class="tag"></th></span><span class="pln">
</span><span class="tag"><th></span><span class="pln">Salary</span><span class="tag"></th></span><span class="pln">
</span><span class="tag"></tr></span><span class="pln">
</span><span class="tag"><tr></span><span class="pln">
</span><span class="tag"><td></span><span class="pln">Ramesh Raman</span><span class="tag"></td></span><span class="pln">
</span><span class="tag"><td></span><span class="pln">5000</span><span class="tag"></td></span><span class="pln">
</span><span class="tag"></tr></span><span class="pln">
</span><span class="tag"><tr></span><span class="pln">
</span><span class="tag"><td></span><span class="pln">Shabbir Hussein</span><span class="tag"></td></span><span class="pln">
</span><span class="tag"><td></span><span class="pln">7000</span><span class="tag"></td></span><span class="pln">
</span><span class="tag"></tr></span><span class="pln">
</span><span class="tag"></table></span><span class="pln">
</span><span class="tag"></td></span><span class="pln">
</span><span class="tag"></tr></span><span class="pln">
</span><span class="tag"></table></span><span class="pln">
</body>
</html>
这将产生以下输出-
