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> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr> </table> </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> <tr> <td>Shabbir Hussein</td> <td>7000</td> </tr> </table> </body> </html>
有两个属性，称为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的类似方法。
<!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 = "/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属性设置表格的宽度和高度。 您可以按照像素或可用屏幕区域的百分比来指定表格的宽度或高度。
<!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中不推荐使用此标记。
<!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> :创建一个单独的表页脚。
一个表可能包含几个<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> <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>
您可以在另一个表中使用一个表。 不仅表，您还可以使用表数据标签<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>Ramesh Raman</td> <td>5000</td> </tr> <tr> <td>Shabbir Hussein</td> <td>7000</td> </tr> </table> </td> </tr> </table> </body> </html>
