表格和列表第二章本章單詞table （表格，目錄)border （邊，邊界，邊框）caption （解說(shuō)詞，標(biāo)題）cell （細(xì)胞，組成單元）width （寬度）align （對(duì)齊）vertical （垂直的）row （排，行）collumn （柱，列）item （一個(gè)物品，一個(gè)條款，條目，項(xiàng)目）預(yù)習(xí)檢查3預(yù)習(xí)檢查為表格設(shè)置()屬性可以控制表格中相鄰單元格的間距，設(shè)置()屬性可以控制表格中單元格的內(nèi)容與其邊界的間隙。width cellspacingcellspacing widthcellspacing cellpaddingcellpadding cellspaing使用()標(biāo)簽為表格創(chuàng)建標(biāo)題，使用()標(biāo)簽代替<td></td>標(biāo)簽可以創(chuàng)建標(biāo)題單元格。<th></th> <caption></caption><caption></caption> <tr></tr><title></title> <th></th><caption></caption> <th></th>

預(yù)習(xí)檢查為單元格標(biāo)簽設(shè)置()屬性可實(shí)現(xiàn)跨行合并，設(shè)置()屬性可實(shí)現(xiàn)跨列合并。rowCells colCellscellRow cellColrows colsrowspan colspan要顯示乘314路公交車從汽車西站到五一廣場(chǎng)途中經(jīng)過(guò)的公交站點(diǎn)，并在每個(gè)公交站點(diǎn)名稱前用數(shù)字表示途經(jīng)的先后順序，應(yīng)使用()標(biāo)簽和它內(nèi)部的()標(biāo)簽。<li></li> <list></list><list></list> <item></item><ul></ul> <li></li><ol></ol> <li></li>預(yù)習(xí)檢查<ul></ul>標(biāo)簽顯示時(shí)，它內(nèi)部的列表項(xiàng)目前面默認(rèn)顯示的符號(hào)是()。阿拉伯?dāng)?shù)字英文字母實(shí)心圓點(diǎn)空心圓圈本章目標(biāo)理解表格的結(jié)構(gòu)掌握表格相關(guān)的標(biāo)簽掌握單元格合并理解列表的分類掌握兩種列表及列表項(xiàng)目的標(biāo)簽網(wǎng)頁(yè)中使用表格與表格相關(guān)的一組標(biāo)簽<table> <tr> <td>排名</td> <td>歌曲</td> <td>歌手</td> </tr> <tr> <td>1</td> <td>灰色的彩虹</td> <td>范瑋琪</td> </tr> ……</table>演示例2-1table的屬性屬性意義border設(shè)置表格邊框的寬度，默認(rèn)無(wú)邊框。width設(shè)置表格的寬度，可用px像素單位，或%百分比。cellspacing設(shè)置表格中相鄰單元格之間的距離。cellpadding設(shè)置表格中每個(gè)單元格的內(nèi)容與單元格邊界的距離。<tableborder="1"width="280px"cellspacing="5px"cellpadding="12px">演示例2-2表格標(biāo)題和標(biāo)題單元格<tableborder="1"width="80%">

<caption>XX公司八月份工資表</caption> <tr>

<th>姓名</th> <th>基本工資</th> <th>崗位工資</th> <th>補(bǔ)貼</th> <th>應(yīng)發(fā)工資</th> </tr> <tr>

<th>ximosu</th> <td>1000</td> <td>2000</td> <td>200</td> <td>3200</td> </tr> …… </table>演示例2-3單元格合并

<tr> <throwspan="2">部門(mén)</th> <throwspan="2">姓名</th> <thcolspan="2">工資</th> <thcolspan="2">補(bǔ)貼</th> <throwspan="2">應(yīng)發(fā)工資</th></tr>

<tr> <th>基本工資</th> <th>崗位工資</th> <th>午餐補(bǔ)助</th> <th>高溫補(bǔ)助</th></tr><tr> <throwspan="2">研發(fā)部</th> <th>ximosu</th> <td>1000</td> <td>2000</td> <td>200</td> <td>100</td> <td>3300</td></tr>演示例2-4th、td的屬性

屬性意義colspan單元格跨列合并后，占據(jù)的列數(shù)。rowspan單元格跨行合并后，占據(jù)的行數(shù)。align單元格內(nèi)部的內(nèi)容的水平對(duì)齊方式，值可為left、center、right、justify，在<td></td>標(biāo)簽內(nèi)此屬性默認(rèn)為left，在<th></th>標(biāo)簽內(nèi)默認(rèn)為centervalign單元格內(nèi)部的內(nèi)容的垂直對(duì)齊方式，值可為top、middle、bottom、baseline，默認(rèn)為middle。單元格內(nèi)容的對(duì)齊方式<tableborder="1"width="250px"> <tr> <tdrowspan="2"valign="top">單元格</td> <tdalign="center">單元格</td> <tdalign="right">單元格</td> </tr> <tr> <tdcolspan="2">單元格</td> </tr></table>演示例2-51、2、

小結(jié)1列表

一組邏輯上相關(guān)而且級(jí)別相同的段落，描述一個(gè)事物的不同方面或一件事情的幾個(gè)步驟。使用列表來(lái)組織這些項(xiàng)目，可以使網(wǎng)頁(yè)的結(jié)構(gòu)更加清晰。有序列表，包含一組需要強(qiáng)調(diào)先后順序的項(xiàng)目，如旅行社某天的日程；無(wú)序列表，包含一組不需強(qiáng)調(diào)先后順序的項(xiàng)目，如課程體系包含的若干科目。有序列表使用<ol></ol>可以創(chuàng)建有序列表，它包含的列表項(xiàng)目使用<li></li>創(chuàng)建演示例2-6<p>XX公司三亞之旅第一天行程</p><ol> <li>07:00之前在新大新廣場(chǎng)前集合</li> <li>07:15乘坐機(jī)場(chǎng)大巴前往黃花機(jī)場(chǎng)</li> <li>08:30集體辦理登機(jī)手續(xù)</li> <li>09:15乘機(jī)飛往三亞</li> <li>11:00抵達(dá)三亞機(jī)場(chǎng)</li> <li>11:30由地接大巴送到旅社</li> <li>12:30集體吃海鮮自助餐</li> <li>下午自由活動(dòng)</li></ol>無(wú)序列表使用<ul></ul>可以創(chuàng)建無(wú)序列表，它包含的列表項(xiàng)目使用<li></li>創(chuàng)建。演示例2-7<p>海鮮自助餐重點(diǎn)推薦</p><ul> <li>口味大肉蟹</li> <li>鹽焗瀨尿蝦</li> <li>蒜蓉清蒸小