html如何用css美化表格

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

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

html如何用css美化表格？

下面通过示例来看看。

<!DOCTY PE  html>
<html>
    <head>
        <t IT le></title>
        <style type="text/css">
            /*表格样式*/            
            table {
                width: 90%;
                background:  # ccc;
                m arg in: 10px auto;
                border-collapse: collapse;
                /*border-collapse:collapse合并内 外边距 
                (去除表格单元格默认的2个像素内外 边距 */ 
            }               
            th,td {
                h ei ght: 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  hr ef="#">查看</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>

效果图：

总结

以上是为你收集整理的 html如何用css美化表格全部内容，希望文章能够帮你解决 html如何用css美化表格所遇到的问题。

如果觉得网站内容还不错，推荐好友。

查看更多关于html如何用css美化表格的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did199329

更新时间：2023-04-27 阅读：24次