第6章 表格及表單

1、第6章 表格與表單表格與表單6.1 表格控制6.1 表格控制6.1.1 表格的創(chuàng)建6.1.2 表格的屬性控制1表格屬性成功插入表格后，當(dāng)選中整個(gè)表格時(shí)，“屬性”面板即刻顯示當(dāng)前表格的各種屬性。2單元格屬性選擇一個(gè)或多個(gè)單元格，此時(shí)“屬性”面板即刻顯示相關(guān)屬性參數(shù)。圖6-4 單元格屬性面板6.1 表格控制6.1.3 表格的基本操作1向表格內(nèi)添加內(nèi)容 圖6-5 插入表格 圖6-6 插入一幅圖像 圖6-7 插入多幅圖像1向表格內(nèi)添加內(nèi)容6.1 表格控制2選擇表格與單元格圖6-10 單擊上邊框選擇整個(gè)表格 圖6-11 使用標(biāo)簽選擇器選擇整個(gè)表格鼠標(biāo)變成表格網(wǎng)格圖標(biāo)選擇標(biāo)簽6.1 表格控制3拆分、合并表

2、格 拆分指的是將一個(gè)單元格拆分為多個(gè)單元格；合并指的是將多個(gè)單元格合并為一個(gè)單元格。 圖6-20 預(yù)覽效果4復(fù)制、粘貼表格5添加刪除表格的行或列6.1 表格控制6.1.4 表格中常用的CSS屬性與表格相關(guān)的CSS屬性主要有border-collapse、border-spacing、caption-side和empty-cells，更為詳細(xì)的解釋，如表6-1所示。表6-1 表格中常用的CSS屬性屬性屬性值及其含義說明border-collapseseparate（默認(rèn)值）邊框獨(dú)立設(shè)置表格的行和單元格的邊框是否合并在一起collapse邊框合并border-spacinglength由浮點(diǎn)數(shù)字和

3、單位標(biāo)識(shí)符組成的長(zhǎng)度值，不可為負(fù)值當(dāng)設(shè)置表格為邊框獨(dú)立時(shí)，行和單元格的邊在橫向和縱向上的間距。當(dāng)指定一個(gè)length值時(shí)，這個(gè)值將作用于橫向和縱向上的間距；當(dāng)指定了兩個(gè)length值時(shí)，第一個(gè)作用于橫向間距，第二個(gè)作用于縱向間距caption-sidetop（默認(rèn)值）caption 在表格的上邊設(shè)置表格的caption對(duì)象是在表格的那一邊，它是和caption對(duì)象一起使用的屬性rightcaption 在表格的右邊bottomcaption 在表格的下邊leftcaption 在表格的左邊empty-cellsshow（默認(rèn)值）顯示邊框設(shè)置表格的單元格無內(nèi)容時(shí)，是否顯示該單元格的邊框（僅當(dāng)表格

4、行和列的邊框獨(dú)立時(shí)此屬性才生效hide隱藏邊框6.1 表格控制6.1.5 隔行換色CSS表格圖6-36 最終預(yù)覽效果6.1 表格控制6.2.1 創(chuàng)建表單域圖6-38 創(chuàng)建表單域6.2 表單控制6.2.2 插入多種表單對(duì)象1插入文本字段圖6-39 插入單行文本字段圖6-40 插入多行文本字段圖6-41 插入密碼類型文本字段6.2 表單控制2插入復(fù)選框和復(fù)選框組圖6-42 插入單個(gè)復(fù)選框6.2 表單控制 3插入單選按鈕和單選按鈕組 4插入列表或菜單圖6-45 菜單預(yù)覽后的效果 圖6-47 列表預(yù)覽后的效果 6.2 表單控制5插入跳轉(zhuǎn)菜單6插入文件域6.2 表單控制6.2.3 表單的美化CSS登錄框的制作圖6-58 最終預(yù)覽效果 6.2 表單控制圖6-5