请求提供对应图片表格的colspan和rowspan实现代码
实现指定表格布局的HTML代码
以下是实现附图中表格效果的HTML代码,通过colspan和rowspan完成单元格合并,同时添加基础边框样式让结构更清晰:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>合并单元格表格</title> <style> table { border-collapse: collapse; width: 500px; margin: 20px auto; } th, td { border: 1px solid #333; padding: 10px; text-align: center; } th { background-color: #f0f0f0; } </style> </head> <body> <table> <tr> <!-- 垂直合并3行 --> <th rowspan="3">基本信息</th> <!-- 水平合并3列 --> <th colspan="3">学生信息</th> </tr> <tr> <td>学号</td> <td>姓名</td> <td>性别</td> </tr> <tr> <td>年龄</td> <td>班级</td> <td>专业</td> </tr> </table> </body> </html>
代码说明:
rowspan="3"实现“基本信息”单元格的垂直跨3行合并colspan="3"实现“学生信息”单元格的水平跨3列合并- 基础样式让表格边框合并对齐,提升可读性
内容的提问来源于stack exchange,提问作者Radhakrishnan
相关产品推荐
相关产品推荐

