表格標籤、標籤屬性、樣式屬性總結
目標:總結表格標籤及標籤屬性,設定表格樣式
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 >1,1</td>
<td>1,2</td>
<td>1,3</td>
</tr>
<tr>
<td>2,1</td>
<td>2,2</td>
<td>2,3</td>
</tr>
</tbody>
<tfoot>
<tr >
<td>腳1</td>
<td>腳2</td>
<td>腳3</td>
</tr>
</tfoot>
</table>
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>