任務7制作學生信息表

任

務

描

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

合并單元格02

表格的CSS樣式設置03知

識

準

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

務

實

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

務

小

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