第二章表格與列表

第二章表格與列表本章目標(biāo)了解表格的結(jié)構(gòu)掌握表格相關(guān)的標(biāo)簽掌握單元格合并了解列表的分類掌握列表及列表項(xiàng)目的標(biāo)簽表格表格的結(jié)構(gòu)一個(gè)完整的表格從<table>標(biāo)簽開(kāi)始，結(jié)束于</table>。要表示表格的一行，應(yīng)在<table></table>內(nèi)部提供<tr></tr>。要表示某一行中的一個(gè)單元格，則應(yīng)在<tr></tr>內(nèi)部提供<td></td>。表格中的具體數(shù)據(jù)被包含在每個(gè)單元格中。表格的結(jié)構(gòu)<table> <tr> <td>排名</td> <td>歌曲</td> <td>歌手</td> </tr> <tr> <td>1</td> <td>灰色的彩虹</td> <td>范瑋琪</td> </tr> <tr> <td>2</td> <td>非常完美</td> <td>張韶涵</td> </tr> ……</table>表格的屬性屬性意義border設(shè)置表格邊框的寬度，默認(rèn)無(wú)邊框。width設(shè)置表格的寬度，可用px像素單位，或%百分比。cellspacing設(shè)置表格中相鄰單元格之間的距離。cellpadding設(shè)置表格中每個(gè)單元格的內(nèi)容與單元格邊界的距離。表格的屬性<tableborder="1"width="280px"cellspacing="5px“cellpadding="12px">表格標(biāo)題和標(biāo)題單元格可以在<table></table>標(biāo)簽內(nèi)第一行之前編寫<caption></caption>標(biāo)簽，創(chuàng)建表格的標(biāo)題，以描述整個(gè)表格的作用或意義。使用<th></th>標(biāo)題單元格標(biāo)簽代替<td></td>普通數(shù)據(jù)單元格標(biāo)簽，這些特殊的單元格一般要求突出顯示。通常，表格第一行的一系列單元格應(yīng)視為列標(biāo)題，而表格第一列的一系列單元格應(yīng)視為行標(biāo)題。表格標(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>洪金寶</th> <td>1000</td> <td>2000</td> <td>200</td> <td>3200</td> </tr> ……</table>單元格合并實(shí)現(xiàn)一些復(fù)雜的表格結(jié)構(gòu)時(shí)，可能需要將相鄰的幾個(gè)單元格合并成為一個(gè)。使用<td></td>或<th></th>標(biāo)簽的colsapn及rowspan屬性可以設(shè)置單元格合并。單元格合并<tableborder="1"width="100%"> <caption>XX公司八月份工資表</caption> <tr> <throwspan="2">部門</th> <throwspan="2">姓名</th> <thcolspan="2">工資</th> <thcolspan="2">補(bǔ)貼</th> <throwspan="2">應(yīng)發(fā)工資</th> </tr> ...... <tr> <tdrowspan="2">開(kāi)發(fā)部</td> <td>金潔</td><td>1000</td><td>1000</td> <td>200</td><td>200</td> <td>2400</td> </tr> </table>單元格的屬性屬性意義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)為center。valign單元格內(nèi)部的內(nèi)容的垂直對(duì)齊方式，值可為top,middle,bottom,baseline，默認(rèn)為middle。單元格對(duì)齊方式<tableborder="1"width="250px"> <tr> <tdrowspan="2"valign="top">單元格</td> <tdalign="center">單元格</td> <tdalign="right">單元格</td> </tr> <tr> <tdcolspan="2">單元格</td> </tr></table>列表一組邏輯上相關(guān)而且級(jí)別相同的段落，用于描述一個(gè)事物的不同方面或一件事情的幾個(gè)步驟。使用列表來(lái)組織這些項(xiàng)目，可以使網(wǎng)頁(yè)的結(jié)構(gòu)更加清晰。有序列表無(wú)序列表有序列表使用<ol></ol>可以創(chuàng)建有序列表，它包含的列表項(xiàng)目使用<li></li>創(chuàng)建。<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)建。<p>海鮮自助餐重點(diǎn)推薦</p><ul> <li>口味大肉蟹</li> <li>鹽焗瀨尿蝦</li> <li>蒜蓉清蒸小鮑</li> <li>辣椒炒海瓜子</li> <li>哈貝冬瓜湯</li></ul>總結(jié)使用<table></table>標(biāo)簽可以創(chuàng)建表格。使用<tr></tr>標(biāo)簽可以為表格創(chuàng)建行。使用<td></td>標(biāo)簽可以為表格的行創(chuàng)建數(shù)據(jù)單元格。使用<th></th>標(biāo)簽可以為表格的首行或首列創(chuàng)建標(biāo)題單元格。表格的數(shù)據(jù)放置在單元格標(biāo)簽中。使用