HTML的表格应用

HTML 中的表格用于在网页上展示和组织数据。表格由行和列组成，每个单元格可以包含文本、图像或其他 HTML 元素。下面是一些常用的 HTML 表格标签和属性的应用示例：

<table> 标签: 定义表格的起始和结束标记。所有的表格元素应该放在这对标签之间。

<table>
  <!-- 表格内容 -->
</table>

<tr> 标签: 定义表格的行。每一行由一对 <tr> 标签来表示 

<table>
  <tr>
    <!-- 行中的单元格 -->
  </tr>
  <tr>
    <!-- 另一行的单元格 -->
  </tr>
</table>

<td> 和 <th> 标签: 定义表格的数据单元格。<td> 用于表示普通单元格，<th> 用于表示表头单元格。

<table>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
  </tr>
</table>

表格边框、对齐和格式化: 可以使用 CSS 样式或 HTML 属性来设置表格的边框样式、单元格对齐方式和其他格式化效果。

<!-- 使用 HTML 属性设置表格边框 -->
<table border="1">
  <!-- 表格内容 -->
</table>

<!-- 使用 CSS 样式设置表格边框、对齐和格式化 -->
<style>
  table {
    border-collapse: collapse;
  }
  table, th, td {
    border: 1px solid black;
    text-align: center;
    padding: 5px;
  }
</style>

合并单元格: 可以通过使用 rowspan 和 colspan 属性来合并行和列的单元格。

<table>
  <tr>
    <td rowspan="2">合并行</td>  <!-- 合并两行 -->
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
  <tr>
    <td colspan="2">合并列</td>  <!-- 合并两列 -->
  </tr>
</table>

表格标题和表头 (<caption>、<thead>)
你可以使用 <caption> 标签为表格添加标题，使用 <thead> 标签将表格的表头内容分组。

<table>
  <caption>销售报告</caption>
  <thead>
    <tr>
      <th>日期</th>
      <th>产品</th>
      <th>销售量</th>
    </tr>
  </thead>
  <tbody>
    <!-- 表格主体内容 -->
  </tbody>
</table>

表格主体内容 (<tbody>)
使用 <tbody> 标签来标记表格的主体内容，其中每个 <tr> 元素表示表格的一行。

<table>
  <caption>销售报告</caption>
  <thead>
    <tr>
      <th>日期</th>
      <th>产品</th>
      <th>销售量</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2023-07-01</td>
      <td>产品A</td>
      <td>100</td>
    </tr>
    <tr>
      <td>2023-07-02</td>
      <td>产品B</td>
      <td>85</td>
    </tr>
    <!-- 更多行数据 -->
  </tbody>
</table>

表格页脚 (<tfoot>)
使用 <tfoot> 标签来定义表格的页脚部分。

<table>
  <caption>销售报告</caption>
  <thead>
    <tr>
      <th>日期</th>
      <th>产品</th>
      <th>销售量</th>
    </tr>
  </thead>
  <tbody>
    <!-- 表格主体内容 -->
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">总计</td>
      <td>185</td>
    </tr>
  </tfoot>
</table>

表格样式和布局
你可以使用 CSS 样式来自定义表格的外观和布局。以下是一些示例 CSS 样式设置：

<style>
  table {
    width: 100%;  /* 设置表格宽度为父容器的百分比 */
    border-collapse: collapse;  /* 边框合并 */
  }
  th, td {
    border: 1px solid black;  /* 设置单元格边框 */
    padding: 8px;  /* 设置单元格内边距 */
    text-align: center;  /* 设置单元格文本居中对齐 */
  }
  th {
    background-color: lightgray;  /* 设置表头单元格背景颜色 */
  }
  tfoot td {
    font-weight: bold;  /* 设置页脚单元格粗体字体 */
  }
</style>

表格排序、筛选和搜索 (JavaScript和库)
如果你想要为表格添加排序、筛选或搜索功能，可以使用 JavaScript 和一些 JavaScript 库（如 DataTables、Ag-Grid 等）来实现。这些库提供了丰富的功能和样式选项，帮助你处理表格数据的交互和展示。