Web前端技術(shù)開(kāi)發(fā)（HTML5+CSS3+JavaScript）課件 第三單元 表格的應(yīng)用

Web前端開(kāi)發(fā)技術(shù)第三單元表格的應(yīng)用掌握表格的概念和使用設(shè)置表格標(biāo)記屬性插入表格及設(shè)置屬性表格的行和單元格表格嵌套3.1創(chuàng)建表格3.2表格的基本屬性3.3跨行和跨列的操作3.4表格嵌套創(chuàng)建表格13.1.1表格的基本構(gòu)成表格的基本結(jié)構(gòu)：

表格的基本結(jié)構(gòu)由行和列組成，順序是先行后列，即先定義表格中有多少行，再定義每行上有多少列（或稱單元格），形成標(biāo)記間的嵌套關(guān)系?；菊Z(yǔ)法：3.1.2設(shè)置表格的標(biāo)題基本語(yǔ)法：語(yǔ)法說(shuō)明：

在HTML文件中，使用成對(duì)<caption></caption>標(biāo)記給表格插入標(biāo)題。3.1.3表頭

一般表格會(huì)有列名稱和數(shù)據(jù)這兩部分，列名稱作為表格的第一行，稱為表頭?；菊Z(yǔ)法：語(yǔ)法說(shuō)明：

在HTML文檔中，<th></th>標(biāo)記定義表頭，放置在行標(biāo)記<tr>中，與<td>標(biāo)記一樣定義單元格標(biāo)記，但是該標(biāo)記帶有居中加粗的樣式。表格基本屬性23.2.1設(shè)置表格邊框樣式

表格<table>標(biāo)記中可以通過(guò)border屬性和bordercolor屬性設(shè)置表格邊框的樣式。基本說(shuō)明：語(yǔ)法說(shuō)明：border屬性用于設(shè)置表格邊框的粗細(xì)。取>=0的整數(shù)。當(dāng)border屬性設(shè)置為零時(shí)表示不顯示邊框，數(shù)值越大邊框越粗；bordercolor屬性設(shè)置表格邊框的顏色。bordercolor屬性只有在border屬性的值不為零時(shí)才有效果。3.2.2設(shè)置寬度和高度

width屬性和height屬性分別設(shè)置表格的寬度和高度，也可以設(shè)置行和單元格寬度和高度，將這兩個(gè)屬性分別設(shè)置在標(biāo)記<table>、<tr>和<td>中?；菊Z(yǔ)法：語(yǔ)法說(shuō)明：

表示寬度和高度的值一般有兩種方法，第一種，用數(shù)值表示，正整數(shù)；第二種，用百分比來(lái)表示，相對(duì)于設(shè)置該屬性所在元素的父元素的寬度和高度。注意：如果沒(méi)有對(duì)width屬性和height屬性進(jìn)行設(shè)置，表格寬度和高度會(huì)自適應(yīng)表格內(nèi)容的寬度和高度。3.2.3設(shè)置對(duì)齊方式對(duì)齊方式：

對(duì)齊方式分為水平方向?qū)R和垂直方向?qū)R水平對(duì)齊：

align屬性設(shè)置水平方向上的對(duì)齊，該屬性有4個(gè)值可選。3.2.3設(shè)置對(duì)齊方式垂直對(duì)齊：valign屬性設(shè)置水平方向上的對(duì)齊，該屬性有4個(gè)值可選。不同標(biāo)記中的對(duì)齊方式：3.2.4邊距與填充

表格中有兩種留白，分別為邊距(cellspacing)和填充(cellpadding)?；菊Z(yǔ)法：語(yǔ)法說(shuō)明：cellspacing屬性用于設(shè)置表格內(nèi)外邊框線的距離，該屬性的默認(rèn)值一般不為零；cellpadding屬性設(shè)置表格單元格中內(nèi)容與邊框之間的間距，默認(rèn)值為零。3.2.5背景色設(shè)置

在表格中設(shè)置背景顏色可以使用bgcolor屬性，<table>、<tr>和<td>標(biāo)記都可以設(shè)置bgcolor屬性，分別表示給整個(gè)表格、表格中的一行、某個(gè)單元格設(shè)置背景色?；菊Z(yǔ)法：語(yǔ)法說(shuō)明：

表示顏色的三種方法已經(jīng)在3.2.1中詳細(xì)描述，在此不再累述?？缧泻涂缌胁僮?3.3.1跨列操作

單元格跨列操作，通過(guò)設(shè)置單元格<td>標(biāo)記中的colspan屬性來(lái)實(shí)現(xiàn)?；菊Z(yǔ)法：語(yǔ)法說(shuō)明：colspan屬性定義橫跨單元格的列數(shù)。3.3.2跨行操作

單元格跨行操作，通過(guò)設(shè)置單元格<td>標(biāo)記中的rowspan屬性來(lái)實(shí)現(xiàn)?；菊Z(yǔ)法：語(yǔ)法說(shuō)明：rowspan屬性定義豎跨單元格的行數(shù)。

表格嵌套42.4添加段