HTML 表格
HTML表格
HTML表格（HTML Table）是网页开发中常用的组件之一，它可以用来展示数据或者是布局。
创建表格
HTML表格主要包含了表格标签和单元格标签。通过使用表格标签<table>可以创建一个表格，单元格标签则包括<tr>、<td>、<th>。
下面是一个最基本的HTML表格结构：
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
这个表格有两行两列，其中<td>标签表示单元格内容。
表格头
在表格中，表格头通常是用来显示表格的标题或者是列名，HTML表格的表格头通常可以使用<th>标签来创建。<th>标签与<td>标签有着相同的作用，但通常更加加粗。
<table>
<tr>
<th>顶部1</th>
<th>顶部2</th>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
这个表格的第一行中每个单元格均为表格头。
合并单元格
在HTML表格中，有时候需要合并相邻的单元格来显示更加复杂的内容。可以使用rowspan属性和colspan属性来完成单元格的合并。其中，rowspan用于合并行，colspan用于合并列。
<table>
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
<td colspan="2">4-5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
在这个例子中，单元格1和2被合并为一个单元格，单元格4和5也被合并为一个单元格。
表格样式
HTML表格可以使用CSS样式来改变其外观，通过CSS设置单元格的颜色、字体、样式等来控制其表格的样式。
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse; // 折叠边框
text-align: center;
font-family: Arial, sans-serif;
}
th {
font-weight: bold;
background-color: #F0F0F0;
}
td {
padding: 5px;
}
</style>
在HTML中增加以上样式 输出的表格将会拥有如下外观：
总结
HTML表格是网页设计中必不可少的组件，可以用于展示数据和对页面进行布局。本文介绍了HTML表格中的基本标签、表格头、合并单元格以及表格样式等操作。掌握HTML的表格技巧对于Web开发来说非常重要。