【正文】 ef屬性類似。 ?shape屬性 area標記的 shape屬性用于標出圖像映射區(qū)域中的映射區(qū)域的形狀。 Shape屬性的取值可以是： rect（矩形）、 circle（圓形）、 poly（多邊形）和 default（整個圖像區(qū)域）。 ?coords屬性 area標記的 coords屬性用于標識圖像映射中的區(qū)域邊界。對于矩形而言， coords有 4個值，分別用逗號隔開，表示矩形區(qū)域的左上角 x坐標、左上角 y坐標、右下角 x坐標和右下角y坐標； ?對于圓形而言， coords有三個值，分別表示圓心的 x坐標、 y坐標以及圓的半徑值；而對于多邊形而言，則 coords有多個值分別表示個頂點的坐標值。例如，以下 html語句標記出了一個包含三個映射區(qū)域的圖像映射： ?map name=mymap area href= shape=rect coords=1,1,20,20 area href= shape=circle coords=1,1,20 area href= shape=poly coords=250,200,300,250,200,250 /map 在本實例中定義了兩個“矩形”的映射區(qū)域。 4．對映射區(qū)域進行引用 標記了映射區(qū)域之后，就可以通過在 img標記中使用 usemap屬性來引用相應的映射信息，此時將usemap的屬性值設定為等于 map標記中的那么屬性值，注意與錨點超鏈接相似，引用映射名稱時也要用＃號。在本實例中我們引用圖像映射的代碼如下： ?pimg src=清華 .jpg width=250 height=300 usemap=mymap/p ?提示：以上制作圖像映射的方法在實際網(wǎng)頁制作中使用的非常少（本實例只是為了說明其基本原理），絕大多數(shù)情況下都是直接使用所見即所得的網(wǎng)頁制作工具制作圖像映射，相關工具參閱技術資料。 表格 ?實例 812 表格的基本結構 ?實例 813 設臵表和單元格的屬性 ?實例 814 表格嵌套 實例 812 表格的基本結構 一、學習目標 ?了解表格的基本結構 ?掌握如何創(chuàng)建表格 ?掌握表格邊框設臵 ?掌握表格有關標記的屬性設臵 表頭 內(nèi)容 標題 邊框 822 表格的基本結構 二、實例結果，如圖所示 ?過程與步驟： 1．通過依次單擊任務欄上的 【 開始 】 → 【 程序 】 → 【 附件 】→ 【 記事本 】 菜單命令打開記事本 2．在記事本的編輯面板中輸入以下代碼，創(chuàng)建一個簡單的季度報表，同時模擬兩行數(shù)據(jù)： html headtitle表格的使用舉例 /title/head body table border=2 align=center !表格標題 caption季度報表 /caption !—表頭 th一月 /th th二月 /th th三月 /th th四月 /th th五月 /th th六月 /th !第一行數(shù)據(jù) tr td100/td td200/td td500/td td200/td td300/td td700/td /tr !//第二行數(shù)據(jù) tr td100/td td200/td td500/td td200/td td300/td td700/td tr /table/body/html 。 822所示。 三、涵蓋的知識點 1．表格的基本結構 ?table.../table 定義表格 ?caption.../caption 定義標題 ?tr 定義表行 ?th 定義表頭 ?td 定義表元 (表格的具體內(nèi)容 ) 2．標記說明 ?table標記可用來在 html文檔中創(chuàng)建表。 table標記的屬性應用于本身，而不會應用于表中顯示的數(shù)據(jù)，如表的寬度、高度，邊框?qū)挾取⒈淼谋尘吧葘傩?。表的基本單位是單元格，單元格是使?td標記定義的。表中的行使用 tr標記定義，單元格構成行，行構成表，也就是說td標記是嵌套 ?在 tr標記內(nèi)； tr標記位于 table標記和/table標記內(nèi)。 Border屬性用于設臵表格的邊框的寬度。如果將該值設臵為零（ 0），則不顯示邊框。 ?對于表中的每一列，可以指定一個標題。使用 th標記可以達到此目的。例如， th一月 /th ?caption標記用于添加表的標題，也就是表的說明。如： caption季度報表 /caption ?表格標題的位臵，可由 align屬性來設臵，其位臵分別由表格上方和表格下方。下面為表格標題位臵的設臵格式，缺省設臵為上方。 設臵標題位于表格上方： caption align=top ... /caption 例如 ： table border=2 caption align=top旅游日程 /caption tr th日期 /thtd911/tdtd1113/tdtd1814/td /tr tr th旅游地點 /thtd青島 /tdtd黃山 /tdtd杭州 /td /tr /table ?顯示結果： ?旅游日程 ?設臵標題位于表格下方： caption align=bottom ... /caption ?例如 ： table border＝ 2 caption align=bottom旅游日程 /caption 日期 911 1113 1814 旅游地點 青島 黃山 杭州 tr th日期 /thtd911/tdtd1113/tdtd1814/td /tr tr th旅游地點 /thtd青島 /tdtd黃山/tdtd杭州 /td /tr /table 顯示結果： 日期 911 1113 1814 旅游地點 青島 黃山 杭州 旅游日程 要在表格中插入新行，只需在要插入的地方添加 tr和相應的 td標記即可。要插入新列，只需在每行需要的地方插入單元格 td。 ?刪除行或列 要刪除行，只需將代碼中的相應的 tr標記及該 tr標記內(nèi)的所有的 td標記。同樣，要刪除列，應將定義改列的所有標記都刪除。 實例 813 設置表和單元格的屬性 一、學習目標 ?掌握表格其他屬性的設定 ?掌握如何合并單元格 ?掌握如何設臵單元格內(nèi)容的格式 圖 823 表格屬性設置 二、實例結果，如圖所示 ?過程與步驟： 1．通過依次單擊任務欄上的 【 開始 】 → 【 程序 】 → 【 附件 】 →【 記事本 】 菜單命令打開記事本 2．在記事本的編輯面板中輸入以下代碼，創(chuàng)建一個的季度報表，同時進行相應的格式設定： html headtitle表格的使用舉例 /title/head body table border=6 align=center bgcolor=9933FF cellpadding=2 cellspacing=5 width=70% height=60% !表格標題 captionfont size=+3b季度報表 /b/font/caption !表頭 th /th th colspan=3第一季度 /th th colspan=3第二季度 /th !第一行數(shù)據(jù) tr td月份 /td td一月 /td td二月 /td td三月 /td td四月 /td td五月 /td td六月 /td /tr !//第二行數(shù)據(jù) tr td rowspan=2 align=center valign=bottom兩項金額 /td td100/td td200/td td500/td td200/td td300/td td700/td /tr !第三行數(shù)據(jù) tr td100/td td200/td td500/td td200/td td300/td td700/td /tr /table /body /html 。 4．運行結果如圖 823所示。 三、涵蓋的知識點： 1．合并單元格 在我們設計網(wǎng)頁的時候，有時需要將多個行或多個列合并為一個單元格。在 th或td標記中使用 colspan屬性，可以設臵單元格所跨越的列數(shù)，例如 colspan=5 表示跨越 5列。在 th或 td標記中使用 rowspan屬性，可以設臵單元格所跨的行數(shù)，例如，rowspan=5 表示跨越 5行。在本實例中可以看到相應的源代碼： ?季度劃分 ： th colspan=3第一季度 /th th colspan=3第二季度 /th 金額分配： td rowspan=2 align=center valign=bottom兩項金額 /td 相應的效果我們也能從 823看得到。 2．設臵表的屬性 用戶可以表的寬度和高度，使用 width屬性進行設臵，其屬性值可以采用百分比的方式，也可以以像素為單位。還可以給表格著色，使用 bgcolor屬性，如果表格看起來比較擁擠，可以增加間距，cellspacing（單元間距）指單元格之間的間距，cellpadding（單元填充）則指表的單元格邊界與單元格內(nèi)容之間的間距，在很多表格中，單元格內(nèi)容旁邊合適的空間會更適宜閱讀，也更加美觀。 ?在本例中設臵了表的這些屬性，提供大家參考： table border=6 align=center bgcolor=9933FF cellpadding=2 cellspacing=5 width=70% height=60% 這樣設臵之后，會使表格的寬度占據(jù) 70％的屏幕，高度占據(jù) 60％的屏幕，背景色為淡紫色，單元格間距為 5，而單元格內(nèi)容到邊界的距離則為 2。效果見本例的運行結果。 指定單元格內(nèi)文本的位臵，使用 align（水平對齊）和valign（垂直對齊）屬性可以控制表的單元格內(nèi)得對齊方式。Align屬性可以使用下列值： left、 center、 right。 Valign屬性可以取值為： top、 middle、 bottom。本例中的下列代碼說明了這一點： td rowspan=2 align=center valign=bottom兩項金額/td ?提示：實際做網(wǎng)頁大多使用制作工具，設計表格及其屬性都是非常方便的。另外，表格很好的定位工具，在實際設計過程中用處很大。 總之，在具體設計表格的時候，我們可以根據(jù)具體需求，做出合適而美觀的表格以滿足用戶的需求。 實例 814 表格嵌套 一、學習目標 ?掌握表格嵌套的原則 ?能靈活運用表格進行頁面布局 ?復習鞏固以前的知識 圖 824 表格嵌套 二、實例結果，如圖所示 ?過程與步驟： 1．通過依次單擊任務欄上的 【 開始 】 → 【 程序 】 → 【附件 】 → 【 記事本 】 菜單命令打開記事本 2．在記事本的編輯面板中輸入以下代碼，創(chuàng)建一個簡單的表格嵌套實例，同時對以前的知識有所涉及： html head title表格嵌套 /title /head body table align=center cellpadding=0 cellspacing=0 width=619 tr td align=center valign=top height=103 img src=清華 .JPG width=459 height=104/td /tr tr td align=left background= height=30 pfont size=2 color=990033 當前位臵：/font a href=font size=2color=990033首頁/font/a a hre