HTML表格

### HTML表格

HTML表格用于展示数据，它们由多个行和单元格组成，可以包含标题和表头。以下是创建表格的基本元素：

#### 创建表格（`<table>`, `<tr>`, `<td>`, `<th>`）

- **`<table>`标签**：定义表格的开始。
- **`<tr>`标签**：定义表格中的一行。
- **`<td>`标签**：定义行中的一个单元格，用于普通数据。
- **`<th>`标签**：定义行中的一个单元格，用于表头数据。

**示例代码：**
```html
<table>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
    <th>表头3</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
    <td>数据3</td>
  </tr>
  <tr>
    <td>数据4</td>
    <td>数据5</td>
    <td>数据6</td>
  </tr>
</table>
```

#### 表格属性

HTML表格可以通过不同的属性来增强其功能和外观：

1. **边框（`border`）**：
   - `<table>`标签的`border`属性用于定义表格边框的大小。例如，`border="1"`会在表格周围显示边框。
   ```html
   <table border="1">
   ```
   
2. **单元格合并（`rowspan`和`colspan`）**：
   - `rowspan`属性用于合并垂直方向上的多个单元格。
   - `colspan`属性用于合并水平方向上的多个单元格。
   
   **示例代码（单元格合并）**：
   ```html
   <table>
     <tr>
       <th>姓名</th>
       <th>年龄</th>
       <th>城市</th>
     </tr>
     <tr>
       <td>张三</td>
       <td>25</td>
       <td rowspan="2">北京</td> 
     </tr>
     <tr>
       <td>李四</td>
       <td>30</td>
     </tr>
   </table>
   ```

3. **表格标题（`caption`）**：
   - `<table>`标签的`caption`属性可以为表格添加标题。
   ```html
   <table>
     <caption>员工信息表</caption>
     
   </table>
   ```

4. **对齐和表头分组（`align`, `valign`, `thead`, `tbody`, `tfoot`）**：
   - `align`和`valign`属性用于设置单元格内容的水平和垂直对齐方式。
   - `thead`, `tbody`, 和 `tfoot`用于将表头、主体和脚部分组，有助于样式化和脚本处理。
   
   **示例代码（表头分组）**：
   ```html
   <table>
     <thead>
       <tr>
         <th>姓名</th>
         <th>年龄</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>张三</td>
         <td>25</td>
       </tr>
       
     </tbody>
   </table>
   ```

5. **边框样式（`frame`, `rules`, `summary`）**：
   - `frame`属性定义表格外框的显示方式。
   - `rules`属性定义行间和列间的线。
   - `summary`属性提供了表格的摘要或描述，对屏幕阅读器很有用。

使用这些属性，你可以创建结构化、易读且外观精美的表格，以有效地展示和组织数据。