創(chuàng)建表格代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!-- 在HTML中痴颊，使用table標(biāo)簽來創(chuàng)建一個(gè)表格 -->
<table border="1" width="40%" align="center">
<!-- 在table標(biāo)簽中使用tr來表示表格中的一行玉转，有幾行就有幾對tr -->
<tr>
<!-- 在tr中需要使用td來創(chuàng)建一個(gè)單元格，有幾個(gè)單元格就有幾個(gè)td -->
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td>A4</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
<!-- rowspan用來設(shè)置縱向的合并單元格 -->
<td rowspan="2">B4</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<!-- colspan橫向的合并單元格 -->
<td colspan="2">D3</td>
</tr>
</table>
</body>
</html>
如圖：
table{
設(shè)置表格的寬度
width: 300px;
居中
margin: 0 auto;
邊框
border:1px solid black;
table和td邊框之間默認(rèn)有一個(gè)距離髓介，通過border-spacing屬性可以設(shè)置這個(gè)距離
border-spacing: 10px;
border-collapse可以用來設(shè)置表格的邊框合并
如果設(shè)置了邊框合并呀邢，則border-spacing自動(dòng)失效
border-collapse: collapse;
設(shè)置背景樣式
background-color: #bfa;
}
設(shè)置邊框
th, td{
border: 1px solid black;
}
設(shè)置隔行變色
tbody > tr:nth-child(even){
background-color: #bfa;
}
鼠標(biāo)移入到tr以后，改變顏色
tr:hover{
background-color: yellow;
}
效果圖：
長表格
有一些情況下表格是非常的長的，這時(shí)就需要將表格分為三個(gè)部分裸删，表頭灯萍，表格的主體，表格底部
在HTML中為我們提供了三個(gè)標(biāo)簽：
thead 表頭(內(nèi)容永遠(yuǎn)會(huì)顯示在表格的頭部)
tbody 表格主體(內(nèi)容永遠(yuǎn)會(huì)顯示在表格的中間)
tfoot 表格底部(內(nèi)容永遠(yuǎn)會(huì)顯示在表格的底部)
tr需要寫在這些標(biāo)簽當(dāng)中
如果表格中沒有寫tbody穷娱，瀏覽器會(huì)自動(dòng)在表格中添加tbody并且將所有的tr都放到tbody中篓叶。
注意tr并不是table的子元素母谎，而是tbody的子元素
通過table > tr 無法選中行 需要通過tbody > tr
表格布局
表格的列數(shù)由td最多的那行決定
表格是可以嵌套廊勃，可以在td中在放置一個(gè)表格
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格的布局</title>
</head>
<body>
<table border="1" width="100%">
<tr height="100px">
<td colspan="2"></td>
</tr>
<tr height="400px">
<td width="20%"></td>
<td width="80%">
<table border="1" width="100%" height="100%">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
<tr height="100px">
<td colspan="2"></td>
</tr>
</table>
</body>
</html>
效果圖：
