Css基本樣式表格的詳細介紹

這篇文章主要為大家Css基本樣式表格的詳細介紹,具有一定的參考價值，有興趣的小伙伴們可以參考一下

a.Css表格屬性可以幫助我們大大改善表格的外觀

b.表格邊框

<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>小王</td>
        <td>20</td>
        <td>男</td>
    </tr>
    <tr>
        <td>小王</td>
        <td>20</td>
        <td>男</td>
    </tr>
    <tr>
        <td>小王</td>
        <td>20</td>
        <td>男</td>
    </tr>
</table>

   

這樣可以產生一個沒有邊框效果的表格

此時可以為表格新增一個邊框

<table border = "1">

但是這種寫法並不能應用於所有的table當中

因此可以選擇使用Css樣式作為一種更好的方式

<table id="tb">
#tb{
    border: 1px solid blue;
}

這時可以看到表格最外層的藍色的外邊框

可以設定表格內部：

#tb,tr,th,td{
    border: 1px solid blue;
}

這裡用到了分組選擇器。即一個id選擇器和3個元素選擇器組合在一起，之間用逗號隔開

c.折疊邊框

在上面的表格中顯示的是雙邊框

這樣顯然是不合理的

可以把雙邊框合成一條線

#tb,tr,th,td{
    border: 1px solid blue;
    border-collapse: collapse;
}

d.表格寬高

#tb{
    width: 400px;
    height: 400px;
    border-collapse: collapse;
}
#tb,tr,th,td{
    border: 1px solid blue;
}

e.表格文字對齊

#tb{
    width: 400px;
    height: 400px;
    border-collapse: collapse;
}
#tb,tr,th,td{
    border: 1px solid blue;
    text-align:center;
}

f.表格內邊距

g.表格顏色

#tb{
    width: 400px;
    height: 400px;
    border-collapse: collapse;
}
#tb,tr,th,td{
    border: 1px solid blue;
    text-align:center;
    background-color: aqua;
}

以上是Css基本樣式表格的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！