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

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

table元素以及一個或多個

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

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

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

有序列表有序列表也是一列項目，列表項目使用數(shù)字進行標記。有序列表始于<ol>標簽。每個列表項始于<li>標簽。語法：<oltype=編號類型start=value><li>第一項</li><li>第二項</li><li>第三項</li></ol>舉例演示type類型描述type=1表示列表項目用數(shù)字標號（1,2,3…）type=A表示列表項目用大寫字母標號（A,B,C…）type=a表示列表項目用小寫字母標號（a,b,c…）type=Ⅰ表示列表項目用大寫羅馬數(shù)字標號（Ⅰ,Ⅱ,Ⅲ…）type=ⅰ表示列表項目用小寫羅馬數(shù)字標號（ⅰ,ⅱ,ⅲ…）3.嵌套列表有序列表和無序列表的使用格式基本相同。舉例：<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>標簽定義了定義列表（definitionlist），定義列表多用于對術語或名詞的描述，同時，定義列表項前面無任何項目符號。<dl>標簽用于結合

<dt>

（定義列表中的項目）

<dd>

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