Dreamweaver中用CSS樣式製作漂亮的彩色邊框表格

Dreamweaver可以直觀的製作各種表格,但是用普通的製作表格的方法想設置出漂亮的彩色邊框卻是一件不容易的事情。那麼如何用CSS樣式快速的製作出漂亮的邊框表格呢?下面我們來動手學習一下吧!

工具/原料

Adobe Dreamweaver軟體

方法/步驟

啟動Adobe Dreamweaver軟體,單擊歡迎界面窗口中的新建HTML按鈕,創建一個新的空白網頁文檔。

保存文檔後,將Dreamweaver窗口右上角的工作區布局更改為「經典」布局方式,這樣可以讓「插入」面板顯示出來。

單擊「常用」面板當中的「插入表格」按鈕,彈出「表格」對話框,設置插入的表格為3行3列,寬度600像素(大家可以根據自己的需要設置行列以及寬度值),邊框粗細、單元格邊距和間距均設置為0,我們等會用CSS樣式來控制它們。

表格插入後,在單元格中任意輸入文本。然後單擊Dreamweaver窗口右邊「CSS樣式」浮動面板上的「新建CSS樣式規則」按鈕,彈出「新建CSS規則」對話框。

在「新建CSS規則」對話框的「選擇器類型」下拉列表中選擇「標籤(重新定義HTML元素)」選項,「選擇器名稱」的下拉列表中選擇「table」也就是表格的標籤,「規則定義」選項默認為「僅限該文檔」(如果需要對其他文檔中的表格也使用此樣式可更改此選項)。

單擊「確定」按鈕後打開「table的CSS規則定義」對話框,選擇左邊「分類」選項中的「邊框」項,我們來對表格的外邊框進行設置。將右邊窗口中「樣式」、「邊框」、「顏色」欄下「全部相同」的複選框取消勾選,因為對於表格我們只設置上邊和左邊的邊框樣式,上和左的「樣式」選擇「solid(實線)」,「寬度」填入數值2px(細邊框表格此處填1像素),顏色可以任意選擇自己喜歡的顏色。單擊「確定」按鈕完成對於表格的樣式設置。

再次返回Dreamweaver窗口,單擊右邊「CSS樣式」浮動面板上的「新建CSS樣式規則」按鈕,彈出「新建CSS規則」對話框。這次我們在「新建CSS規則」對話框的「選擇器名稱」的下拉列表中選擇「td」也就是單元格的標籤,其他選項同上。

單擊「確定」按鈕後打開「td的CSS規則定義」對話框,先選擇左邊「分類」選項中的「區塊」項,我們把「文本對齊」方式設置為「center(居中)」,讓單元格中的文本都居中對齊。

然後選擇左邊「分類」選項中的「方框」項,默認勾選「填充」欄中「全部相同」的複選框,填入數值5px,讓單元格內的文字與單元格四周的距離均為5像素。

最後選擇左邊「分類」選項中的「邊框」項,我們來對單元格的邊框進行設置。將右邊窗口中「樣式」、「邊框」、「顏色」欄下「全部相同」的複選框取消勾選,因為對於單元格我們只設置右邊和下邊的邊框樣式,右和下的「樣式」選擇「solid(實線)」,「寬度」填入數值2px(細邊框表格此處填1像素),顏色可以任意選擇自己喜歡的顏色。單擊「確定」按鈕完成對於單元格的樣式設置。

單擊「確定」按鈕完成製作。保存文檔後預覽最終頁面表格效果,可以看到漂亮的彩色邊框表格。

注意事項

本文中使用的是Adobe Dreamweaver CS6軟體版本,其他版本也能用此方法製作。
文中的CSS樣式窗口是中文版,所以建議提前安裝Dreamweaver CS6的CSS樣式中文補丁。

本文內容整理自網絡, 文中所有觀點看法不代表淘大白的立場