表格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; /* 表头背景色 */  
}  
  
/* 你可以根据需要添加更多样式 */
相关推荐
逐·風35 分钟前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫1 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦2 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子2 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山3 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享3 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf5 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨5 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL5 小时前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1116 小时前
css实现div被图片撑开
前端·css