站長資訊網(wǎng)
html表格的作用是展示數(shù)據(jù)。表格主要用于顯示、展示數(shù)據(jù)，因為它可以讓數(shù)據(jù)顯示的非常的規(guī)整，可讀性非常好；特別是后臺展示數(shù)據(jù)的時候，能夠熟練運(yùn)用表格就顯得很重要；一個清爽簡約的表格能夠把繁雜的數(shù)據(jù)表現(xiàn)得很有條理。
前端（vue）入門到精通課程：進(jìn)入學(xué)習(xí)
API 文檔、設(shè)計、調(diào)試、自動化測試一體化協(xié)作工具：點(diǎn)擊使用
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
表格是實際開發(fā)中非常常用的標(biāo)簽。
1.表格的主要作用
表格主要用于顯示、展示數(shù)據(jù)，因為它可以讓數(shù)據(jù)顯示的非常的規(guī)整，可讀性非常好。特別是后臺展示數(shù)據(jù)的時候，能夠熟練運(yùn)用表格就顯得很重要。一個清爽簡約的表格能夠把繁雜的數(shù)據(jù)表現(xiàn)得很有條理。
總結(jié)：表格不是用來布局頁面得，而是用來展示數(shù)據(jù)的。
例如：
| 瓜類 | 單價 | 數(shù)目 | 金額 |
|---|---|---|---|
| 西瓜 | 12 | 10 | 120 |
| 哈密瓜 | 14 | 5 | 70 |
| 香瓜 | 8 | 15 | 120 |
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é)：表頭單元格也是單元格，常用于表格的第一行，突出重要性，表頭單元格里面的文字會加粗居中顯示。
表格的結(jié)構(gòu)標(biāo)簽
使用場景：因為表格可能很長，為了更好的表示表格的予以語義，可以將表格分成表格頭部和表格的主體兩大部分。
在表格標(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>
表格屬性，這部分屬性我們實際開發(fā)中不常用，后面通過CSS來設(shè)置。
目的有兩個：
-
記住CSS這些單詞，后面CSS會使用。
-
直觀感受表格的外觀形態(tài)。
| 屬性名 | 屬性值 | 描述 |
|---|---|---|
| align | left 、center、right | 規(guī)定表格相對周圍元素的對齊方式。 |
| border | 1或"" | 規(guī)定表格單元是否擁有邊框，默認(rèn)為""，表示沒有邊框 |
| cellpadding | 像素值 | 規(guī)定單元邊沿與其內(nèi)容之間的空白，默認(rèn) 1 像素 |
| cellspacing | 像素值 | 規(guī)定單元表格之間的空白，默認(rèn) 2 像素。 |
| width | 像素值或百分比 | 規(guī)定表格的寬度 |
案例：小說排行榜
| 排名 | 關(guān)鍵詞 | 封面 |
|---|---|---|
| 1 | 靠近你會掉刺 |  |
| 2 | 魔尊要抱抱 |  |
| 3 | 觸碰的旋律 |  |
| 4 | 穿越成反派要如何活命 |  |
案例分析：
-
第一行里面是 th 表頭單元格
-
第二行開始里面是 td 普通單元格
-
單元格里面可以放任何元素，文字鏈接圖片等后可以
后書寫表格屬性屬性
-
用到寬度高度邊框 cellpadding 和 cellspacing
-
瀏覽器中對齊 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>靠近你會掉刺</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>
合并單元格
特殊情況下，可以把多格單元格合并為一個單元格。
合并單元格方式
跨行合并： rowspan=“合并單元格的個數(shù)”。
跨列合并： colspan=“合并單元格的個數(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前端）
