網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目式教程（HTML+CSS）課件08.制作“詩(shī)人簡(jiǎn)歷”模塊

網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目式教程（HTML+CSS）功能模塊類網(wǎng)站開發(fā)項(xiàng)目——“古詩(shī)詞”網(wǎng)站頁(yè)面模塊的實(shí)現(xiàn)項(xiàng)目實(shí)施任務(wù)分析社團(tuán)負(fù)責(zé)人希望小丁能設(shè)計(jì)一個(gè)“詩(shī)人簡(jiǎn)歷”模塊，通過簡(jiǎn)歷，用戶可以了解詩(shī)人的作品風(fēng)格、代表作品等詳細(xì)信息。任務(wù)3.4制作“詩(shī)人簡(jiǎn)歷”模塊項(xiàng)目實(shí)施任務(wù)分析任務(wù)3.4制作“詩(shī)人簡(jiǎn)歷”模塊“詩(shī)人簡(jiǎn)歷”模塊框架結(jié)構(gòu)知識(shí)儲(chǔ)備知識(shí)導(dǎo)圖完成本任務(wù)還需要學(xué)習(xí)的主要知識(shí)點(diǎn)有表格的基本結(jié)構(gòu)，合并單元格以及表格的CSS樣式設(shè)置，知識(shí)導(dǎo)圖如圖所示。任務(wù)3.4制作“詩(shī)人簡(jiǎn)歷”模塊知識(shí)儲(chǔ)備新知學(xué)習(xí)1：表格元素表格元素是一種用于展示結(jié)構(gòu)化數(shù)據(jù)的標(biāo)記語言元素，在網(wǎng)頁(yè)設(shè)計(jì)中用得很多，使用表格可以更清晰地展示數(shù)據(jù)。任務(wù)3.4制作“詩(shī)人簡(jiǎn)歷”模塊知識(shí)儲(chǔ)備1．表格的基本結(jié)構(gòu)表格元素由<table>標(biāo)簽來定?義。行：<tr>單元格：<td>表格標(biāo)題：<caption>表頭：<th>邊框：border空間屬性：cellspacing和cellpadding任務(wù)3.4制作“詩(shī)人簡(jiǎn)歷”模塊新知學(xué)習(xí)1：表格元素知識(shí)儲(chǔ)備

<tableborder="1"cellspacing="0"cellpadding="0"><caption>傳統(tǒng)漢文學(xué)</caption><tr><td>詩(shī)</td><td>詞</td></tr><tr><td>歌</td><td>賦</td></tr></table>任務(wù)3.4制作“詩(shī)人簡(jiǎn)歷”模塊新知學(xué)習(xí)1：表格元素知識(shí)儲(chǔ)備2．合并行rowspan在設(shè)計(jì)表格時(shí)，有時(shí)候需要將兩個(gè)或者更多的相鄰單元格組合成一個(gè)單元格，類似于Excel中的“合并單元格”。在HTML中，需要用到“合并行”和“合并列”。我們先來學(xué)習(xí)合并行rowspan屬?性。語法：<tdrowspan="跨度的行數(shù)">任務(wù)3.4制作“詩(shī)人簡(jiǎn)歷”模塊新知學(xué)習(xí)1：表格元素知識(shí)儲(chǔ)備<table><caption>傳統(tǒng)漢文學(xué)</caption><tr><td>詩(shī)</td><tdrowspan="2">詞賦</td><!--合并兩個(gè)單元格--></tr><tr><td>歌</td><!--<td>賦</td>--><!--此單元格已經(jīng)被合并，需刪掉--></tr></table>任務(wù)3.4制作“詩(shī)人簡(jiǎn)歷”模塊新知學(xué)習(xí)1：表格元素知識(shí)儲(chǔ)備3．合并列colspan在HTML中，表格合并列指的是將幾列進(jìn)行合?并。語法：<tdcolspan="跨度的列數(shù)">任務(wù)3.4制作“詩(shī)人簡(jiǎn)歷”模塊新知學(xué)習(xí)1：表格元素知識(shí)儲(chǔ)備1．去除單元格的間距默認(rèn)情況下，表格加入邊框時(shí)單元格與單元格之間存在一定的間距，導(dǎo)致整個(gè)表格看上去不美觀，如圖所?示。任務(wù)3.4制作“詩(shī)人簡(jiǎn)歷”模塊新知學(xué)習(xí)2表格的CSS樣式知識(shí)儲(chǔ)備如果我們要去除單元格的間距，該怎么辦呢？在CSS中，我們可以使用border-collapse屬性值來去除單元格之間的間?距。語法：border-collapse:屬性值;任務(wù)3.4制作“詩(shī)人簡(jiǎn)歷”模塊新知學(xué)習(xí)2表格的CSS樣式

border-collapse屬性值屬性值描述separate默認(rèn)值，邊框分開，不合并collapse邊框合并，如果相鄰，則共用一個(gè)邊框知識(shí)儲(chǔ)備2．定義表格邊框間距在實(shí)際開發(fā)中，有時(shí)候我們需要定義一下表格邊框的間?距。在CSS中，可以使用border-spacing屬性值來定義表格邊框的間?距。語法：border-spacing:像素值；任務(wù)3.4制作“詩(shī)人簡(jiǎn)歷”模塊新知學(xué)習(xí)2表格的CSS樣式小結(jié)延伸任務(wù)小結(jié)本任務(wù)圍繞“詩(shī)人簡(jiǎn)歷”模塊的制作，分析了頁(yè)面的結(jié)構(gòu)要素，介紹了表格元素及表格的CSS樣式設(shè)置，綜合應(yīng)用完成了該功