HTML 将标签用于以表格形式显示数据

在某些情况下，我们需要在网页上包含复杂或大量的数据，以便用户更加清晰和方便地阅读和理解。在这种情况下，我们可以使用HTML表格来组织数据，使用户能够更方便地浏览和理解。

HTML表格是一种用于在网页上以表格形式（即通过行和列）显示数据的结构。

我们可以使用以下HTML标签将数据以表格形式显示：

<table> - 定义一个表格。
<th> - 在表格中定义一个头部单元格（标题）。
<tr> - 定义表格中的一行。
<td> - 定义表格中的一个单元格。
<caption> - 定义表格的标题。
<colgroup> - 为表格中的一个或多个列指定分组，用于格式化。
<col> - 为<colgroup>元素中的每一列指定列属性。
<thead> - 对表格中的表头内容进行分组。
<tbody> - 对表格中的主体内容进行分组。
<tfoot> - 对表格中的页脚内容进行分组。

以下是HTML表格的基本布局：

<table>
   <!--Header part begins-->
   <thead>
      <tr>
         <th></th>
         <th></th>
      </tr>
   </thead>
   <!--Header part ends-->

   <!--Body part begins-->
   <tbody>
      <tr>
         <td></td>
         <td></td>
      </tr>
   </tbody>
   <!--Body part ends-->

   <!--Footer part begins-->
   <tfoot>
      <tr>
         <td></td>
         <td></td>
      </tr>
   </tfoot>
   <!--Footer part ends-->
</table>

现在，让我们来看一些以下的例子，我们使用上述讨论过的HTML标签以表格形式显示数据。

示例1

在接下来的例子中，我们以表格形式显示了学生和他们在各个科目中的分数 –

<!DOCTYPE html>
<html>
<head>
   <title>Tags to display the data in the tabular form</title>
   <style>
      table,
      th,
      td {
         border: 1px solid black;
         text-align: center;
      }
   </style>
</head>
<body>
   <table>
      <thead>
         <tr>
            <th>Subjects</th>
            <th>Zayn</th>
            <th>Arjun</th>
            <th>Kabir</th>
            <th>Priya</th>
         </tr>
      </thead>
      <tbody>   
         <tr>
            <td>Maths</td>
            <td>89</td>
            <td>85</td>
            <td>93</td>
            <td>82</td>
         </tr>
         <tr>
            <td>Social</td>
            <td>95</td>
            <td>90</td>
            <td>91</td>
            <td>95</td>
         </tr>
         <tr>
            <td>English</td>
            <td>81</td>
            <td>85</td>
            <td>96</td>
            <td>93</td>
         </tr>
         <tr>
            <td>Science</td>
            <td>70</td>
            <td>86</td>
            <td>95</td>
            <td>90</td>
         </tr>
      </tbody>
      <tfoot>
         <tr>
            <td>Total</td>
            <td>335</td>
            <td>346</td>
            <td>377</td>
            <td>360</td>
         </tr>
      </tfoot>
   </table>
</body>
</html>

示例2

在下面的示例中，我们给表格添加了一个标题（使用<caption>标签）并对表格中的前两列进行了分组（使用<colgroup>标签）。

<!DOCTYPE html>
<html>
<head>
   <title>Tags to display the data in the tabular form</title>
   <style>
      table, th, td {
         border: 1px solid black;
      }
      caption {
         font-weight: bolder;
         color: brown;
      }
   </style>
</head>
<body>
   <table>
      <caption>Players List</caption>
      <colgroup>
         <col span="2" style="background-color:seagreen">
         <col style="background-color:grey">
      </colgroup>
      <thead>
         <tr>
            <th>Cricket</th>
            <th>football</th>
            <th>Dart</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Arjun</td>
            <td>Manish</td>
            <td>Kabir</td>
         </tr>
         <tr>
            <td>Nikhil</td>
            <td>Dev</td>
            <td></td>
         </tr>
         <tfoot>
            <tr>
               <td>2</td>
               <td>2</td>
               <td>1</td>
            </tr>
         </tfoot>
      </tbody>
   </table>
</body>
</html>