HTML表格是用于在网页中显示数据的一种常用方式。表格由行和列组成,每个单元格可以包含文本或其他HTML元素。本文将介绍如何在HTML文档中创建表格,并提供一些示例。
## 基本用法
要创建一个简单的表格,请使用<table>、<tr>和<td>标签。
```html
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
</tr>
</table>
```
- <table>标签用于创建一个表格。
- <tr>标签用于创建一行。
- <td>标签用于创建一个单元格。
## 合并单元格
可以使用rowspan和colspan属性来合并单元格。
```html
<table>
<tr>
<td rowspan="2">单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
<tr>
<td colspan="2">单元格4</td>
</tr>
</table>
```
- rowspan属性用于合并行。
- colspan属性用于合并列。
## 表头
可以使用<th>标签来创建表头。
```html
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
<td>女</td>
</tr>
</table>
```
- <th>标签用于创建表头单元格。
## 样式设置
可以使用CSS样式来设置表格的样式。
```html
<style type="text/css">
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
text-align: center;
}
th {
background-color: #eee;
}
</style>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
<td>女</td>
</tr>
</table>
```
**-** border-collapse属性用于合并表格边框。
**-** border属性用于设置边框宽度和样式。
**-** padding属性用于设置单元格内部填充。
**-** text-align属性用于设置文本对齐方式。
**-** background-color属性用于设置背景颜色。