html table
详见：https://www.runoob.com/tags/ref-byfunc.html 中的表格标签部分
概念
<table border="1">
</table>
表格中有两种类型的单元格：
- 表头单元 - 包含头部信息（由 th 元素创建）
- 标准单元 - 包含数据（由 td 元素创建）
th和td的用法基本相同，下面只说td
td 中的常用属性：
规定单元格内容的水平对齐方式 align=left/right/center/justify/char
规定单元格内容的垂直对齐方式 valign=top/middle/bottom/baseline
合并单元格 合并列数 colspan
合并单元格 合并行数 rowspan
实战：table边框有很多bug,最稳妥的方法就是用css样式，对每一个单元格做样式设计
1）在table中使用border-radius
2）table中设置边框 http://www.divcss5.com/wenji/w503.shtml
做一张下图的表格
代码：
<!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,maximum-scale=1,mimimum=1,user-scalable=0"> <title>Document</title> <style type="text/css"> /*方法三：对每一个单元格单独设置css属性*/ /*方法二：*/ /* table{ border-collapse:collapse; } th,td{ border:2px solid blue; }*/ </style> </head> <body > <!-- 方法一： --> <table style="width:60%;height:400px;text-align:center;background:blue" border=0 cellspacing=2 cellpadding=0> <tr> <th rowspan=5 style="background-color:rgb(251,175,0);">学生</th> <th colspan=6 style="background-color:rgb(0,255,255)">学生信息表</th> </tr> <tr style="background-color:rgb(249,117,109)"> <td>序号</td> <td>姓名</td> <td>性别</td> <td>年龄</td> <td>电话</td> <td>住址</td> </tr> <tr style="background-color:rgb(193,193,193)"> <td>1</td> <td>张三</td> <td>男</td> <td>23</td> <td>110</td> <td>雁塔</td> </tr> <tr style="background-color:rgb(193,193,193)"> <td>1</td> <td>张三</td> <td>男</td> <td>23</td> <td>110</td> <td>雁塔</td> </tr> <tr style="background-color:rgb(193,193,193)"> <td>1</td> <td>张三</td> <td>男</td> <td>23</td> <td>110</td> <td>雁塔</td> </tr> </table> </body> </html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix