網頁設計製作表格的步驟_如何在網頁製作中用好表格

1、Web製作網頁製作 html 表格

個人建議：瀏覽器F12查找，一般程序員寧可重寫，也不願查找錯誤

2、如何在網頁製作中用好表格

對許多不熟悉HTML的朋友來說，還以為是使用了CSS、JavaScript等技術，其實不然。看完下面的內容你就會明白了。控製表格邊框的顯示對使用Dreamweaver、FrontPage等所見即所得的網頁編輯軟體的朋友來說，很難控製表格的上下左右的邊框顯示與隱藏，其實你只要在HTML中的〈table〉〈/table〉標簽頁中添加一項「frame」屬性即可。不顯示表格邊框(frame=void) 只顯示表格的上邊框(frame=above ) 只顯示表格的下邊框(frame=below ) 只顯示表格的上下邊框(frame=hsides) 只顯示表格的左右邊框(frame=vsides) 只顯示表格的左邊框(frame=lhs) 只顯示表格的右邊框(frame=rhs) 例如，〈table width="75%" border="1" frame=void/above/below/hsides/vsides/lhs/rhscellpadding="0" cellspacing="0"〉〈/table〉控製表格行與列的分割線在網頁設計中，如果版面沒設計好，那麼這個網頁可以說是失敗的。利用表格進行分欄，可以達到整齊排版的目的，美化你的網頁外觀。所謂分欄，就是讓你的網頁變成一個大表格，然後根據你的版面設計和內容安排，將這個表格分成不同的行和列，調整各個行和列的寬度和高度，以達到你排版的要求。當然了，你還可以在表格之中再嵌套表格，以達到更加復雜的排版需要。在設計過程中你可以靈活設置單元格邊距和單元格間距的數值。在HTML語言中表格的分割線是由「rules」屬性來決定的。所以我們可以通過手工修改源代碼的方法來控制分割線的顯示與隱藏。 1、顯示所有分割線(rules=all) 如〈table width="75%" border="1" rules=all cellpadding="0" cellspacing="0"〉 2、不顯示任何分割線(rules=none) 3、只顯示行與行之間的分割線(rules=rows) 4、只顯示列與列之間分割線(rules=cols) 用表格邊框實現單線顯示用線條來美化網頁是網頁設計者經常使用的手法之一。在網頁中除了用〈hr〉標記來實現插入水平線外，我們還可以用表格來實現。FrontPage2000默認的表格線比較粗，但只要稍加處理，就可以製作出一個細線表格，細線表格非常娟秀小巧，很有個性。它的具體操作方法是：在表格屬性中將邊框粗細設為「1」，將單元格邊距和單元格間距設置為「0」，同時將亮邊框設置成與表格背景相同的顏色，暗邊框設成你想要的任一顏色即可，怎麼樣，細線表格出現了吧。

3、如何在網頁中製作表格框架

table{
border:1px solid #000;/*黑色1像素粗邊框*/
}
td{
border:none;/*這個是單元格，不給他要邊框*/
}
以上是全局的，用了以後所有的表格都是這個樣式。
如果你要給特定的表格加入這個樣式：
1 給那個表格加上class='classname' （classname是你自己起的樣式名）
2 然後在CSS里加上
.classname{
border:1px solid #000;/*黑色1像素粗邊框*/
}
.classname td{
border:none;/*這個是單元格，不給他要邊框*/
}

只有內邊框沒有外邊框的話，我就只會用賴皮的方法：給table外面套一個overflow:hidden的div，寬度和高度比table小2px，給table加上margin-left:-1px;margin-right:-1px;這樣把他的表格邊框遮住。。

4、求以下網頁設計表格html代碼

代碼（大小有需要可以調）：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>練習使用HTML</title>
    </head>

    <body>
        <center>
            <table border="1px" cellpadding="0px" cellspacing="0px">
                <tr>
                    <td colspan="4" height="60px"></td>
                </tr>
                <tr>
                    <td width="200px" height="60px"></td>
                    <td width="200px" height="60px"></td>
                    <td width="200px" height="60px"></td>
                    <td width="200px" height="60px"></td>
                </tr>
                <tr>
                    <td colspan="4" height="60px"></td>
                </tr>
                <tr>
                    <td colspan="4" height="60px"></td>
                </tr>
                <tr>
                    <td colspan="4" height="60px"></td>
                </tr>
                <tr>
                    <td colspan="4" height="60px"></td>
                </tr>
            </table>
        </center>
    </body>

</html>

運行效果：

5、網頁設計中有些表格怎麼製作啊？？？

這是選項卡效果，需要用javascript實現。

給你一個參考實例：http://www.blueidea.com/tech/web/2008/5460.asp

6、怎樣製作簡單的靜態的網頁設計

你好。首先下載Dreamweaver.exe並打開，選擇你使用的編輯語言，本案例用html
打開頁面後，選著設計窗口，如圖所示。設計窗口可以快速布局網頁，不需要自己編輯代碼。

打開你要設計的網頁的設計圖，本經驗是百度經驗首頁為例，首先我們製作頂上的搜索條，點擊插入—表格（如圖所示）。打開表格屬性編輯表格屬性。插入1行和5列，表格寬度為1130,（即為網頁的寬度），邊距，間距分別為0，此表格只是為了定位，因此不設邊框。

設置好表格後，可在表格裡面插入你的內容，首先我們插入logo,點擊插入—圖像—選擇你要插入的圖片。點確定即可完成logo插入。表格的小大高度都可根據設計圖需要調整，滑鼠移到表格邊框虛線即可拖拉調整高度或寬度。如圖所示

接下來我們來做搜索框，點擊插入—表單—插入文本域—確定。插入文本框後可點擊文本框調整文本框的屬性。根據設計圖，文本框上班還要添加內容，因此，可選擇單元格右擊選擇表格—拆分單元格，此處是需要添加一行的內容，因此拆分為兩行，如圖所示。

用同樣的辦法拆分上面的行，因為要添加10個選擇項，因此拆分為10列（右擊選中的行—拆分單元格—10列—確定）。拆分好後在小格裡面添加文字內容即可。表格大小可根據步驟四調整。

接下來我們做搜索按鈕，同樣根據設計圖要把表格拆分為兩行。點擊插入插入按鈕的圖片。

接下來給按鈕添加鏈接，本次經驗分享的是靜態網頁，因此在此先跟大家分享怎麼直接添加按鈕鏈接。同樣是點擊插入—添加超級鏈接,填寫你事先做好的頁面鏈接，或者其他網站鏈接。

剩下的內容都可根據方法步奏逐漸添加，調節細節即可完成你想要設計的網頁。如圖所示是上面步奏所做的靜態頁面，把所有做好的網頁用超級鏈接鏈接起來即可做成一個簡單的網站

另外我們還可以採用front page。也可以很容易的實現。
望採納。

7、網頁製作的表格怎麼做

<table width="312" height="124" border="1" cellpadding="0" cellspacing="0" bordercolor="#000000"> <tr> <td colspan="3"><div align="center">這是一個表格示例</div></td> </tr> <tr> <td><div align="center">姓名</div></td> <td><div align="center">姓別</div></td> <td><div align="center">年齡</div></td> </tr> <tr> <td><div align="center">張三</div></td> <td><div align="center">男</div></td> <td><div align="center">22</div></td> </tr> </table>

8、如何在網頁製作中用好表格

對許多不熟悉HTML的朋友來說，還以為是使用了CSS、JavaScript等技術，其實不然。看完下面的內容你就會明白了。
控製表格邊框的顯示
對使用Dreamweaver、FrontPage等所見即所得的網頁編輯軟體的朋友來說，很難控製表格的上下左右的邊框顯示與隱藏，其實你只要在HTML中的〈table〉〈/table〉標簽頁中添加一項「frame」屬性即可。
不顯示表格邊框(frame=void)
只顯示表格的上邊框(frame=above )
只顯示表格的下邊框(frame=below )
只顯示表格的上下邊框(frame=hsides)
只顯示表格的左右邊框(frame=vsides)
只顯示表格的左邊框(frame=lhs)
只顯示表格的右邊框(frame=rhs)
例如，〈table width="75%" border="1" frame=void/above/below/hsides/vsides/lhs/rhs cellpadding="0" cellspacing="0"〉〈/table〉控製表格行與列的分割線
在網頁設計中，如果版面沒設計好，那麼這個網頁可以說是失敗的。利用表格進行分欄，可以達到整齊排版的目的，美化你的網頁外觀。所謂分欄，就是讓你的網頁變成一個大表格，然後根據你的版面設計和內容安排，將這個表格分成不同的行和列，調整各個行和列的寬度和高度，以達到你排版的要求。當然了，你還可以在表格之中再嵌套表格，以達到更加復雜的排版需要。在設計過程中你可以靈活設置單元格邊距和單元格間距的數值。在HTML語言中表格的分割線是由「rules」屬性來決定的。所以我們可以通過手工修改源代碼的方法來控制分割線的顯示與隱藏。
1、顯示所有分割線(rules=all)
如〈table width="75%" border="1" rules=all cellpadding="0" cellspacing="0"〉
2、不顯示任何分割線(rules=none)
3、只顯示行與行之間的分割線(rules=rows)
4、只顯示列與列之間分割線(rules=cols)
用表格邊框實現單線顯示
用線條來美化網頁是網頁設計者經常使用的手法之一。在網頁中除了用〈hr〉標記來實現插入水平線外，我們還可以用表格來實現。FrontPage 2000默認的表格線比較粗，但只要稍加處理，就可以製作出一個細線表格，細線表格非常娟秀小巧，很有個性。它的具體操作方法是：在表格屬性中將邊框粗細設為「1」，將單元格邊距和單元格間距設置為「0」，同時將亮邊框設置成與表格背景相同的顏色，暗邊框設成你想要的任一顏色即可，怎麼樣，細線表格出現了吧。

9、如何在網頁製作中用好表格

在製作網頁的時候，常常要遇到製作虛線表格的問題，下面的文章就能解決這個問題。
方法一:作一個1x2的圖。
半黑半白，再利用表格作成線。這種方法雖然麻煩，但在任何瀏覽器中均可瀏覽，兼容性最好。
方法二:在css裡面設定。
如果你用dreamweaver話，只要在css面板里new一個style，選擇「redefine
html
tag」，再在下拉菜單里先「table」，在彈出的面板里，category里選擇border，在border里，將top,left,right,bottom都設成1px，顏色設成你想要的邊框的顏色。然後在style下拉框里選擇dashed。一切ok。只是所有的表格都會用虛線做邊框了。注意，這個效果在瀏覽器里才能看見。
方法三:直接在html里設置(如果你只想讓某一個表格邊框是虛線的話)。
在表格的html里加上這個:
style="border-left:
#000000
1px
dashed;
border-right:
#000000
1px
dashed;
border-top:
#000000
1px
dashed;
border-bottom:
#000000
1px
dashed"
顏色是十六位代碼，你可以自己設。

10、如何用Dreamweaver製作網頁表格

　1、在插入欄中選擇

按鈕或「插入」菜單>選「表格」。系統彈出表格對話框如下圖。這些參數我們都已經認識了。行：2。列：2。其餘的參數都保留其默認值。。

Dreamweaver網頁製作教程：表格設計

2、在編輯視圖界面中生成了一個表格。表格右、下及右下角的黑色點是調整表格的高和寬的調整柄。當游標移到點上就可以分別調整表格的高和寬。移到表格的邊框線上也可以調整。（如下圖）

Dreamweaver網頁製作教程：表格設計

3、在表格的第一格按住左鍵不放，向下拖拽選中二格單元格。（如下圖）

Dreamweaver網頁製作教程：表格設計

然後在展開的屬性面板中選擇合並單元格按鈕（如下圖紅框所示）。將表格的單元格合並。如果要分割單元格，則可以用合並單元格按鈕右邊的按鈕。

Dreamweaver網頁製作教程：表格設計

合並結果如下圖。

Dreamweaver網頁製作教程：表格設計

4、用滑鼠拖拽表格的邊框調整到適當的大小。

5、單擊左邊的單元格，然後輸入「攝影作品賞析」文字，並調整大小，因是豎排應每個字回車一次。如果需要調整格子的大小。只需要滑鼠的游標移動到邊框上拖拽即可。

6、在右邊上下單元格內分別插入圖片和文本。頁面的基本樣子有了。

Dreamweaver網頁製作教程：表格設計

7、游標移動到表格的邊框上單擊。表格周圍出現調整框，表示選中整張表格。然後，在屬性面板中將「邊框」值設置適合的值，如果為0，邊框在編輯狀態，為虛線顯示，瀏覽時就看不見了。

一個符合要求的頁面在表格的幫助下做好了。

通過上面的操作我們對於表格有了一個初步的認識。還要提示一點，對整幅表格操作和對一個單元格操作的時候，相應的屬性面板是不同的。

表格顏色設置，選擇整幅表格後，利用屬性面板的顏色選擇器設置背景色。單元格也可單獨設置。滑鼠在需要設置的單元格點一下，其餘操作同上。

下面我們就來看看這些屬性面板的區別。

表格的屬性面板，要出現這個面板必須先選中整幅表格，方法上面已經提到過了。您可以在眾多選項中填入需要的參數。如下圖：

Dreamweaver網頁製作教程：表格設計

選中了單元格之後屬性面板就發生如下變化了。選擇行或者列都屬於選中單元格。如下圖：

Dreamweaver網頁製作教程：表格設計

對表格操作的幾種常用方式：

合並：將選中的連續單元格合並成為一個單元格。

分割：將一個單元格分割成若干單元格。

水平對齊方式：分為（左）（中）（右）三種。

垂直對齊方式：分為（頂）（居中）（居底）（基線對齊）

表格還可以增加或者刪除行或者列。在一個單元格中單擊滑鼠右鍵。在右鍵菜單中選擇表格選項>>選擇「插入行或列」。系統會彈出對話框如下。

Dreamweaver網頁製作教程：表格設計

在對話框里填入數據即可。最後要說的是選中表格中的各種元素的方法：

選中一行，把游標移到該行的最左邊單元格的左面，游標會變成箭頭狀。單擊就可以選中一行。

選中一列，把游標移到該列的最上邊單元格的上面，游標會變成箭頭狀，然後單擊可以選中一列。

選中整張表格，把游標移到表格的左上角或右邊框或下邊框線上。單擊即可選中整幅表格。選中的表格會在周圍出現一個黑框表示整張表格選中了。請看如下示意：

選中單元格。單元格可以同時選中多個。選擇連續的單元格，游標先選中的一個單元格，按shift鍵不放，選取最後一個單元格。選不連續的單元格。按住Ctrl鍵，點取所需要的單元格即可。

導航:首頁 > 萬維百科 > 網頁設計製作表格的步驟

網頁設計製作表格的步驟

與網頁設計製作表格的步驟相關的知識