表格標籤、標籤屬性、樣式屬性總結
目標：總結表格標籤及標籤屬性，設定表格樣式
PS：表單的用途是收集使用者資料，而表格的用途則是以網格的形式向用戶顯示二維資料
一、表格標籤
理論上只需要table、tr、td就可以達到目的，但是為了結構更加清晰明確，達到語義化的效果，需要配合thead、th、tbody、tfoot、caption，為了更好的控制表格還需要colgroup、col
1、表格的組成結構：tabel（標題+頭+主體+腳）
1)、標題 caption
2)、頭：thead+(tr+th) 或 tr+td，只能有一個thead，一個thead中只能有一個tr
3)、主體：tbody+(tr+td) 或 tr+td，可以有多個tbody，一個tbody中可以有多個tr
4)、腳：tfoot+(tr+td) 或 tr+td，只能有一個tfoot，一個tfoot中只能有一個tr
<table>
<caption>我的表格</caption>
<thead>
<tr>
<th>第一列</th>
<th>第二列</th>
<th>第三列</th>
</tr>
</thead>
<tbody>
<tr>
<td 2、colgroup和col，以行為單位去控制表格直接通過tr標籤就可以很方便的達到目的，如果以列為單位可以使用colgroup標籤和col標籤
3、html5對之前各個版本的表格標籤屬性大部分不再支援，其中很多屬性都可以用樣式屬性去實現，表格標籤、標籤屬性只負責結構
4、一些常用的設定
1、跨行 給單元格(td、th)設定 rowspan=”3”
2、跨列 給單元格(td、th)設定 colspan=”2”
二、表格table獨有的的樣式屬性
1、設定單元格是否獨立存在的樣式屬性 border-collapse
1.1）、屬性值：separate( 預設值) 單元格獨立存在
1.2）、屬性值：collapse 相鄰單元格邊框合併，table的另一個樣式border-spacing無效
2、設定相鄰單元格之間的距離 border-spacing，屬性值為css長度值
3、設定表格標題的位置 caption-side，屬性值top( 預設值)、bottom–>標題分別在上面、下面
4、空單元格是否顯示邊框 empty-cells，屬性值show( 預設值)、hide –>分別是顯示、不顯示
5、設定當內容過長時，是否拉伸單元格 table-layout
5.1）、auto 預設值，內容過長時，拉伸整個單元格
5.3）、fixed 內容過長時，不拉伸整個單元格
PS：當設定了表格的寬度時，設定拉伸，內容過長時會先擠壓其他有空餘空間的單元格，然後在拉伸
PS：當設定了表格的寬度時，設定不拉伸，內容過長時會自動換行，就算給單元格、表格設定了高度也一樣
PS：除了上述的表格獨立樣式屬性，其他樣式屬性和其他標籤差不多
PS：tr標籤只能設定高度，無法設定寬度
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>表格</title>
<style>
#myT{border-collapse: collapse;}
th,td{border: 1px solid darkcyan;padding: 10px;}
tr:hover{background-color: #00aaff;cursor: pointer;}
</style>
</head>
<body>
<table id="myT">
<caption>我喜歡的英雄</caption>
<thead>
<tr>
<th>AP</th>
<th>AD</th>
<th>ADC</th>
</tr>
</thead>
<tbody>
<tr>
<td>不祥之刃</td>
<td>荊棘之興</td>
<td>卡牌大師</td>
</tr>
<tr>
<td>暗夜獵手</td>
<td>小黃毛EZ</td>
<td>男槍</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>GG</td>
<td>GG</td>
<td>GG</td>
</tr>
</tfoot>
</table>
</body>
</html>