《網(wǎng)頁設(shè)計》課件-2-4表格與列表

表格與列表目錄◎表格標(biāo)簽◎列表標(biāo)簽1表格標(biāo)簽1.表格的定義與屬性table就是用來展示數(shù)據(jù)顯示。HTML表格通過<table>標(biāo)簽來定義。簡單的HTML表格由

table元素以及一個或多個

tr、th或td元素組成。tr元素定義表格行，th

元素定義表頭，td元素定義表格單元。舉例：<table><tr><td></td><td></td><td></td></tr></table>HTML表格也可能包括caption、thead、tbody以及tfoot等元素。<caption>標(biāo)簽定義表格的標(biāo)題。<thead>標(biāo)簽定義表格的表頭。該標(biāo)簽用于組合HTML表格的表頭內(nèi)容。<thead>元素應(yīng)該與<tbody>

和<tfoot>元素結(jié)合起來使用。<tbody>標(biāo)簽用于對HTML表格中的主體內(nèi)容進(jìn)行分組。<tfoot>標(biāo)簽用于對HTML表格中的表注（頁腳）內(nèi)容進(jìn)行分組。1表格標(biāo)簽1表格標(biāo)簽表格標(biāo)簽<table>有很多屬性，最常用的屬性。屬性描述width/height表格的寬度（高度），值可以是數(shù)字或百分比，數(shù)字表示表格寬度（高度）所占的像素點(diǎn)數(shù)，百分比是表格的寬度（高度）占瀏覽器寬度（高度）的百分比align表格相對周圍元素的對齊方式background表格的背景圖片bgcolor表格的背景顏色，不贊成使用，后期通過樣式控制背景顏色border表格邊框的寬度（以像素為單位）bordercolor表格邊框顏色cellspacing單元格之間的間距cellpadding單元格內(nèi)容與單元格邊界之間的空白距離的大小舉例演示1表格標(biāo)簽當(dāng)表格設(shè)置border時，可以表格的邊框包括上邊框、下邊框、左邊框、右邊框。這四個邊框都可以設(shè)置為顯示或隱藏狀態(tài)。frame的值描述frame的值描述box顯示整個表格邊框alove只顯示表格的上邊框void不顯示表格邊框below只顯示表格的下邊框hsides只顯示表格的上下邊框lhs只顯示表格的左邊框vsides只顯示表格的左右邊框rhs只顯示表格的右邊框舉例演示舉例演示【實例2-7】表格的使用。2.單元格的設(shè)置數(shù)據(jù)標(biāo)簽<td>的常用屬性屬性描述屬性描述width/height單元格的寬和高，接受絕對值（如80）及相對值（80%），不贊成使用，后期通過樣式控制align單元格內(nèi)容的水平對齊方式，可選值為：left、center、right等colspan規(guī)定單元格可橫跨的列數(shù)valign單元格內(nèi)容的垂直對齊方式，可選值為：top、middle、bottom等rowspan規(guī)定單元格可橫跨的行數(shù)bgcolor單元格的背景顏色舉例演示【實例2-8】跨行或跨列的表格單元格。2列表標(biāo)簽1.無序列表無序列表是一個項目的列表，此列項目使用粗體圓點(diǎn)（典型的小黑圓圈）進(jìn)行標(biāo)記。無序列表始于<ul>標(biāo)簽。每個列表項始于<li>。HTML支持有序、無序和定義列表。語法：<ultype=編號類型><li>第一項</li><li>第二項</li><li>第三項</li></ul>舉例演示type決定列表的圖標(biāo)類型disc表示實心圓circle表示空心圓square表示小方塊默認(rèn)情況下為實心圓2.

有序列表有序列表也是一列項目，列表項目使用數(shù)字進(jìn)行標(biāo)記。有序列表始于<ol>標(biāo)簽。每個列表項始于<li>標(biāo)簽。語法：<oltype=編號類型start=value><li>第一項</li><li>第二項</li><li>第三項</li></ol>舉例演示type類型描述type=1表示列表項目用數(shù)字標(biāo)號（1,2,3…）type=A表示列表項目用大寫字母標(biāo)號（A,B,C…）type=a表示列表項目用小寫字母標(biāo)號（a,b,c…）type=Ⅰ表示列表項目用大寫羅馬數(shù)字標(biāo)號（Ⅰ,Ⅱ,Ⅲ…）type=ⅰ表示列表項目用小寫羅馬數(shù)字標(biāo)號（ⅰ,ⅱ,?！?.嵌套列表有序列表和無序列表的使用格式基本相同。舉例：<ultype="circle"><li>北京</li><li>上海</li><oltype="1"start="6"reversed="reversed"> <li>浦東新區(qū)</li> <li>徐匯區(qū)</li> <li>長寧區(qū)</li> <li>普陀區(qū)</li></ol><li>廣州</li><li>深圳</li></ul>舉例演示4.定義列表使用<dl>標(biāo)簽定義了定義列表（definitionlist），定義列表多用于對術(shù)語或名詞的描述，同時，定義列表項前面無任何項目符號。<dl>標(biāo)簽用于結(jié)合

<dt>

（定義列表中的項目）

<dd>

（描述列表中的項目）舉例：<dl><dt>第1項</dt><dd>注釋1<