如何用html做表_HTML表格(table)创建与数据展示方法

如何用html做表_html表格(table)创建与数据展示方法

姓名 年龄
张三 30
李四 25
2023年员工销售业绩
员工姓名 部门 销售额 (万元)
王小明 市场部 150
李芳 销售部 220
赵刚 市场部 180
总计 550
学生成绩单
姓名 第一学期 第二学期
语文 数学 语文 数学
张三 90 85 92 88
李四 78 82 80 85
/* 在你的style.css文件中 */table {  width: 100%; /* 表格宽度占满父容器 */  border-collapse: collapse; /* 合并单元格边框 */  margin-bottom: 20px; /* 表格底部留白 */  font-family: Arial, sans-serif; /* 字体设置 */}caption {  font-size: 1.2em;  font-weight: bold;  margin-bottom: 10px;  text-align: left; /* 标题左对齐 */}th, td {  border: 1px solid #ddd; /* 单元格边框 */  padding: 8px; /* 单元格内边距 */  text-align: left; /* 文本左对齐 */}th {  background-color: #f2f2f2; /* 表头背景色 */  color: #333;  font-weight: bold;}tbody tr:nth-child(even) { /* 隔行换色 */  background-color: #f9f9f9;}tbody tr:hover { /* 鼠标悬停效果 */  background-color: #eaeaea;}tfoot td {  background-color: #e0e0e0;  font-weight: bold;  text-align: right; /* 总计右对齐 */}

以上就是如何用html做表_HTML表格(table)创建与数据展示方法的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1592252.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月23日 07:32:59
下一篇 2025年12月23日 07:33:18

相关推荐

发表回复

登录后才能评论
关注微信