table 元素细节

th 和 thead 区别

• <th>用于定义表格中的表头单元格，表示表格的列标题。
• <thead>用于定义表格的表头部分，包含一个或多个<tr>元素，用于标识表格的列标题。

<th>元素用于定义表格中的表头单元格（table header cell）。它通常用于表格的第一行或第一列，并包含表头信息。<th>元素的内容默认为粗体且居中显示，可以通过CSS样式进行自定义。

示例：

html
<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>男</td>
  </tr>
</table>

<thead>元素用于定义表格的表头部分（table head）。它通常包含一个或多个<tr>元素，用于标识表格的列标题。<thead>元素通常与<tbody>和<tfoot>元素一起使用，用于将表格内容分组。

示例：

html
<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

tbody 标签有什么用

<tbody> 标签用于在 HTML 表格中定义表格的主体部分。它通常与 <thead>（表头部分）和 <tfoot>（表尾部分）一起使用，以帮助组织和语义化表格的结构。

虽然 <tbody> 标签在某些情况下可以被省略，但它仍然是一个有用的标签，为了遵循良好的 HTML 结构和语义化标记的原则，建议在编写表格时始终使用 <tbody> 标签。

具体作用：

1. 结构化表格：<tbody> 标签可以将表格的主体内容从表头和表尾中分离出来，使表格更加清晰和易读。
2. 样式和脚本操作：通过为 <tbody> 标签添加类名或 ID，您可以为表格的主体部分应用样式或使用 JavaScript 脚本进行操作。
3. 辅助技术支持：一些辅助技术（如屏幕阅读器）可以使用 <tbody> 标签来识别和导航表格的主体内容。

表格样式

当为表格元素添加样式时，可以使用CSS来控制表格的外观。以下是一套基本的表格样式，包括框线和对齐方式的处理，以使表格看起来尽可能好看：

css
<style>
/* 表格样式 */
table {
  border-collapse: collapse;
  width: 100%;
}
/* 表头样式 */
th {
  background-color: #f2f2f2;
  color: #333;
  font-weight: bold;
  padding: 8px;
  text-align: left;
  border: 1px solid #ddd;
}
/* 表格单元格样式 */
td {
  padding: 8px;
  text-align: left;
  border: 1px solid #ddd;
}
/* 鼠标悬停在表格行上时的样式 */
tr:hover {
  background-color: #f5f5f5;
}
/* 表格对齐方式 */
table {
  margin-left: auto;
  margin-right: auto;
}
/* 表格外边框线样式 */
table {
  border: 1px solid #ddd;
}
/* 表格内边框线样式 */
td, th {
  border: 1px solid #ddd;
}
</style>