電子商務(wù)網(wǎng)頁設(shè)計(jì)（第三版）第 3 章 表格在網(wǎng)頁中的應(yīng)用

第3章表格在網(wǎng)頁中的應(yīng)用

第1節(jié)利用表格顯示數(shù)據(jù)

第2節(jié)利用表格布局網(wǎng)頁第1節(jié)網(wǎng)頁的結(jié)構(gòu)和色彩設(shè)計(jì)一、表格的概念1.網(wǎng)頁中的表格表格是組成網(wǎng)頁的基本元素之一。很多網(wǎng)站的頁面是以表格為框架制作的。和Excel電子表格一樣，網(wǎng)頁中也可以用表格來顯示數(shù)據(jù)，但是網(wǎng)頁中的表格功能更強(qiáng)一些，網(wǎng)頁中的表格還可以用來進(jìn)行網(wǎng)頁布局設(shè)計(jì)（排版）。2.表格的組成元素表格由三個(gè)主要元素構(gòu)成：行、列以及單元格。單元格是行和列相交的部分。單元格和單元格之間的距離叫單元格間距。單元格內(nèi)容和單元格邊界的距離叫單元格邊距。整張表格的邊緣叫作邊框。表格也可以帶一標(biāo)題，標(biāo)題在表格的頂端，表格也以有背景色，可以單獨(dú)對表格、行、單元格設(shè)置不同的背景色。二、表格的基本操作1.新建表格2.選擇表格元素3.調(diào)整表格、列和行的大小4.添加/刪除行和列當(dāng)行被選中時(shí)，單擊鍵盤上的“Delete”鍵可以刪除一行；當(dāng)列被選中時(shí)，單擊鍵盤上的“Delete”鍵可以刪除一列；單擊選中任意一個(gè)單元格時(shí)，按“Ctrl+M”快捷鍵可以在當(dāng)前單元格下方插入一行；單擊選中任意一個(gè)單元格時(shí)，按“Ctrl+Shift+A”快捷鍵可以在當(dāng)前單元格左邊插入一列。5.復(fù)制、粘貼和刪除單元格6.設(shè)置單元格、行或列的屬性7.合并或拆分單元格三、在網(wǎng)頁中制作簡單的表格1.可視化創(chuàng)建表格2.表格的HTML表示（1）<table></table>表示表格。（2）<caption></caption>表示表格的標(biāo)題。（3）<tr></tr>表示行。（4）<td></td>表示單元格。（5）width表示表格寬度，border表示表格的邊框線粗細(xì)，cellpadding表示單元格的邊距cellspacing表示單元格的間距，bgcolor表示背景色。（6）單元格的具體內(nèi)容寫在<td></td>之間，<td></td>就象一對括號，<td>表示括號開始，</td>表示括號結(jié)束，它們必須成對出現(xiàn)。第2節(jié)利用表格布局網(wǎng)頁網(wǎng)頁布局就是將頁面上的元素按照一定的形式排列好。一般網(wǎng)頁的版面都是分布整齊、左右對稱的，具有類似表格的特點(diǎn)，因此可以借助表格來進(jìn)行網(wǎng)頁布局。在用表格進(jìn)行布局時(shí)，一般主要用單元格來分割版面中的不同顯示部分，所以不需要設(shè)表格的背景色、表格的邊框線等，通過調(diào)整單元格的寬度、高度、間距、邊距等參數(shù)來調(diào)節(jié)版面，另外利用表格嵌套功能，還可以對局部進(jìn)行更精細(xì)地調(diào)整。一、網(wǎng)頁布局的概念和原理二、利用表格布局網(wǎng)頁的簡單實(shí)例1.創(chuàng)建表格2.表格參數(shù)設(shè)置3.表格標(biāo)簽檢查器的設(shè)置4.輸入表格內(nèi)容5.表格的HTML表示三、用表格布局易買網(wǎng)商品列表頁（product-list.htm）1.插入表格（1）打開DreamweaverCS5，新建頁面命名為“product-list.htm”，并保存。（2）單擊菜單“插入”/“表格”，或按“Ctrl+Alt+T”快捷鍵。（3）在彈出的“表格”對話框中，輸入行數(shù)為