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