表格標(biāo)簽在過去的網(wǎng)頁開發(fā)中使用的非常多，絕大多數(shù)的網(wǎng)站都是用來表格標(biāo)簽來制作，也就是說表格標(biāo)簽是一個(gè)時(shí)代的代表。
1. 什么是表格標(biāo)簽？
表格標(biāo)簽的作用 ：用來給一堆數(shù)據(jù)添加表格語義，其實(shí)表格是一種數(shù)據(jù)的展現(xiàn)形式，當(dāng)數(shù)據(jù)量非常大的時(shí)候，表格會(huì)清晰的展示出來
表格標(biāo)簽的格式：
<table>
<tr>
<td>需要顯示的內(nèi)容</td>
</tr>
</table>
- 其實(shí)表格標(biāo)簽中的table 代表整個(gè)表格，也就是一堆table 標(biāo)簽就是一個(gè)表格，
- 表格標(biāo)簽中的tr標(biāo)簽代表整個(gè)表格中的一行數(shù)據(jù)，也就是說一對(duì) tr 標(biāo)簽就是表格中的一行，td 標(biāo)簽代表表格中一行中的一個(gè)單元格。
- 注意點(diǎn) 1.表格標(biāo)簽有一個(gè)邊框?qū)傩?border，這個(gè)屬性決定了邊框的寬度，默認(rèn)情況下這個(gè)屬性的值是0，所以是看不到邊框的。
- 注意點(diǎn) 2.表格標(biāo)簽是一個(gè)組合標(biāo)簽，所以table/tr/td 要么一起出現(xiàn)，要么一起不出現(xiàn)，不會(huì)單個(gè)出現(xiàn)的。
2. 表格標(biāo)簽的屬性
- 寬度和高度屬性：可以給table 標(biāo)簽和 td 標(biāo)簽使用。該屬性默認(rèn)是按照內(nèi)容的尺寸來調(diào)整的；
- 如果給td標(biāo)簽設(shè)置的width和height屬性，會(huì)修改當(dāng)前單元格的寬度和高度，不會(huì)影響到整個(gè)表格的寬度和高度。
- 水平對(duì)齊和垂直對(duì)齊的屬性：其中水平對(duì)齊可以給table標(biāo)簽和tr 標(biāo)簽和td標(biāo)簽使用，但是垂直對(duì)齊只能給td標(biāo)簽使用。
- 給table標(biāo)簽設(shè)置的align 屬性，可以控制表格在水平方向的對(duì)齊方式;
- 給tr標(biāo)簽設(shè)置align屬性，可以控制當(dāng)前行中所有單元格內(nèi)容的水平方向的對(duì)齊方式；
- 給td 標(biāo)簽設(shè)置的align屬性，可以控制當(dāng)前單元格內(nèi)容在水平方向的對(duì)齊方式。
- 如果給td中設(shè)置了align屬性，tr中也設(shè)置了align 屬性，那么單元格中的內(nèi)容會(huì)按照td總設(shè)置的來對(duì)齊。
- 給tr標(biāo)簽設(shè)置valign屬性，可以控制當(dāng)前行中所有單元格中的內(nèi)容，在垂直方向的對(duì)齊方式
- 如果td中設(shè)置了valign屬性，tr中也設(shè)置了valign屬性，那么單元格中的內(nèi)容會(huì)按照td中設(shè)置的來對(duì)齊。
- 外邊距和內(nèi)邊距的屬性：只能給table 標(biāo)簽使用。
- 外邊距就是單元格和單元格之間的距離,默認(rèn)，外邊距為2px；cellspacing
- 內(nèi)邊距 就是單元格的邊框和文字之間的間隙；cellpadding；默認(rèn)內(nèi)邊距為 1px。
3.細(xì)線表格
1.制作方式：
1.1 給table標(biāo)簽設(shè)置bgcolor；
1.2 給tr標(biāo)簽設(shè)置bgcolor；
1.3 給table 標(biāo)簽設(shè)置cellspacing=“1px”
注意點(diǎn)：table標(biāo)簽和tr標(biāo)簽以及td標(biāo)簽，都支持bgcolor 屬性。
4. 表格標(biāo)簽其他標(biāo)簽
- 在表格標(biāo)簽中提供了一個(gè)標(biāo)簽，用來設(shè)置表格的標(biāo)題，<caption>，只要將標(biāo)題卸載caption 標(biāo)簽中，那么標(biāo)題就會(huì)自動(dòng)相對(duì)于表格的寬度居中
caption 標(biāo)簽的注意點(diǎn)：caption 標(biāo)簽一定要寫在table 標(biāo)簽中，否則無效；
caption 標(biāo)簽一定要緊跟在table標(biāo)簽后面。
- 標(biāo)題單元格標(biāo)簽
在表格標(biāo)簽中提供了一個(gè)標(biāo)簽專門用來存儲(chǔ)每一列的標(biāo)題，這個(gè)標(biāo)簽叫做th標(biāo)簽，只要將當(dāng)前列的標(biāo)題存儲(chǔ)在這個(gè)標(biāo)簽中，文字會(huì)自動(dòng)加粗。
3.其實(shí)表格中有兩種單元格，一種是td，一種是th，td是專門用來存儲(chǔ)數(shù)據(jù)的，th是專門用來存儲(chǔ)當(dāng)列的標(biāo)題的。
5. 表格的數(shù)據(jù)分類
- 表格的標(biāo)題 caption
- 表格的表頭信息 thead
- 表格的主體信息 tbody
- 表格的附加信息 tfoot
注意點(diǎn)：如果我們沒有編寫tbody，系統(tǒng)會(huì)我們添加tbody，如果指定了thead和tfoot，那么在修改表格的高度時(shí)，thead 和tfoot 都有自己默認(rèn)的高度，不會(huì)隨著表格的高度的變化而變化的。
6. 單元格合并
- 水平方向上的單元格合并：可以在td標(biāo)簽上添加一個(gè)colspan屬性，來指定把某一個(gè)單元格當(dāng)做多個(gè)單元格來看待。例如<td conlspan="2"></td>
- 注意點(diǎn)：由于把某一個(gè)單元格當(dāng)做了多個(gè)單元格來看，所以會(huì)多出一些單元格，所以需要?jiǎng)h掉多個(gè)單元格才能正常。
- 單元格合并永遠(yuǎn)都是向后或者向下合并，而不能向前或者向上合并。
- 垂直方向的合并單元格：可以給td標(biāo)簽添加一個(gè)rowspan屬性，來指定吧某一個(gè)單元格當(dāng)做多個(gè)單元格來看待，垂直方向。例如<td rowspan="2">
7.快捷鍵
- 快速移動(dòng) ：control+shif+方向鍵；
- 快速合并和展開代碼（選中的所有的標(biāo)簽）：合并control + shift + - 展開：control +shift + +
- 快速新啟一行 ：shift+enter
