利用表格相關(guān)設(shè)計(jì)和制作網(wǎng)頁

利用表格相關(guān)設(shè)計(jì)和制作網(wǎng)頁Table）是一個(gè)重要的網(wǎng)頁元素，主要用來在頁面上布局?jǐn)?shù)據(jù)和圖像，使頁面中的信息布局合理、簡(jiǎn)潔。另外，在網(wǎng)頁設(shè)計(jì)制作中，表格還有一個(gè)重要作用，就是對(duì)網(wǎng)頁進(jìn)行排版。3.1表格網(wǎng)頁實(shí)例 表格化的頁面在不同平臺(tái)、不同分辨率的瀏覽器里都能顯示出原有的布局和對(duì)齊。圖4-1所示的是“天使部落”網(wǎng)頁利用表格進(jìn)行布局的頁面效果。圖4-1“天使部落”主頁3.2利用DreamweaverMX

編輯網(wǎng)頁表格3.2.1創(chuàng)建表格 表格主要由以下3個(gè)基本元素組成。行（Row）：表格在水平方向上的組成元素。

列（Column）：表格在豎直方向上的組成元素。

單元格（Cell）：表格中的最小的獨(dú)立存放數(shù)據(jù)的區(qū)域。 另外，還有以下幾個(gè)概念需要掌握。 邊框（Border）：?jiǎn)卧袼闹艿慕缇€標(biāo)志。 表格間距（Cellspace）：定義內(nèi)部表格線的寬度。 表格間隙（Cellpad）：相鄰的單元格之間的間隙。 在DreamweaverMX中，創(chuàng)建表格有以下4種方式。

執(zhí)行主菜單中的“插入”→“表格”命令。

按組合鍵Ctrl+Alt+T。

單擊插入面板上“常用”選項(xiàng)卡中的“插入表格”按鈕。

單擊插入面板上“表格”選項(xiàng)卡中的“插入表格”按鈕。 使用上述4種方式中任意一種方法都將打開如圖3-2所示的“插入表格”對(duì)話框。圖3-2“插入表格”對(duì)話框 對(duì)話框中各選項(xiàng)含義如下。 行數(shù)：初次指定表格的總行數(shù)。 列數(shù)：初次指定表格的總列數(shù)。 單元格填充：指定單元格的大小，以像素為單位。 單元格間距：指定單元格之間的距離，以像素為單位。 寬度：指定表格的寬度，以百分比或像素為單位（百分比用于根據(jù)瀏覽器窗口的大小來自動(dòng)調(diào)整表格的寬度）。 邊框：指定表格邊界的寬度，以像素為單位（如果在瀏覽器窗口中不顯示表格的邊框，則定義為0）。3.2.2表格的編輯1．修改表格（1）調(diào)整表格的大小圖3-4利用“屬性”面板調(diào)整表格的大?。?）調(diào)整行高、列寬（3）合并單元格（4）拆分單元格（5）表格的嵌套（6）表格的復(fù)制（7）刪除表格（8）增加或減少行、列跨度2．在表格中輸入文字和圖像 向表格中輸入的內(nèi)容主要是文字和圖片兩種形式。 （1）在表格中輸入文字 （2）在表格中插入圖像3.2.3設(shè)置表格屬性1．表格整體屬性設(shè)置圖3-11表格“屬性”面板2．行、列和單元格屬性設(shè)置圖3-12表格的行、列和單元格“屬性”面板3.2.4表格的排序 在表格的應(yīng)用中，常要對(duì)表格中的一組數(shù)據(jù)進(jìn)行排序。在DreamweaverMX中可以實(shí)現(xiàn)按數(shù)字的排序和按字母的排序。3.2.5表格的格式化 DreamweaverMX為表格提供了17種表格格式模板，可以從中選擇一種方案快速應(yīng)用到用戶設(shè)計(jì)的表格中。圖4-14“格式化表格”對(duì)話框3.3利用HTML編輯

網(wǎng)頁表格3.3.1利用HTML制作示例網(wǎng)頁表格 利用HTML同樣可以制作網(wǎng)頁表格。對(duì)于初學(xué)者直接使用HTML代碼編制網(wǎng)頁表格是件很困難的事情，但是，可以通過DreamweaverMX提供的“文檔”面板來查看已經(jīng)設(shè)計(jì)好的網(wǎng)頁表格的HTML代碼，以幫助用戶學(xué)習(xí)和掌握HTML代碼的編寫規(guī)則及方法。3.3.2表格的基本構(gòu)成 通常在HTML中創(chuàng)建一個(gè)普通的表格應(yīng)包括以下標(biāo)記符。 （1）TABLE （2）TITLE （3）CAPTION （4）TR （5）TD和TH （6）META3.4.2利用表格進(jìn)行頁面布局 DreamweaverMX為此提供了一種新的網(wǎng)頁排版視圖——布局視圖（LayoutView），在這種視圖模式下，用戶可以