任務(wù)7制作學(xué)生信息表

任

務(wù)

描

述任務(wù)7制作學(xué)生信息表表格是HTML網(wǎng)頁的重要元素，利用表格可以有條理地顯示網(wǎng)頁內(nèi)容。本任務(wù)制作一個(gè)學(xué)生信息表，顯示學(xué)生的姓名、性別、年齡、班級(jí)等信息，并使用CSS定義表格的樣式。通過本任務(wù)的實(shí)現(xiàn)，掌握表格的創(chuàng)建和樣式設(shè)置方法，能輕松制作網(wǎng)頁中類似的表格。任務(wù)效果制作學(xué)生信息表，瀏覽效果如下圖所示。（1）創(chuàng)建一個(gè)8行7列的表格。（2）設(shè)置表格標(biāo)題——學(xué)生信息表。（3）在表格標(biāo)記中添加相應(yīng)的文本內(nèi)容，并用<th>標(biāo)記為表格設(shè)置表頭。（4）通過CSS控制表格的樣式。（5）鼠標(biāo)指針移動(dòng)到表格行時(shí)高亮（黃色）顯示該數(shù)據(jù)行。任務(wù)效果要求如下。知識(shí)點(diǎn)表格基本標(biāo)記01

合并單元格02

表格的CSS樣式設(shè)置03知

識(shí)

準(zhǔn)

備任務(wù)7制作學(xué)生信息表7.2.1表格標(biāo)記早期的網(wǎng)頁版面采用表格進(jìn)行布局，隨著網(wǎng)頁技術(shù)的發(fā)展，現(xiàn)在的網(wǎng)頁版面一般采用HTML5+CSS3布局。但網(wǎng)頁上的一些內(nèi)容，如通訊錄、學(xué)生信息表、課程表等，采用表格仍然可以較好地呈現(xiàn)。7.2.1表格標(biāo)記example01.html（1）<table></table>。用于定義一個(gè)表格（2）<tr></tr>。用于定義表格的一行（3）<th></th>。用于定義表頭的單元格，該單元格中的文字會(huì)被自動(dòng)設(shè)為粗體，文字在單元格中居中對(duì)齊顯示（4）<td></td>。用于定義表格的普通單元格，該單元格中的文字會(huì)被自動(dòng)設(shè)為左對(duì)齊顯示表格標(biāo)記7.2.1表格標(biāo)記7.2.2合并單元格可以給單元格標(biāo)記<td>或<th>添加colspan或rowspan屬性合并單元格。7.2.2合并單元格如果要將表格的列合并，也就是讓同一行不同列的單元格合并為一個(gè)單元格，那么要找到被合并的幾個(gè)單元格中處于最左側(cè)的那個(gè)單元格，給它加上colspan屬性，其他被合并的單元格的標(biāo)記要?jiǎng)h除。7.2.2合并單元格如果要將表格的行合并，也就是讓同一列不同行的單元格合并為一個(gè)單元格，那么要找到被合并的幾個(gè)單元格中處于最上面的那個(gè)單元格，給它加上rowspan屬性，其他被合并的單元格的標(biāo)記要?jiǎng)h除。7.2.2合并單元格example02.html使用css定義表格樣式表格常用的CSS樣式屬性如下表所示。7.2.2合并單元格使用css定義表格樣式example03.html7.2.2合并單元格任

務(wù)

實(shí)

現(xiàn)任務(wù)7制作學(xué)生信息表7.3.1搭建學(xué)生信息表結(jié)構(gòu)本節(jié)使用前面所學(xué)的表格標(biāo)記構(gòu)建學(xué)生信息表的結(jié)構(gòu)，并使用CSS定義表格樣式。7.3.1搭建學(xué)生信息表結(jié)構(gòu)7.3.1搭建學(xué)生信息表結(jié)構(gòu)瀏覽網(wǎng)頁，效果如下圖所示。7.3.2定義學(xué)生信息表CSS樣式任

務(wù)

小

結(jié)任務(wù)7制作學(xué)生信息表任務(wù)小結(jié)本任務(wù)圍繞學(xué)生信息表的制作，介紹了