第13章使用表格輕松排列和布局網(wǎng)頁(yè)元素

第13章使用表格輕松排列和布局網(wǎng)頁(yè)元素教學(xué)內(nèi)容：表格是網(wǎng)頁(yè)設(shè)計(jì)制作時(shí)不可缺少的重要元素。無(wú)論用于排列數(shù)據(jù)還是在頁(yè)面上對(duì)文本進(jìn)行排版，表格都表現(xiàn)出了強(qiáng)大的功能。它以簡(jiǎn)潔明了和高效快捷的方式，將數(shù)據(jù)、文本、圖像、表單等元素有序的顯示在頁(yè)面上，從而設(shè)計(jì)出版式漂亮的網(wǎng)頁(yè)。表格最基本的作用就是讓復(fù)雜的數(shù)據(jù)變得更有條理，讓人容易看懂，在設(shè)計(jì)頁(yè)面時(shí)，往往要利用表格來(lái)布局定位網(wǎng)頁(yè)元素。通過(guò)對(duì)本章的學(xué)習(xí)，應(yīng)掌握插入表格、設(shè)置表格屬性、編輯表格的方法；能夠利用表格布局網(wǎng)頁(yè)。

教學(xué)重點(diǎn)插入表格和表格元素選擇表格元素表格的基本操作排序及整理表格內(nèi)容利用表格排列數(shù)據(jù)創(chuàng)建細(xì)線表格13.1插入表格和表格元素在Dreamweaver中，表格可以用于制作簡(jiǎn)單的圖表，還可以用于安排網(wǎng)頁(yè)文檔的整體布局，起著非常重要的作用。利用表格設(shè)計(jì)頁(yè)面布局，可以不受分辨率的限制。13.1.1插入表格

在Dreamweaver中插入表格非常簡(jiǎn)單，具體操作步驟如下。13.1.2設(shè)置表格屬性

直接插入的表格有時(shí)并不能讓人滿意，在Dreamweaver中，通過(guò)設(shè)置表格或單元格的屬性，可以很方便地修改表格的外觀。13.1.3添加內(nèi)容到單元格

插入表格后，就可以直接向表格中添加內(nèi)容了，將光標(biāo)置于表格的單元格中，分別輸入相應(yīng)的文字。13.2選擇表格元素要想在文檔中對(duì)一個(gè)元素進(jìn)行編輯，那么首先要選中它；同樣，要想對(duì)表格進(jìn)行編輯，首先也要選中它。選擇表格操作可以分為選中整個(gè)表格、選中單元格等幾種情況，下面分別進(jìn)行介紹。13.2.1選取表格選擇整個(gè)表格有以下幾種方法。單擊表格線的任意位置。將光標(biāo)置于表格內(nèi)的任意位置，選擇菜單中的【修改】|【表格】|【選擇表格】命令。將光標(biāo)放置到表格的左上角，按住鼠標(biāo)左鍵不放，拖曳鼠標(biāo)指針到表格的右下角，將整個(gè)表格中的單元格選中，單擊鼠標(biāo)右鍵，在彈出的菜單中選擇【表格】|【選擇表格】選項(xiàng)。將光標(biāo)放置在表格的任意位置，單擊文檔窗口左下角的<table>標(biāo)簽，選中表格后，選項(xiàng)控柄就出現(xiàn)在表格的四周，13.2.2選取行或列選擇表格的行或列有以下兩種方法。當(dāng)鼠標(biāo)指針位于要選擇行首或列頂時(shí)，鼠標(biāo)指針形狀變成了

箭頭或

箭頭時(shí)，單擊鼠標(biāo)左鍵即可以選中行或列。將光標(biāo)置于要選擇的行首或列頂，按住鼠標(biāo)左鍵不放從左至右拖曳或者從上至下拖曳，即可選中行或者列。13.2.3選取單元格選擇一個(gè)單元格有以下幾種方法。選取單個(gè)單元格的方法是在要選擇的單元格中單擊鼠標(biāo)左鍵，并拖曳鼠標(biāo)至單元格末尾。按住<Ctrl>鍵，然后單擊單元格可以將其選中。將光標(biāo)放置在單元格中，單擊文檔窗口左下角的<td>標(biāo)簽。13.3表格的基本操作選擇了表格后，便可以通過(guò)剪切、復(fù)制和粘貼等一系列的操作實(shí)現(xiàn)對(duì)表格的編輯操作。表格的行數(shù)、列數(shù)可以通過(guò)增加、刪除行和列及拆分、合并單元格來(lái)改變。13.3.1調(diào)整表格和單元格的大小

調(diào)整表格的高度和寬度時(shí)，表格中所有單元格將按比例相應(yīng)改變大小。13.3.2添加或刪除行或列

在已創(chuàng)建的表格內(nèi)增加行、列，要先將光標(biāo)放置在要插入行、列的單元格中，然后通過(guò)以下方法增加。13.3.3拆分單元格拆分單元格有以下幾種方法。將光標(biāo)放置在要拆分的單元格中，選擇菜單中的【修改】|【表格】|【拆分單元格】命令，打開(kāi)【拆分單元格】對(duì)話框，在對(duì)話框中進(jìn)行相應(yīng)的設(shè)置，單擊【確定】按鈕，即可拆分單元格。將光標(biāo)放置在要拆分的單元格中，單擊鼠標(biāo)右鍵，在彈出的菜單中選擇【表格】|【拆分單元格】選項(xiàng)，打開(kāi)【拆分單元格】對(duì)話框，也可以拆分單元格。將光標(biāo)放置在需要拆分的單元格中，在【屬性】面板中單擊【拆分單元格為行或列】按鈕，打開(kāi)【拆分單元格】對(duì)話框，也可以拆分單元格。13.3.4合并單元格

合并單元格有以下幾種方法。選中要合并的單元格，選擇菜單中的【修改】|【表格】|【合并單元格】命令，即可將選中的單元格合并。選中合并的單元格，單擊鼠標(biāo)右鍵，在彈出的菜單中選擇【表格】|【合并單元格】選項(xiàng)，即可合并單元格。選中合并的單元格，在【屬性】面板中單擊【合并所選單元格，使用跨度】按鈕，即可將選中的單元格合并。13.4排序及整理表格內(nèi)容DreamweaverCC提供了導(dǎo)入表格式數(shù)據(jù)和表格排序功能，使用這兩個(gè)功能可以整理表格內(nèi)的數(shù)據(jù)。13.4.1導(dǎo)入表格式數(shù)據(jù)在Dreamweaver中，可以將其他應(yīng)用軟件制作完成后的表格數(shù)據(jù)導(dǎo)入到網(wǎng)頁(yè)中，導(dǎo)入的數(shù)據(jù)要具有制表符、逗號(hào)、分號(hào)、引號(hào)或者其他定界符。具體操作步驟如下。13.4.2排序表格

如果想要使輸入的表格數(shù)據(jù)有一定的規(guī)律性，在Dreamweaver中可以對(duì)其進(jìn)行排序，具體操作步驟如下。13.5實(shí)戰(zhàn)

表格無(wú)疑是網(wǎng)頁(yè)制作中最為重要的一個(gè)對(duì)象，因?yàn)橥ǔ＞W(wǎng)頁(yè)都是依靠表格來(lái)排列數(shù)據(jù)的，它直接決定了網(wǎng)頁(yè)是否美觀、內(nèi)容組織是否清晰。合理地利用表格可以方