web前端入門到實(shí)戰(zhàn)：html表格table的使用,以及表格的css樣式

<style>

table{
border-spacing:0px;/*設(shè)置邊框的距離*/
border-collapse:?collapse?;/*合并邊框(設(shè)置了此屬性?邊框的距離就沒用了?所以用此屬性無需再設(shè)置邊框距離)*/
}
td,th{
border:1px?solid?Black;
}
tr:nth-child(odd){/*設(shè)置隔行背景不同色:參數(shù):even?表示偶數(shù)??odd??表示奇數(shù)?*/
background-color:#bfa;
}
tr:hover{
background-color:yellow
;
}
</style>
<table>
<tr>
    <!--th(table?head)是特殊的一個(gè)td,用法跟td一樣,只是他會有一些默認(rèn)的樣式(居中、加粗).可用來設(shè)置表頭-->
    <th>表格內(nèi)容</th>
    <th?colspan="4">表格內(nèi)容</th><!--colspan橫向合并單元格.需要后面的行?然后前面的加一個(gè)rowspan指定占用的列數(shù)-->
</tr>
<tr>    
    <td>表格內(nèi)容</td>
    <td>表格內(nèi)容</td>
    <td>表格內(nèi)容</td>
    <td>表格內(nèi)容</td>
    <td>表格內(nèi)容</td>
</tr>
<tr>    
    <td>表格內(nèi)容</td>
    <td>表格內(nèi)容</td>
    <td>表格內(nèi)容</td>
    <td>表格內(nèi)容</td>
    <td?rowspan="2">表格內(nèi)容</td><!--rowspan縱向合并單元格.需要?jiǎng)h除一列?然后前面的加一個(gè)rowspan指明占用的行數(shù)-->
</tr>?
<tr>    ?
    <td>表格內(nèi)容</td>
    <td>表格內(nèi)容</td>
    <td>表格內(nèi)容</td>
    <td>表格內(nèi)容</td>

</tr>
<tr>    ?
    <td>表格內(nèi)容</td>
    <td>表格內(nèi)容</td>
    <td>表格內(nèi)容</td>
    <td>表格內(nèi)容</td>
    <td>表格內(nèi)容</td>
</tr>
<tr>    ?
    <td>表格內(nèi)容</td>
    <td>表格內(nèi)容</td>
    <td>表格內(nèi)容</td>
    <td>表格內(nèi)容</td>?
    <td>表格內(nèi)容</td>
</tr>
<tr>    ?
    <td>表格內(nèi)容</td>
    <td>表格內(nèi)容</td>
    <td>表格內(nèi)容</td>
    <td>表格內(nèi)容</td>?
    <td>表格內(nèi)容</td>
</tr>
</table>
web前端開發(fā)學(xué)習(xí)Q-q-u-n： 491404389  ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻，PDF）

有一些情況下表格是非常的長的，

這時(shí)就需要將表格分為三個(gè)部分，表頭，表格的主體，表格底部

在HTML中為我們提供了三個(gè)標(biāo)簽:

thead表頭

tbody表格主體

tfoot表格底部

這三個(gè)標(biāo)簽的作用，就來區(qū)分表格的不同的部分，他們都是table的子標(biāo)簽，

都需要直接寫到table中，tr需要寫在這些標(biāo)簽當(dāng)中

thead中的內(nèi)容，永遠(yuǎn)會顯示在表格的頭部:

tfoot中的內(nèi)容，永遠(yuǎn)都會顯示表格的底部

tbody中的內(nèi)容，永遠(yuǎn)都會顯示表格的中間

注意:設(shè)置樣式時(shí):

如果表格中沒有寫tbody,瀏覽器會自動(dòng)在表格中添加tbody

并且將所有的tr都放到tbody中,所以tr并不是table的子元素.而是他的后代