表格HTML

//test.html

html 复制代码
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>表格与CSS分开示例</title>  
    <link rel="stylesheet" href="styles.css"> <!-- 引入外部CSS文件 -->  
</head>  
<body>  
  
<table>  
    <thead>  
        <tr>  
            <th>编号</th>  
            <th>姓名</th>  
            <th>年龄</th>  
        </tr>  
    </thead>  
    <tbody>  
        <tr>  
            <td>1</td>  
            <td>张三</td>  
            <td>28</td>  
        </tr>  
        <tr>  
            <td>2</td>  
            <td>李四</td>  
            <td>24</td>  
        </tr>  
        <!-- 更多行... -->  
    </tbody>  
</table>  
  
</body>  
</html>

//styles.css

css 复制代码
/* styles.css */   
table {  
    width: 100%; /* 表格宽度为100% */  
    border-collapse: collapse; /* 边框合并为一个单一的边框 */  
}  
  
th, td {  
    border: 1px solid #ddd; /* 单元格边框 */  
    padding: 8px; /* 单元格内边距 */  
    text-align: left; /* 文本左对齐 */  
}  
  
th {  
    background-color: #f2f2f2; /* 表头背景色 */  
}  
  
/* 你可以根据需要添加更多样式 */
相关推荐
1024小神10 分钟前
uniapp+vue3+vite+ts+xr-frame实现ar+vr渲染踩坑记
前端
测试界清流12 分钟前
基于pytest的接口测试
前端·servlet
知识分享小能手35 分钟前
微信小程序入门学习教程,从入门到精通,自定义组件与第三方 UI 组件库(以 Vant Weapp 为例) (16)
前端·学习·ui·微信小程序·小程序·vue·编程
trsoliu1 小时前
多仓库 Workspace 协作机制完整方案
前端
啦工作呢1 小时前
数据可视化 ECharts
前端·信息可视化·echarts
NoneSL1 小时前
Uniapp UTS插件开发实战:引入第三方SDK
前端·uni-app
trsoliu1 小时前
Claude Code Templates
前端·人工智能
wangpq1 小时前
使用rerender-spa-plugin在构建时预渲染静态HTML文件优化SEO
前端·javascript·vue.js
KongHen1 小时前
完美解决请求跨域问题
前端
前端开发爱好者1 小时前
弃用 uni-app!Vue3 的原生 App 开发框架来了!
前端·javascript·vue.js