html如何用css美化表格-css教程-PHP中文网

首页

web前端

css教程

html如何用css美化表格

藏色散人

Feb 05, 2021 am 09:16 AM

css html

html用css美化表格的方法：首先创建一个HTML示例文件；然后在body中创建table表格；最后通过style标签给表格添加css样式即可。

html如何用css美化表格

本文操作环境：Windows7系统、HTML5&&CSS3、Dell G3电脑。

html如何用css美化表格？

下面通过示例来看看。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style type="text/css">
            /*表格样式*/            
            table {
                width: 90%;
                background: #ccc;
                margin: 10px auto;
                border-collapse: collapse;
                /*border-collapse:collapse合并内外边距
                (去除表格单元格默认的2个像素内外边距*/ 
            }               
            th,td {
                height: 25px;
                line-height: 25px;
                text-align: center;
                border: 1px solid #ccc;
            }       
            th {
                background: #eee;
                font-weight: normal;
            }       
            tr {
                background: #fff;
            }       
            tr:hover {
                background: #cc0;
            }       
            td a {
                color: #06f;
                text-decoration: none;
            }       
            td a:hover {
                color: #06f;
                text-decoration: underline;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <!-- th为表格标题栏-->
                <th>序号</th>
                <th>职位名称</th>
                <th>招聘人数</th>
                <th>工作地点</th>
                <th>有效时间</th>
                <th>职位描述</th>
            </tr>
            <tr>
                <td>1</td>
                <td>保安人员</td>
                <td>3至4人</td>
                <td>洞头</td>
                <td>2006.12.08</td>
                <td>
                    <a href="#">查看</a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>项目技术人员</td>
                <td>1人</td>
                <td>洞头</td>
                <td>2006.10.08</td>
                <td>
                    <a href="#">查看</a>
                </td>
            </tr>
            <tr>
                <td>3</td>
                <td>总经理助理</td>
                <td>1人</td>
                <td>温州</td>
                <td>2006.07.11</td>
                <td>
                    <a href="#">查看</a>
                </td>
            </tr>
        </table>
    </body>
</html>

登录后复制

效果图：

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7510

CakePHP 教程

1378

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

bootstrap怎么写分割线 Apr 07, 2025 pm 03:12 PM

创建 Bootstrap 分割线有两种方法：使用标签，可创建水平分割线。使用 CSS border 属性，可创建自定义样式的分割线。

bootstrap怎么插入图片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入图片有以下几种方法：直接插入图片，使用 HTML 的 img 标签。使用 Bootstrap 图像组件，可以提供响应式图片和更多样式。设置图片大小，使用 img-fluid 类可以使图片自适应。设置边框，使用 img-bordered 类。设置圆角，使用 img-rounded 类。设置阴影，使用 shadow 类。调整图片大小和位置，使用 CSS 样式。使用背景图片，使用 background-image CSS 属性。

bootstrap怎么调整大小 Apr 07, 2025 pm 03:18 PM

要调整 Bootstrap 中元素大小，可以使用尺寸类，具体包括：调整宽度：.col-、.w-、.mw-调整高度：.h-、.min-h-、.max-h-

bootstrap怎么设置框架 Apr 07, 2025 pm 03:27 PM

要设置 Bootstrap 框架，需要按照以下步骤：1. 通过 CDN 引用 Bootstrap 文件；2. 下载文件并将其托管在自己的服务器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根据需要编译 Sass/Less；5. 导入定制文件（可选）。设置完成后，即可使用 Bootstrap 的网格系统、组件和样式创建响应式网站和应用程序。