搜尋

首頁  >  文章  >  web前端  >  怎麼用css製作好看的表格？ 【範例】

怎麼用css製作好看的表格？ 【範例】

藏色散人
藏色散人原創
2018-09-05 14:57:277427瀏覽

本篇文章將會為大家詳細介紹如何用css製作出好看又簡潔的HTML表格。相信大家接觸過HTML相關知識後，或多或少都會自己寫點小程式碼，寫個小效果。就例如table表格，我們在瀏覽各個網站時，總是能看到各種表格展示，有的就是傳統的表格，毫無樣式可言。有的則是有特色的展現表格。

對於新手小白來說，沒有接觸過css依然可以製作表格，只不過那樣的表格，枯燥乏味。下面我來跟大家分享介紹一款用css樣式製作的非常好看又簡潔的表格。

div css製作好看的表格具體程式碼範例如下：##

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用css制作的一款好看表格样式示例</title>
    <style>
        #t1
        {
            font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
            width:100%;
            border-collapse:collapse;
        }

        #t1 td, #t1 th
        {
            font-size:1em;
            border:1px solid #1094f2;
            padding:3px 7px 2px 7px;
        }

        #t1 th
        {
            font-size:1.1em;
            text-align:left;
            padding-top:5px;
            padding-bottom:4px;
            background-color: #029789;
            color:#ffffff;
        }

        #t1 tr.alt td
        {
            color:#000000;
            background-color: #94ef9a;
        }
    </style>
</head>
<body>
<table id="t1">
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>爱好</th>
    </tr>

    <tr>
        <td>张三</td>
        <td>男</td>
        <td>唱歌</td>
    </tr>

    <tr class="alt">
        <td>李四</td>
        <td>女</td>
        <td>跳舞</td>
    </tr>

    <tr>
        <td>王二</td>
        <td>男</td>
        <td>看书</td>
    </tr>

    <tr class="alt">
        <td>赵五</td>
        <td>男</td>
        <td>爬山</td>
    </tr>
</table>
</body>
</html>

上述程式碼我們透過瀏覽器訪問，效果如下圖：


怎麼用css製作好看的表格？ 【範例】

如圖所示，相比較枯燥的黑白線條的表格是不是好看多了呢？又簡潔又好看，每隔一行顯示不同顏色背景,而且table邊框是細線展示。可以讓使用者更直覺的查閱表格中資訊。想要達到這樣的效果就離不開強大的css樣式屬性了。

這裡我們在style樣式裡可以發現一些重要的屬性例如：

border-collapse:collapse;這個屬性表示的是可以把表格邊框合併成為單一的邊框。

background-color就是設定背景顏色的。

那麼透過上述的介紹，大家對用css製作表格是否有更多的了解？這樣就可以依照自我美感喜好，來設定不同效果的css表格樣式。一張好看的表格不僅可以讓使用者喜歡，也可以讓自己管理起來更直覺方便。

這篇文章有一定的參考價值，希望對有需要的朋友有幫助！

以上是怎麼用css製作好看的表格？ 【範例】的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：html中的字元間距怎麼設定？ css樣式設定文字對齊方式總結下一篇：html中的字元間距怎麼設定？ css樣式設定文字對齊方式總結

相關文章

看更多