HTML - 表格

HTML 表格允许网络作者将文本、图像、链接、其他表格等数据排列到单元格的行和列中。

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 属性

有两个属性称为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属性 - 您可以为整个表格或仅为一个单元格设置背景颜色。

  • 背景属性 - 您可以为整个表格或仅为一个单元格设置背景图像。

您还可以使用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>

这将产生以下结果 -

表格标题

标题标签将用作表格的标题或说明，并显示在表格的顶部。此标签在较新版本的 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>

这将产生以下结果 -