html表格的作用是展示數(shù)據(jù)。表格主要用于顯示、展示數(shù)據(jù)，因?yàn)樗梢宰寯?shù)據(jù)顯示的非常的規(guī)整，可讀性非常好；特別是后臺(tái)展示數(shù)據(jù)的時(shí)候，能夠熟練運(yùn)用表格就顯得很重要；一個(gè)清爽簡(jiǎn)約的表格能夠把繁雜的數(shù)據(jù)表現(xiàn)得很有條理。

前端（vue）入門到精通課程：進(jìn)入學(xué)習(xí)
API 文檔、設(shè)計(jì)、調(diào)試、自動(dòng)化測(cè)試一體化協(xié)作工具：點(diǎn)擊使用

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

表格是實(shí)際開發(fā)中非常常用的標(biāo)簽。

1.表格的主要作用

表格主要用于顯示、展示數(shù)據(jù)，因?yàn)樗梢宰寯?shù)據(jù)顯示的非常的規(guī)整，可讀性非常好。特別是后臺(tái)展示數(shù)據(jù)的時(shí)候，能夠熟練運(yùn)用表格就顯得很重要。一個(gè)清爽簡(jiǎn)約的表格能夠把繁雜的數(shù)據(jù)表現(xiàn)得很有條理。

總結(jié)：表格不是用來布局頁面得，而是用來展示數(shù)據(jù)的。

例如：

2.表格的基本語法

<table> 	<tr> 		<td>單元內(nèi)得文字</td> 		... 	</tr> </table>

• <table></table>是用于定義表格的標(biāo)簽。

• <tr></tr>標(biāo)簽用于定義表格中的行，必須嵌套在<table></table>標(biāo)簽中。

• <td></td>用于定義表格中的單元格，必須嵌套在<tr></tr>標(biāo)簽中。

• 字母 td 指表格數(shù)據(jù)(table data),即單元格的內(nèi)容。

表頭單元格標(biāo)簽

一般表頭單元格位于表格的第一行或第一列，表頭單元格里面的文本內(nèi)容加粗劇中顯示。

<th>標(biāo)簽表示HTML表格的表頭部分(table head的縮寫)。

總結(jié)：表頭單元格也是單元格，常用于表格的第一行，突出重要性，表頭單元格里面的文字會(huì)加粗居中顯示。

表格的結(jié)構(gòu)標(biāo)簽

使用場(chǎng)景：因?yàn)楸砀窨赡芎荛L(zhǎng)，為了更好的表示表格的予以語義，可以將表格分成表格頭部和表格的主體兩大部分。

在表格標(biāo)簽中，分別使用：<thead>標(biāo)簽 表格的頭部區(qū)域、<tbody>標(biāo)簽的主體區(qū)域。這樣可以更好的分清表格結(jié)構(gòu)。

• <thead></thead>：用于定義表格的頭部。內(nèi)部必須擁有標(biāo)簽。一般是位于第一行。

• <tbody><tbody>：用于定義表格的主體，主要用于放數(shù)據(jù)本體。

• 以上標(biāo)簽都是放在<table></table>標(biāo)簽中。

例子：

<table border="1">      <thead>      		  <tr><th>姓名</th>  <th>性別</th> <th> 年齡 </th></tr>       <thead>      <tbody> 		  <tr><td>劉德華</td>  <td>男</td> <td> 56 </td></tr>        	  <tr><td>張學(xué)友</td>  <td>男</td> <td> 58 </td></tr>           <tr><td>郭富城</td>  <td>男</td> <td> 51 </td></tr>           <tr><td>黎明</td>  <td>男</td> <td> 57 </td></tr>           </tbody>     </table>

表格屬性，這部分屬性我們實(shí)際開發(fā)中不常用，后面通過CSS來設(shè)置。

目的有兩個(gè)：

• 記住CSS這些單詞，后面CSS會(huì)使用。

• 直觀感受表格的外觀形態(tài)。

案例：小說排行榜

排名	關(guān)鍵詞	封面
1	靠近你會(huì)掉刺
2	魔尊要抱抱
3	觸碰的旋律
4	穿越成反派要如何活命

案例分析：

• 第一行里面是 th 表頭單元格

• 第二行開始里面是 td 普通單元格

• 單元格里面可以放任何元素，文字鏈接圖片等后可以

后書寫表格屬性屬性

• 用到寬度高度邊框 cellpadding 和 cellspacing

• 瀏覽器中對(duì)齊 align

具體代碼如下：

 <table align="center" width="500" height="249" border="1" cellspacing="0">         <thead>             <tr>                 <th>排名</th>                 <th>關(guān)鍵詞</th>                 <th>封面</th>             </tr>         </thead>          <tbody>             <tr>                 <td>1</td>                 <td>靠近你會(huì)掉刺</td>                 <td><img src="images/1.jpg"></td>             </tr>             <tr>                 <td>2</td>                 <td>魔尊要抱抱</td>                 <td><img src="images/2.jpg"></td>             </tr>             <tr>                 <td>3</td>                 <td>觸碰的旋律</td>                 <td><img src="images/3.jpg"></td>             </tr>             <tr>                 <td>4</td>                 <td>穿越成反派要如何活命</td>                 <td><img src="images/4.jpg"></td>             </tr>         </tbody>     </table>

合并單元格

特殊情況下，可以把多格單元格合并為一個(gè)單元格。

合并單元格方式

跨行合并： rowspan=“合并單元格的個(gè)數(shù)”。
跨列合并： colspan=“合并單元格的個(gè)數(shù)”。

目標(biāo)單元格：（寫合并代碼）

跨行：最上側(cè)單元格為目標(biāo)單元格，寫合并代碼
跨列：最左側(cè)單元格為目標(biāo)單元格，寫合并代碼

合并單元格三部曲：

• 1.先確定是跨行還是跨列合并。

• 2.找到目標(biāo)單元格，寫合并方式 = 合并的單元格數(shù)量 。
  比如：<td colspan = "2"></td>。

• 3.刪除多余的單元格。

例子：

 <table width="500" height="249" border="1" cellspacing="0">         <tr>             <td></td>             <td colspan="2"></td>                     </tr>         <tr>             <td rowspan="2"></td>             <td></td>             <td></td>         </tr>         <tr>                         <td></td>             <td></td>         </tr>          </table>

（學(xué)習(xí)視頻分享：web前端）