模塊五應(yīng)用表格布局頁面目錄任務(wù)一任務(wù)二任務(wù)三圖書借閱詳情頁面的制作課程表的制作學(xué)院首頁頁面的制作引入知識點任務(wù)1圖書借閱詳情頁面的制作5.1表格的基本結(jié)構(gòu)5.2創(chuàng)建表格5.3表格的其他元素任務(wù)1圖書借閱詳情頁面的制作5.1表格的基本結(jié)構(gòu)表格是由行和列構(gòu)成的，類似于Excel中的表格，每個表格均有若干行，每行均有若干列，行和列交叉所圍起來的區(qū)域稱為單元格，單元格用于存放數(shù)據(jù)，可以存放文本、圖片、水平線、列表、段落、表單、表格等。任務(wù)1圖書借閱詳情頁面的制作5.1表格的基本結(jié)構(gòu)表格的基本結(jié)構(gòu)任務(wù)1圖書借閱詳情頁面的制作5.2創(chuàng)建表格<table><tr><td>...</td><td>...</td></tr><tr><td>...</td><td>...</td></tr>...</table>基本語法格式表格一般由table元素及一個或者多個tr、td元素組成，tr代表表格的行，td代表表格的單元格。任務(wù)1圖書借閱詳情頁面的制作5.2創(chuàng)建表格1、table元素able元素用來在HTML文件中插入一個表格，它是一對雙標(biāo)簽，有開始也有結(jié)束，<table>標(biāo)記代表表格的開始，</table>標(biāo)記代表表格的結(jié)束，在開始和結(jié)束標(biāo)記之間的所有內(nèi)容都屬于這個表格。任務(wù)1圖書借閱詳情頁面的制作5.2創(chuàng)建表格table元素的常用屬性任務(wù)1圖書借閱詳情頁面的制作5.2創(chuàng)建表格2、tr元素在表格里定義一行，由tr元素來完成。表行以<tr>標(biāo)記作為開始，以</tr>標(biāo)記作為結(jié)束。在設(shè)置表格的整體屬性之后，還可以單獨對表格中的某一行進(jìn)行屬性設(shè)置。任務(wù)1圖書借閱詳情頁面的制作5.2創(chuàng)建表格tr元素的常用屬性任務(wù)1圖書借閱詳情頁面的制作5.2創(chuàng)建表格3、td元素表格中的每一行都由若干個單元格組成，單元格由td元素來定義，單元格中的數(shù)據(jù)存放在開始標(biāo)記<td>和結(jié)束標(biāo)記</td>之間。任務(wù)1圖書借閱詳情頁面的制作5.2創(chuàng)建表格td元素的常用屬性任務(wù)1圖書借閱詳情頁面的制作5.3表格的其他元素1、表頭元素th表頭單元格由th元素來定義，<th>標(biāo)記也是一對雙標(biāo)記，表頭的內(nèi)容置于開始標(biāo)記<th>和結(jié)束標(biāo)記</th>之間。常見的表頭分為垂直和水平兩種，一般用在表格的第一行或者第一列。表頭單元格是特殊的單元格，表頭中的內(nèi)容通常會呈現(xiàn)為居中和加粗的樣式。<th>表頭內(nèi)容</th>任務(wù)1圖書借閱詳情頁面的制作5.3表格的其他元素2、表格標(biāo)題元素caption表格標(biāo)題由caption元素來定義。表格的標(biāo)題一般位于整個表格的第一行，默認(rèn)居中顯示。<caption>標(biāo)題內(nèi)容</caption>任務(wù)1圖書借閱詳情頁面的制作5.3表格的其他元素3、表格的結(jié)構(gòu)標(biāo)記從表格的結(jié)構(gòu)來看，可以把表格劃分為表頭、主體和腳注三部分。在HTML文檔中，規(guī)定使用<thead>標(biāo)記表示表頭，<tbody>標(biāo)記表示主體，<tfoot>標(biāo)記表示腳注。<table><thead> …</thead><tfoot>…</tfoot><tbody>…</tbody></table>任務(wù)1圖書借閱詳情頁面的制作任務(wù)實現(xiàn)（1）創(chuàng)建一個HTML5頁面，用于顯示圖書借閱詳情表；（2）創(chuàng)建表格，用于存放圖書借閱信息圖書借閱詳情引入知識點任務(wù)2課程表的制作5.4

跨行跨列設(shè)置5.5背景顏色設(shè)置任務(wù)2課程表的制作5.4跨行跨列設(shè)置單元格的合并分為兩種，一種是水平方向的合并，另一種是垂直方向的合并，而這兩種合并方式只需要對td元素或者th元素中的colspan和rowspan兩個屬性進(jìn)行設(shè)置即可。任務(wù)2課程表的制作5.4跨行跨列設(shè)置1、colspan屬性colspan屬性表示的是單元格在水平方向上合并，語法格式如下：<tdcolspan="數(shù)值">單元格內(nèi)容</td>任務(wù)2課程表的制作5.4跨行跨列設(shè)置2、rowspan屬性rowspan屬性表示的是單元格在垂直方向上合并，語法格式如下：<tdrowspan="數(shù)值">單元格內(nèi)容</td>任務(wù)2課程表的制作5.5背景顏色設(shè)置1、整個表格的背景顏色進(jìn)行設(shè)置<tablebgcolor="顏色值">2、某行的背景顏色進(jìn)行設(shè)置<trbgcolor="顏色值">3、某個單元格的背景顏色進(jìn)行設(shè)置<tdbgcolor="顏色值">任務(wù)實現(xiàn)（1）創(chuàng)建一個HTML5頁面，進(jìn)行課程表的制作；（3）在對應(yīng)單元格中填入數(shù)據(jù)；（2）分析表格的結(jié)構(gòu)并給出結(jié)構(gòu)代碼的設(shè)計；任務(wù)2課程表的制作（4）對表格結(jié)構(gòu)進(jìn)行調(diào)整。任務(wù)2課程表的制作引入知識點任務(wù)3學(xué)院首頁頁面的制作5.6對齊方式的設(shè)置5.7寬度、高度的設(shè)置5.8背景圖片的設(shè)置任務(wù)3學(xué)院首頁頁面的制作5.6對齊方式的設(shè)置1、設(shè)置表格的對齊方式<tablealign="對齊方式">設(shè)置整個表格在頁面中的對齊方式，其中，對齊方式的取值為left、center或right。任務(wù)3學(xué)院首頁頁面的制作5.6對齊方式的設(shè)置2、設(shè)置行的對齊方式行的對齊方式分為水平方向上的對齊和垂直方向上的對齊，由align屬性控制水平方向上的對齊，valign屬性控制垂直方向上的對齊。<tralign="對齊方式">其中，對齊方式取值為left、center或right。<trvalign="對齊方式">其中，對齊方式取值為top、middle或bottom。任務(wù)3學(xué)院首頁頁面的制作5.7寬度、高度的設(shè)置寬度、高度的設(shè)置分別使用的是width屬性和height屬性，這兩個屬性屬于公用屬性，前面已經(jīng)介紹過，這里不再贅述。任務(wù)3學(xué)院首頁頁面的制作5.8背景圖片的設(shè)置1、對整個表格設(shè)置背景圖片<tablebackground="圖片的地址">2、對某個單元格設(shè)置背景圖片<tdbackground=