在HTML中创建表格需使用`
标签，内部用定义行，定义表头，定义单元格，通过组合这些标签即可构建行列结构，`。在HTML中创建表格需使用<table>标签，结合行(<tr>)、表头(<th>)和数据单元格(<td>)标签，以下是详细步骤和示例：
基础表格结构
<table border="1"> <!-- border属性可添加边框（可选） -->
<tr> <!-- 第一行（表头行） -->
<th>姓名</th> <!-- 表头单元格 -->
<th>年龄</th>
<th>城市</th>
</tr>
<tr> <!-- 第二行（数据行） -->
<td>张三</td> <!-- 数据单元格 -->
<td>28</td>
<td>北京</td>
</tr>
<tr> <!-- 第三行 -->
<td>李四</td>
<td>32</td>
<td>上海</td>
</tr>
</table>
关键标签说明
<table>：定义表格容器<tr>：定义表格行（Table Row）<th>：定义表头单元格（Header Cell），默认加粗居中<td>：定义数据单元格（Table Data）<caption>（可选）：表格标题，放在<table>后首行<table> <caption>用户信息表</caption> <tr>...</tr> </table>
进阶功能
合并单元格
- 跨列合并：
colspan<td colspan="2">合并两列</td>
- 跨行合并：
rowspan<td rowspan="2">合并两行</td>
分区结构（增强语义）
<table>
<thead> <!-- 表头区 -->
<tr><th>标题1</th><th>标题2</th></tr>
</thead>
<tbody> <!-- 数据区 -->
<tr><td>数据A</td><td>数据B</td></tr>
</tbody>
<tfoot> <!-- 表脚区 -->
<tr><td>总计</td><td>100</td></tr>
</tfoot>
</table>
响应式设计（适应移动端）
<div style="overflow-x:auto;"> <!-- 添加水平滚动 --> <table>...</table> </div>
完整示例（带样式）
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse; /* 消除单元格间隙 */
}
th, td {
border: 1px solid #ddd; /* 浅灰色边框 */
padding: 12px; /* 内边距 */
text-align: left;
}
th {
background-color: #f2f2f2; /* 表头浅灰背景 */
}
tr:hover {
background-color: #f5f5f5; /* 鼠标悬停效果 */
}
</style>
</head>
<body>
<table>
<caption>员工信息表</caption>
<tr>
<th>姓名</th>
<th>部门</th>
<th>入职日期</th>
</tr>
<tr>
<td>王芳</td>
<td>市场部</td>
<td>2020-03-15</td>
</tr>
<tr>
<td>刘明</td>
<td colspan="2">技术部（2019-08-22入职）</td> <!-- 合并两列 -->
</tr>
</table>
</body>
</html>
最佳实践
- 语义化：使用
<thead>/<tbody>分区提升可访问性 - 响应式：小屏幕设备添加滚动容器
- 简洁性：避免多层嵌套表格
- 样式分离：用CSS控制外观（而非HTML属性如
border） - 可访问性：为复杂表格添加
<caption>描述
引用说明参考MDN Web文档的HTML表格指南（MDN Table Basics）及W3C HTML5标准规范，确保代码符合现代Web开发标准。
原创文章，发布者：酷盾叔，转转请注明出处：https://www.kd.cn/ask/26740.html
