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