《物聯(lián)網(wǎng)Web前端開發(fā)基礎(chǔ)》課程

使用表格標(biāo)簽【任務(wù)5-1】認(rèn)識(shí)表格相關(guān)標(biāo)簽需求分析日常生活中，為了清晰地顯示數(shù)據(jù)或信息，常常使用表格對(duì)數(shù)據(jù)或信息進(jìn)行統(tǒng)計(jì)，同樣在制作網(wǎng)頁(yè)時(shí)，為了使網(wǎng)頁(yè)中的元素有條理地顯示，也可以使用表格對(duì)網(wǎng)頁(yè)進(jìn)行規(guī)劃。HTML語(yǔ)言提供了一系列的表格標(biāo)簽，本節(jié)將對(duì)這些標(biāo)簽進(jìn)行詳細(xì)地講解?！救蝿?wù)5-1】認(rèn)識(shí)表格相關(guān)標(biāo)簽知識(shí)儲(chǔ)備—表格的創(chuàng)建表格是怎樣形成的？說到表格，其實(shí)大家并不陌生課程表網(wǎng)上購(gòu)物查票【任務(wù)5-1】認(rèn)識(shí)表格相關(guān)標(biāo)簽知識(shí)儲(chǔ)備—表格的創(chuàng)建如何創(chuàng)建一個(gè)表格？【任務(wù)5-1】認(rèn)識(shí)表格相關(guān)標(biāo)簽知識(shí)儲(chǔ)備—表格的創(chuàng)建

<table></table><tr></tr>

<td></td>定義一個(gè)表格定義表格中的一行，嵌套在<table></table>中定義表格中的單元格，嵌套在<tr></tr>中創(chuàng)建table表格，離不開以下3對(duì)標(biāo)簽:【任務(wù)5-1】認(rèn)識(shí)表格相關(guān)標(biāo)簽知識(shí)儲(chǔ)備—<table>標(biāo)簽的屬性屬性描述常用屬性值border設(shè)置表格的邊框（默認(rèn)border="0"為無邊框）像素值cellspacing設(shè)置單元格與單元格邊框之間的空白間距像素值（默認(rèn)為2像素）cellpadding設(shè)置單元格內(nèi)容與單元格邊框之間的空白間距像素值（默認(rèn)為1像素）width設(shè)置表格的寬度像素值height設(shè)置表格的高度像素值align設(shè)置表格在網(wǎng)頁(yè)中的水平對(duì)齊方式left、center、rightbgcolor設(shè)置表格的背景顏色預(yù)定義的顏色值、十六進(jìn)制#RGB、rgb(r,g,b)background設(shè)置表格的背景圖像url地址【任務(wù)5-1】認(rèn)識(shí)表格相關(guān)標(biāo)簽知識(shí)儲(chǔ)備—<table>標(biāo)簽的屬性<table>標(biāo)簽屬性在實(shí)體表格中的表現(xiàn)如下圖所示：widthheightbordercellspacingcellspadding【任務(wù)5-1】認(rèn)識(shí)表格相關(guān)標(biāo)簽知識(shí)儲(chǔ)備—<table>標(biāo)簽的屬性<table>標(biāo)簽屬性在實(shí)體表格中的表現(xiàn)如下圖所示：align="center"bgcolor="CCCCCC"【任務(wù)5-1】認(rèn)識(shí)表格相關(guān)標(biāo)簽知識(shí)儲(chǔ)備—<table>標(biāo)簽的屬性<table>標(biāo)簽屬性在實(shí)體表格中的表現(xiàn)如下圖所示：background【任務(wù)5-1】認(rèn)識(shí)表格相關(guān)標(biāo)簽知識(shí)儲(chǔ)備—<tr>標(biāo)簽的屬性屬性描述常用屬性值height設(shè)置行高度

像素值

align設(shè)置一行內(nèi)容的水平對(duì)齊方式left、center、rightvalign設(shè)置一行內(nèi)容的垂直對(duì)齊方式top、middle、bottombgcolor設(shè)置行背景顏色預(yù)定義的顏色值、十六進(jìn)制#RGB、rgb(r,g,b)background設(shè)置行背景圖像url地址【任務(wù)5-1】認(rèn)識(shí)表格相關(guān)標(biāo)簽知識(shí)儲(chǔ)備—<tr>標(biāo)簽的屬性學(xué)習(xí)<tr>的屬性時(shí)需要注意以下幾點(diǎn)：<tr>標(biāo)簽無寬度屬性width，其寬度取決于表格標(biāo)簽<table>。對(duì)<tr>標(biāo)簽應(yīng)用valign屬性，用于設(shè)置一行內(nèi)容的垂直對(duì)齊方式。AB【任務(wù)5-1】認(rèn)識(shí)表格相關(guān)標(biāo)簽知識(shí)儲(chǔ)備—<td>標(biāo)簽的屬性屬性名含義常用屬性值width設(shè)置單元格的寬度像素值

height設(shè)置單元格的高度像素值align設(shè)置單元格內(nèi)容的水平對(duì)齊方式left、center、rightvalign設(shè)置單元格內(nèi)容的垂直對(duì)齊方式top、middle、bottombgcolor設(shè)置單元格的背景顏色預(yù)定義的顏色值、十六進(jìn)制#RGB、rgb(r,g,b)background設(shè)置單元格的背景圖像url地址colspan設(shè)置單元格橫跨的列數(shù)（用于合并水平方向的單元格）正整數(shù)rowspan設(shè)置單元格豎跨的行數(shù)（用于合并豎直方向的單元格）正整數(shù)【任務(wù)5-1】認(rèn)識(shí)表格相關(guān)標(biāo)簽知識(shí)儲(chǔ)備—<td>標(biāo)簽的屬性學(xué)習(xí)<td>的屬性時(shí)需要注意以下幾點(diǎn)：在<td>標(biāo)簽的屬性中，重點(diǎn)掌握colspan和rolspan，其他的屬性了解即可，不建議使用，均可用CSS樣式屬性替代。當(dāng)對(duì)某一個(gè)<td>標(biāo)簽應(yīng)用height屬性設(shè)置高度時(shí)，該行中的所有單元格均會(huì)以設(shè)置的高度顯示。當(dāng)對(duì)某一個(gè)<td>標(biāo)簽應(yīng)用width屬性設(shè)置寬度時(shí)，該列中的所有單元格均會(huì)以設(shè)置的寬度顯示。ABC【任務(wù)5-1】認(rèn)識(shí)表格相關(guān)標(biāo)簽知識(shí)儲(chǔ)備—<th>標(biāo)簽的屬性<th></th