表格是网页中展示结构化数据的一种重要方式。在 HTML 中，表格使用 <table> 标签创建，表格的内容通过一系列的行（<tr>）和单元格（<td>）来组织。表格也可以包含标题行（<th>）来标识列的标题。通过合理的使用表格，能够清晰地展示各种数据。
HTML 表格的基本结构
表格的基本结构由以下几个部分组成：
<table>：创建一个表格。<tr>：定义表格的一行。<th>：定义表格头部的单元格，通常用于显示列标题，默认内容为粗体并居中对齐。<td>：定义表格的普通单元格，用于存放数据。
1. HTML 表格的基本示例
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
<tr>
<td>张三</td>
<td>28</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>34</td>
<td>上海</td>
</tr>
</table>
说明：
<table border="1">：创建一个表格并设置边框，border="1"表示表格单元格的边框宽度为1像素。<tr>：定义一行数据或表头。<th>：定义列标题，表头内容通常加粗并居中对齐。<td>：定义数据单元格。
输出结果会是一个包含姓名、年龄和城市的表格，表头部分为粗体字，数据则按行显示。
2. 表格属性和布局
a. border 属性
border 属性用于定义表格的边框宽度。没有定义 border 属性时，表格会没有边框。
<table border="2"> <!-- 设置较粗的边框 -->
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
<tr>
<td>张三</td>
<td>28</td>
<td>北京</td>
</tr>
</table>
b. cellspacing 和 cellpadding
cellspacing：定义单元格之间的空隙。cellpadding：定义单元格内内容与单元格边框之间的内边距。
<table border="1" cellspacing="5" cellpadding="10">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
<tr>
<td>张三</td>
<td>28</td>
<td>北京</td>
</tr>
</table>
cellspacing="5"：单元格之间有 5 像素的空隙。cellpadding="10"：单元格内的内容与边框之间有 10 像素的内边距。
c. colspan 和 rowspan
colspan：合并多个列。rowspan：合并多个行。
<table border="1">
<tr>
<th colspan="2">姓名与城市</th>
<th>年龄</th>
</tr>
<tr>
<td rowspan="2">张三</td>
<td>北京</td>
<td>28</td>
</tr>
<tr>
<td>上海</td>
<td>34</td>
</tr>
</table>
colspan="2"：将“姓名与城市”标题跨越两列。rowspan="2"：将张三的姓名单元格合并为两行。
3. 表格样式和 CSS
通过 CSS，我们可以对 HTML 表格进行更加灵活的样式控制，比如表格的边框、背景色、字体等。
a. 基础样式示例
<table style="border-collapse: collapse; width: 100%;">
<tr style="background-color: #f2f2f2;">
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
<tr>
<td>张三</td>
<td>28</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>34</td>
<td>上海</td>
</tr>
</table>
border-collapse: collapse;：去掉单元格之间的空隙，合并边框。background-color: #f2f2f2;：设置表头的背景色。
b. 更复杂的表格样式
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 12px;
text-align: center;
border: 1px solid #ddd;
}
th {
background-color: #4CAF50;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #ddd;
}
</style>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
<tr>
<td>张三</td>
<td>28</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>34</td>
<td>上海</td>
</tr>
</table>
tr:nth-child(even)：给偶数行添加背景颜色。tr:hover：鼠标悬停在行上时，行的背景颜色变为#ddd。
4. 表格的高级用法
a. 表格嵌套
你可以将一个表格嵌套在另一个表格的单元格内。例如，在某一单元格中显示一个包含多个条目的子表格。
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
</tr>
<tr>
<td>张三</td>
<td>28</td>
<td>
<table border="1">
<tr>
<td>北京</td>
<td>朝阳区</td>
</tr>
</table>
</td>
</tr>
</table>
b. 表格与表单的结合
表格通常与表单元素一起使用，用于展示和编辑数据。
<form>
<table border="1">
<tr>
<th>姓名</th>
<td><input type="text" name="name"></td>
</tr>
<tr>
<th>年龄</th>
<td><input type="text" name="age"></td>
</tr>
<tr>
<th>城市</th>
<td><input type="text" name="city"></td>
</tr>
</table>
<input type="submit" value="提交">
</form>
5. 总结
HTML 表格是一种用于展示结构化数据的强大工具。通过合理使用表格标签、CSS 样式以及其他属性（如 colspan、rowspan），你可以创建简洁、易于理解的表格布局。
- 表格常用于展示各种形式的数据，如财务数据、时间表、用户信息等。
- 通过结合 CSS，你可以对表格的外观进行细致的定制和优化。
- 使用表格时，应避免滥用，尤其是在布局中，尽量避免使用表格来进行页面布局设计，表格应当仅用于展示数据。
如果你有任何问题或者需要更详细的示例，随时告诉我！
发表回复