HTML:表格数据展示区

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人员信息表</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    
    <table>
        <thead>
             <!-- thead 表示表格中的表头 -->
            
            <tr>
                <!-- tr 表示表格中的行 ,一个tr就是一行-->
                <!-- th 表示表格中的表头单元格,会加粗 -->
                <th>姓名</th>
                <th>年龄</th>
                <th>职位</th>
                <th>头像</th>
                <th>入职日期</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <!-- td 表示表格中的单元格 -->
                <td>25</td>
                <td>前端开发</td>
                <td><img src="CSS//img/1.png" alt="Avatar" width="50"></td>
                <td>2023-01-01</td>
                <td>
                    <!-- 这里删除按钮无法实现动态删除功能,仅作展示 -->
                    <button>删除</button>
                    <button>添加</button>
                    <!-- 文字居中 -->
                   
                           
                     
                </td>
            </tr>
            <tr>
                <td>李四</td>
                <td>30</td>
                <td>后端开发</td>
                <td><img src="CSS//img/1.png" alt="Avatar" width="50"></td>
                <td>2022-05-15</td>
                <td>
                    <button>删除</button>
                    <button>添加</button>
                </td>
            </tr>
           
        </tbody>
    </table>
</body>

<body>
    <!-- 页面主体内容 -->
    <footer>
        <p>北京大学</p>
        <p>邮箱:pku@edu.cn  电话:010 - 12345678</p>
    </footer>
</body>
</html>
复制代码
body {
    font-family: Arial, sans-serif;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th,
td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}

button {
    padding: 5px 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

footer {
    /* 设置背景色为灰色,这里使用十六进制颜色码 #808080,你也可以根据喜好调整 */
    background-color: #808080; 
    /* 上下内边距为 20px,左右内边距为 0 */
    padding: 20px 0; 
    /* 文本居中显示 */
    text-align: center; 
    /* 让 footer 固定在页面底部(如果有需要),可根据实际情况调整 */
    width: 100%; 
}

footer p {
    /* 上下外边距为 5px,左右外边距为 0 */
    margin: 5px 0; 
    /* 字体颜色为白色,和灰色背景形成对比 */
    color: white; 
    /* 字体大小为 14px */
    font-size: 14px; 
}
相关推荐
小蜜蜂嗡嗡2 小时前
【flutter对屏幕底部有手势区域(如:一条横杠)导致出现重叠遮挡】
前端·javascript·flutter
伍哥的传说3 小时前
Vue 3 useModel vs defineModel:选择正确的双向绑定方案
前端·javascript·vue.js·definemodel对比·usemodel教程·vue3.4新特性·vue双向绑定
胡gh8 小时前
页面卡成PPT?重排重绘惹的祸!依旧性能优化
前端·javascript·面试
言兴8 小时前
# 深度解析 ECharts:从零到一构建企业级数据可视化看板
前端·javascript·面试
山有木兮木有枝_8 小时前
TailWind CSS
前端·css·postcss
烛阴9 小时前
TypeScript 的“读心术”:让类型在代码中“流动”起来
前端·javascript·typescript
杨荧9 小时前
基于Python的农作物病虫害防治网站 Python+Django+Vue.js
大数据·前端·vue.js·爬虫·python
Moment10 小时前
毕业一年了,分享一下我的四个开源项目!😊😊😊
前端·后端·开源
程序视点11 小时前
Escrcpy 3.0投屏控制软件使用教程:无线/有线连接+虚拟显示功能详解
前端·后端
silent_missile11 小时前
element-plus穿梭框transfer的调整
前端·javascript·vue.js