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;}